eterno

[JavaScript] 배열 객체 메서드(reverse(), sort(), splice(), pop(), shift(), push(), unshift(), join(), slice(), concat(), toString()) 본문

JavaScript/공부

[JavaScript] 배열 객체 메서드(reverse(), sort(), splice(), pop(), shift(), push(), unshift(), join(), slice(), concat(), toString())

영원한별똥별 2023. 3. 5. 13:09
728x90
반응형

 

배열객체에서 사용할 수 있는 메서드

* 원본 배열을 변경하는 메서드(메서드를 사용한 후에 원본을 출력하면 변환된 값으로 출력됨)

 : reverse(), sort(), splice(), pop(), shift(), push(), unshift() 

 

* 원본배열을 변경하지 않고 참조하는 메서드

 : join(), slice(), concat(), toString()

 

원본 배열을 변경하는 메서드

 

resverse()

 : 배열 객체의 순서를 거꾸로 바꾼 후 반환

var arr = [1, 2, 3, 4];
document.write(arr); //1,2,3,4
document.write("<br>"); //한줄띄어쓰기
document.write(arr.reverse()); // 결과 : 4,3,2,1

* resverse() 메서드는 배열 원본 자체가 변경되기때문에 다시 arr()를 출력해도 4,3,2,1로 출력 됩니다.

 

sort()

 : 배열 오름차순 정렬

var arr = [1, 2, 5, 0, 3, 4 ];
document.write(arr.sort()); //결과 : 0,1,2,3,4,5

splice()

 : 인덱스 구간을 지정하고 해당 구간에 새로운 데이터 삽입

var arr = [1, 2, 3, 4 ];

//2번째 인덱스에서 2개의 값을 지우고 9, 8 을 추가
document.write(arr.splice(2, 2, "9", "8")); // 결과 : 3, 4
document.write("<br>");
document.write(arr); // 결과 : 1,2,9,8

 * arr.splice()에서는 내가 지울 인덱스의 값이 출력되고 실제로 적용된 데이터는 arr에 담겨있습니다.

 

pop()

 : 배열의 마지막 요소 반환

var arr = [1, 2, 3, 4 ];
document.write(arr.pop()); // 결과 : 4

 

shift()

 : 배열의 첫번째 요소 반환

var arr = [1, 2, 3, 4 ];
document.write(arr.shift()); //결과 : 1

 

push()

 : 배열의 마지막에 새로운 인덱스 추가

var arr = [1, 2, 3, 4 ];
document.write(arr.push("5")); // 결과 : 5
document.write("<br>");
document.write(arr); // 결과 : 1,2,3,4,5

* push()의 결과 값은 배열의 길이(length)가 반환됩니다.

 

unshift()

 : 배열의 첫번쨰에 새로운 인덱스 추가

var arr = [1, 2, 3, 4 ];
document.write(arr.unshift(5)); // 결과 : 5
document.write("<br>");
document.write(arr); : 결과 : 5,1,2,3,4

 

원본배열을 변경하지 않고 참조하는 메서드

join()

 : 배열 사이에 문자열을 추가하여 반환

var arr = [1, 2, 3, 4];
document.write(arr.join("-"));

//결과 : 1-2-3-4

slice(index1, index2)

 : 배열 객체 에서 원하는 인덱스 데이터를 반환

var arr = [1, 2, 3, 4 ];

// 첫번째 인덱스에서 세번째 인덱스 이전값 반환(-> 1, 2번째 인덱스 요소 반환)
document.write(arr.slice(1, 3)); // 결과 : 2,3

//두번째 인덱스부터 마지막 인덱스까지 반환
document.write(arr.slice(2)); // 결과 : 3,4

concat()

 : 배열 요소를 결합

var arr = [1, 2, 3, 4 ];

//배열 + 문자열
document.write(arr.concat("5"));
document.write("<br>");

//배열 + 배열
document.write(arr.concat([5, 6, 7]));
document.write("<br>");

//배열 + 문자열 + 배열
document.write(arr.concat("5", [6, 7]));

 

toString()

 : 배열을 하나의 문자열로 반환

var arr = [1, 2, 3, 4 ];
document.write(arr); // 결과 : 1,2,3,4
document.write(typeof(arr)); //결과 : object
document.write("<br>");
document.write(arr.toString()); // 결과 : 1,2,3,4
document.write(typeof(arr.toString())); // 결과 : string

* typeof() 메서드는 객체의 데이터타입을 반환해주는 메서드

 

참고) http://www.tcpschool.com/javascript/js_standard_arrayMethod

         Doit! 자바스크립트 + 제이쿼리입문

728x90
반응형