본문 바로가기
JavaScript

16장 예제 - Array 객체 (2) Array 객체의 메서드

쥬크버그 2023. 4. 11. 01:55

1. concat() 메서드
 
 - 서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 줌
 - 어느 배열을 먼저 쓰는가에 따라 기준이 달라지고, 결과 배열의 순서도 달라짐
 
 - 배열 2개를 합쳐서 새로운 배열 만들기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배열 2개를 합쳐서 새로운 배열 만들기</title>
  <style>
   
  </style>
</head>
<body>
  <script>
    var nums = [1,2,3];
    var chars = ["a","b","c","d"];
   
    var numsChars = nums.concat(chars);
    var charsNums = chars.concat(nums);
    document.write("nums에 chars 합치면:"+numsChars,"<br>chars에 nums 합치면:"+charsNums);
   
  </script>
</body>
</html>

 
2. join() 메서드 
 
-배열 요소를 연결해서 하나의 문자열로 만들어 줌
- 각 요소에 구분자 넣기 가능 
기본형: 쉼표(,)
 
 - 배열 안의 요소 합치기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배열 안의 요소 합치기</title>
  <style>
   
  </style>
</head>
<body>
  <script>
    var nums = [1,2,3];
    var chars = ["a","b","c","d"];
   
   var string1 = nums.join();
   document.write("구분자 없이:",string1);
   document.write("<br>");
   var string2 = chars.join('/');
   document.write("/ 구분자 지정:",string2);
   
  </script>
</body>
</html>

 
3. push(), unshift() 메서드 
 
- push() 메서드 
 : 배열 맨 끝에 새로운 요소 추가 
- unshift() 메서드
 : 배열 맨 앞에 새로운 요소 추가 
 
- 배열에 새로운 요소 추가하기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배열에 새로운 요소 추가하기 </title>
  <style>
   
  </style>
</head>
<body>
  <script>
  var nums = [1,2,3];
 
  var ret1 = nums.push(4,5); //배열 맨 끝에 새로운 요소 추가
  document.write("lenth:",ret1,"|배열:",nums);
  document.write("<br>");
  var ret2 = nums.unshift(0); //배열 맨 앞에 새로운 요소 추가
  document.write("lenth:",ret2,"|배열:",nums);
  </script>
</body>
</html>

 
4. pop(), shift() 메서드
 
- pop() 메서드
 : 배열에서 맨뒤에 있는 요소를 꺼냄
- shift() 메서드
 : 배열에서 맨 앞에 있는 요소를 꺼냄
 
- 배열에서 요소 꺼내기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배열에서 요소 꺼내기</title>
  <style>
   
  </style>
</head>
<body>
  <script>
  var chars =["a","b","c","d"];

  var popped1 = chars.pop(); //마지막 요소 꺼냄
  document.write("꺼낸요소:",popped1,"|배열:",chars);
  document.write("<br>");
  var popped2 = chars.shift(); //1번째 요소 꺼냄
  document.write("꺼낸요소:",popped2,"배열:",chars);
  </script>
</body>
</html>

5. splice() 메서드 
 
- 괄호 안에 들어 있는 인수에 따라 배열 요소를 삭제하거나 새로운 요소를 추가 
 
5.1 인수가 1개인 경우
 - splice(인덱스 값)
 - 인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제
 - 삭제한 요소 반환
 
- splice() 메서드의 인수가 1개인 경우 요소 삭제하기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>splice()메서드의 인수가 1개인 경우 요소 삭제하기</title>
  <style>
   
  </style>
</head>
<body>
  <script>
  var numbers = [1,2,3,4,5];
  var newNumbers = numbers.splice(2);

  document.write("반환된 배열:"+ newNumbers + "<br>");
  document.write("변경된 배열:"+ numbers);
  </script>
</body>
</html>

 
5.2 인수가 2개인 경우 
-splice(인덱스 값, 삭제할 요소 개수)
- study.splice(2,1); 
  : 인덱스 값인 2인 요소부터 요소를 1개 삭제 
