자바스크립트 기본!(객체2, Array 객체, Array 메서드..) - Java Script

2022.12.16 - [JAVA SCRIPT] - 자바스크립트 기본!(객체 등..) - Java Script

자바스크립트 기본!(객체 등..) - Java Script

이전글과 이어집니다.

 

내장객체 - Array 객체

 

배열 만들기)

초기값이 없는 경우

자바 = int[] arr = new int[3];
자바스크립트 = var arr = new Array(3);

 

초기값이 있는 경우

var numbers = ["one", "two", "three", "four"];			//배열선언
var numbers = Array("one", "two", "three", "four");		//Array 객체를 사용한 배열 선언

---

배열의 크기 - Array 객체의 length 프로퍼티

 

다음과 같은 코드를 for 문을 이용해서 표현할수도 있습니다

  <script>
    var numbers = ["one", "two", "three", "four"];

    document.write("<p>" + numbers[0] + "</p>")
    document.write("<p>" + numbers[1] + "</p>")
    document.write("<p>" + numbers[2] + "</p>")
    document.write("<p>" + numbers[3] + "</p>")
  </script>

이코드는 다음과도 같습니다

    var numbers = ["one", "two", "three", "four"];

    for(i = 0; i<numbers.length; i++){

      document.write("<p>" + numbers[i] + "</p>");
    }

짧고 간단하지용?

 

---

Array 객체의 메서드

종류	설명
concat	기존 배열에 요소를 추가해 새로운 배열을 만듭니다.
every	배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
filter	배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듭니다.
forEach	배열의 모든 요소에 대해 주어진 함수를 실행합니다
indexOf	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾습니다.
join	배열 요소를 문자열로 합칩니다. 이때 구분자를 지정할 수 있습니다.
push	배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환합니다.
unshift	배열의 시작 부분에 새로운 요소를 추가합니다.
pop	배열의 마지막 요소를 꺼내 그 값을 결과로 반환합니다.
shift	배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환합니다.
splice	배열에 요소를 추가하거나 삭제합니다.
slice	배열에서 특정한 부분만 잘라냅니다.
reverse	배열의 배치순서를 역순으로 바꿉니다.
sort	배열 요소를 지정한 조건에 따라 정렬합니다.
toString	배열에서 지정한 부분을 문자열로 반환합니다. 이때 각 요소는 쉼표(,)로 구분합니다.

 

---

'배열' 끼리 합치는 concat( ) 메서드

서로 다른 배열 2개를 합쳐서 새로운 배열을 만듭니다.
기존 배열에 영향을 주지않습니다.
새로운 변수를 생성해서 지정해줍니다.

이렇게 예를 들수 있습니다.

 

  <script>

    var nums = [1, 2, 3];
    var chars = ["a", "b", "c", "d"];

    var numChars = nums.concat(chars);
        //nums에 chars를 합치기
    var charsNums = chars.concat(nums);
        //chars에 nums를 합치기

    document.write(nums + "<br>");
    document.write(chars + "<br>");
    document.write(numChars + "<br>");
    document.write(charsNums + "<br>");

  </script>

출력 결과

1,2,3 a,b,c,d 1,2,3,a,b,c,d a,b,c,d,1,2,3

---

 

'배열 요소' 끼리 합치는 join( ) 메서드

배열 요소를 연결해서 하나의 문자열로 만듭니다.
요소사이에 원하는 구분자를 넣을수 있습니다.
구분자를 지정하지 않으면 쉼표(,)로 구분합니다.
String형으로 받아오게 됩니다.

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);

출력 결과

구분자 없이 : 1,2,3 '/' 구분자 지정: a/b/c/d

---

새로운 요소를 추가하는 push( ), unshift( ) 메서드

push() 메서드 : 배열 맨 끝에 요소 추가
unshift() 메서드 : 배열 맨 앞에 요소 추가
배열의 길잇값 반환, 기존 배열이 바뀝니다.

  var nums = [1,2,3];
  var chars = ["a", "b", "c", "d"];

//요소 추가 : push(), unshift()

var ret1 = nums.push(4, 5);
document.write("length: ", ret1, " | 배열: ", nums + "<br>");

출력 결과

length: 5 | 배열: 1,2,3,4,5

  <script>
  var nums = [1,2,3];
  var chars = ["a", "b", "c", "d"];

    var ret2 = nums.unshift(0);
    document.write("length : ", ret2, " | 배열 : ", nums + "<br>");

</script>

출력 결과

length : 4 | 배열 : 0,1,2,3

 

---

배열에서 요소를 꺼내는 pop( ), shift( ) 메서드

pop( ) 메서드 : 배열 뒤쪽에서 요소를 꺼냅니다.
shift( ) 메서드 : 배열 앞쪽에서 요소를 꺼냅니다.
꺼낸 요소를 반환, 기존 배열을 꺼낸 요소가 빠진 상태로 바뀝니다.

 

<script>
  var nums = [1,2,3];
  var chars = ["a", "b", "c", "d"];

  var popped1 = chars.pop();    // pop으로 배열의 맨 뒤 값을 추출
  document.write("꺼낸 요소 : ", popped1, " | 배열: ", chars + "<br>");

  var popped2 = chars.shift();  // shift로 배열의 맨 앞쪽 값을 추출
  document.write("꺼낸 요소 : ", popped2, " | 배열: ", chars + "<br>");
</script>

출력 결과

꺼낸 요소 : d | 배열: a,b,c 꺼낸 요소 : a | 배열: b,c

 

---

 

중간에 요소를 추가하거나 삭제하는 splice( ) 메서드

// 잘라내기와 같다...

배열 중간에 2개 이상의 요소를 추가하거나 삭제할 수 있습니다
새로운 배열이 결괏값으로 반환됩니다.

1) 괄호안에 인수가 1개 있는 경우

  인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소 까지 삭제합니다.

  <script>
    // 인수가 1개인 경우 : 요소 삭제하기
    var numbers = [1,2,3,4,5];
    var newNumbers = numbers.splice(2);
    		// numbers[2] 부터 끝까지 잘라내기가 되었다!
    document.write("<h3>splice 인수 1개</h3>")
    document.write("반환된 배열 : " + newNumbers + "<br>");
    document.write("변경된 배열 : " + numbers + "<br>");
  </script>

출력 결과

splice 인수 1개 반환된 배열 : 3,4,5 변경된 배열 : 1,2

 

2) 괄호 안에 인수가 2개 있는 경우

첫번째 인수는 인덱스 값이고 두번째 인수근 삭제할 요소의 개수
메서드를 실행한 후에는 삭제한 요소를 반환하고, 
기존 배열은 나머지 요소만 남습니다.

 

  <script>
    //인수가 2개인 경우
    // 첫번째 인수 : 스타트지점, 두번째 인수 : 잘라낼 개수
    var study = ["html", "css", "web", "jquery"];
    var newStudy = study.splice(2,1);
    
    document.write("<h3> splice 인수 2개</h3>");
    document.write("반환된 배열 : " + newStudy + "<br>");
    document.write("변경된 배열 : " + study + "<br>");

  </script>

 

출력결과

splice 인수 2개 반환된 배열 : web 변경된 배열 : html,css,jquery

 

3) 괄호 안에 인수가 3개 이상일 경우

첫번째 인수는 배열에서 삭제할 시작위치
두번째 인수는 삭제할 개수
세번째 인수는 추가할 요소

  <script>
    //인수가 2개인 경우
    // 첫번째 인수 : 스타트지점, 두번째 인수 : 잘라낼 개수
    var study = ["html", "css", "web", "jquery"];
    var newStudy = study.splice(2,1);
    
    document.write("<h3> splice 인수 2개</h3>");
    document.write("반환된 배열 : " + newStudy + "<br>");
    document.write("변경된 배열 : " + study + "<br>");

  </script>

 

출력 결과

splice 인수 3개 반환된 배열 : web 변경된 배열 : html,css,js,jquery

 

---

기존 배열을 바꾸지 않으면서 삭제하는 slice( ) 메서드

요소를 여러 개 꺼낼수 있습니다.
요소를 삭제한 후에도 기존 배열이 바뀌지 않습니다.

 

1) 괄호안에 인수가 1개인 경우

인수가 지정한 인덱스의 요소부터 마지막 요소 까지 꺼내서 반환합니다.

  <script>
    //기존 배열에 영향을 끼치지 않고 요소 가져오기 - slice()
    var colors = ["red", "green", "blue", "white", "black"];
    var colors2 = colors.slice(2);  // color[2]부터 끝까지 내용만 가져오기

    document.write("<h3>slice 인수 1개 - 내용만 가져오기</h3>");
    document.write(colors2 + "<br>");
    document.write(colors + "<br>");

  </script>

출력 결과

slice 인수 1개 - 내용만 가져오기 blue,white,black red,green,blue,white,black

 

2) 괄호 안에 인수가 2개일 경우

첫번째 인수는 시작 인덱스, 두번째 인수는 끝 인덱스의 직전인덱스를 지정

  <script>
    //slice 인수 2개 - 시작지점, 끝지점(끝의 전지점을 가져옴)
    var colors = ["red", "green", "blue", "white", "black"];
    var colors2 = colors.slice(2, 4);  // color[2]부터 끝까지 내용만 가져오기

    document.write("<h3>slice 인수 2개 - 내용만 가져오기</h3>");
    document.write(colors2 + "<br>");
    document.write(colors + "<br>");

  </script>

출력 결과

slice 인수 2개 - 내용만 가져오기 blue,white red,green,blue,white,black

 

 

---

 

배열 요소를 지정한 조건에 따라 정렬하는 sort( )

 

    var colors = [5,3,4,2,7];

    var colors3 = colors.sort();
    //아무값도 지정하지 않을경우 오름차순을 정렬합니다.

    document.write(colors3);

  </script>

출력 결과

2,3,4,5,7

다양한 예시를 들어 보겠습니다.

    <script>
    var number = [5,3,4,2,7];

    // sort를 이용한 내림차순 표현
    number.sort(function(a,b) {
      if(a>b) return -1;    //자리 유지
      if(a===b) return 0;   //자리 유지
      if(a<b) return 1;     //자리 변경
    });
    document.write(number + "<br><br>");

    // sort를 이용한 오름차순 표현
    var number2 = [5,3,4,2,7]

    number2.sort(function(a,b){
      return a-b;	
      // a에서 b를 뺐을때 양수일 경우 자리를 변경한다는 뜻
    });
    document.write(number2 + "<br><br>");

    //sort를 이용한 간단 함수 이용법
    var number3 = [5,3,4,2,7]

    number3.sort(function(a,b){
      return b - a;
      // b에서 a를 뺐을때 양수일경우 자리를 변경한다는 뜻
    })
    document.write(number3 + "<br><br>");

  </script>

 

출력 결과

7,5,4,3,2 2,3,4,5,7 7,5,4,3,2