- 삭제한 요소 반환
 
- splice()메서드의 인수가 2개인 경우 요소 삭제하기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>splice()메서드의 인수가 2개인 경우 요소 삭제하기</title>
  <style>
   
  </style>
</head>
<body>
  <script>
  var study = ["html","css","web","jquery"];
  var newStudy = study.splice(2,1);
  document.write("반환된 배열:"+newStudy+"<br>");
  document.write("변경된 배열:"+study);
  </script>
</body>
</html>

 
5.3 인수가 3개 이상인 경우
- splice(시작위치, 삭제할 개수, 삭제한 위치에 새로 추가할 요소,..)
- study.splice(2,1,"js")
 : 인덱스 값인 2인 요소 1개를 삭제하고 새로운 요소 "js"를 추가 
 
- splice()메서드의 인수가 3개 이상인 경우 요소 삭제, 추가하기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>splice()메서드의 인수가 3개이상인 경우 요소 삭제하기</title>
  <style>
   
  </style>
</head>
<body>
  <script>
  var study = ["html","css","web","jquery"];
  var newStudy1=study.splice(2,1);
  var newStudy2 = study.splice(2,1,"js");
  document.write("반환된 배열:"+newStudy2+"<br>");
  document.write("변경된 배열:"+study);
  </script>
</body>
</html>

6. slice() 메서드
 
- 기존 배열을 바꾸지 않으면서 요소를 꺼냄
-pop(), shift() 메서드와 차이점
 : 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고, 실행결과와 기존 배열이 바뀌지 않음
- 인수 1개 사용
 : slice(시작 인덱스)
 : 지정한 요소부터 마지막 요소까지 꺼내서 반환
 
- slice()메서드의 인수가 1개인 경우 요소 꺼내기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>slice()메서드의 인수가 1개인 경우 요소 꺼내기</title>
  <style>
   
  </style>
</head>
<body>
  <script>
  var colors = ["red","green","blue","white","black"];
  var colors2 = colors.slice(2); //인덱스 값이 2인 요소부터 마지막 요소까지 꺼내기
  document.write("꺼낸 요소:" + colors2);
  document.write("<br>");
  document.write("변경되지 않은 배열:" + colors); //변경되지 않은 배열
  </script>
</body>
</html>

- 인수 2개 사용
 :slice(시작인덱스, 끝 인덱스의 바로 직전 인덱스)
 :slice(2,4)
  -> 배열의 인덱스 2부터 시작하여 인덱스 4의 직전 인덱스 까지 꺼냄
  -> 즉, 인덱스값이 2부터 3까지의 요소를 꺼냄 
  -> 꺼낸 요소를 반환
 
- slice()메서드의 인수가 2개인 경우 요소 꺼내기 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>slice()메서드의 인수가 2개인 경우 요소 꺼내기</title>
  <style>
   
  </style>
</head>
<body>
  <script>
  var colors = ["red","green","blue","white","black"];
  var colors3 = colors.slice(2,4); //인덱스값이 2부터 3인 요소까지 꺼내기
  document.write(colors3);
  </script>
</body>
</html>

7. splice()와 slice() 메서드의 공통점과 차이점
 
- 공통점 : 배열에서 특정 위치의 요소를 활용함
- 차이점 
  :splice() 메서드는 요소를 추가, 삭제하면 기존 배열 자체가 수정됨
   slice()메서드  -> 기존 배열에서 꺼낸 요소로 새로운 배열을 만들어서 사용
   splice() -> 기존 배열의 일부 요소만 삭제하기

'JavaScript' 카테고리의 다른 글

16장 실습 2  (0) 2023.04.11
16장 실습  (0) 2023.04.11
16장 예제 - Array 객체 (1)  (0) 2023.04.11
16장 예제 - Date 객체 인스턴스 만들기/ 로컬 형식으로 현재 시각 표시하기  (0) 2023.04.11
15장 마무리 문제 2  (0) 2023.04.08

'JavaScript' Related Articles

티스토리툴바