본문 바로가기
Today I learned!/오늘 하루 배운 것, 기억할 것

기존 배열을 수정하는 메서드와 새로운 배열을 반환하는 메서드

by sweesweet 2022. 5. 10.

220510( Js, 배열)

 

배열메서드 중 기존의 배열을 수정하는 메서드 정리(헷갈려서)

고차함수는 제외함

 

기존의 배열을 수정하는 메서드

1. pop(), push()

   pop() - 배열의 맨 뒤의 요소를 제거. 매개변수 필요x 제거된 요소를 반환

   push(추가할 요소) - 맨 뒤에 다른 요소를 추가  추가할 요소를 매개변수로 받음  배열의 새로운 길이를 반환

2. unshift(), shift()

   shift() - 배열의 맨 앞의 요소를 제거. 매개변수 필요x 제거된 요소를 반환

   unshift(추가할 요소) -맨 앞에 다른 요소를 추가  추가할 요소를 매개변수로 받음  배열의 새로운 길이를 반환

3. splice() 

   splice() - 배열의 기존 요소를 삭제 or 교체// 삭제, 교체 없이 배열의 내용을 변경

   splice(변경or삭제할 요소의 인덱스, 몇 개를 삭제할건지 그 갯수, 인덱스 위치에서 추가할 요소)

   삭제된(or 교체된)부분이 배열로 반환

let arr = [1,2,3,4,5]
arr.splice(0,1,3) // 인덱스 0의 위치에서 1개의 요소 삭제, 그위치(인덱스 0)에서 3추가
console.log(arr) //[3, 2, 3, 4, 5]
arr.splice(0,1) //인덱스0의 위치에서 1개의 요소 삭제
console.log(arr) // [2, 3, 4, 5]
arr.splice(0,0,5) // 인덱스 0의 위치에서 0개의 요소 삭제(=>변경없음), 그 위치에서 5추가
console.log(arr) //[5, 2, 3, 4, 5]

4. sort(), reverse()

sort() - 기존의 배열을 정렬함(기존 배열 수정됨)

reverse() - 기존의 배열을 반대로(내림차순) 정렬함(기존 배열 수정)

 

기존의 배열을 수정하지 않고 새로운 배열을 반환하는 메서드

1. concat()

기존의 배열에 인자로 받은 배열(값)을 합쳐 새로운 배열 반환

let array1 =[2,3,4,5,6]
let array2 =[7,8,9,10,11]
let array3= array1.concat(array2) //기존의 array1에 array2를 추가한 새로운 배열 반환
console.log(array3) //[2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
console.log(array3.concat(12)) //2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

2. slice()

기존의 배열의 시작 인덱스 부터 종료 인덱스 이전까지의 새로운 배열 반환(얕은 복사)

let array = [0,1,2,3,4,5,6,7,8,9]
// 시작 번호만 입력시
console.log(array.slice(2))// 2번째 인덱스 부터 끝까지 [2, 3, 4, 5, 6, 7, 8, 9]
// 시작번호만 입력시 (음수값)
console.log(array.slice(-2))// 뒤에서 2번째부터 끝까지 [8, 9]

// 시작번호, 끝번호 입력
console.log(array.slice(0,3))// 0번째 인덱스 부터 2번째까지 [0, 1, 2]
//끝번호가 음수일 때
console.log(array.slice(3,-2)) // 3번째 인덱스 부터 뒤에서 2번째 인덱스 이전까지 [3, 4, 5, 6, 7]

 

음수일 때를 주의해야 함!!

 

https://doesitmutate.xyz/<- 참고하기 코드스테이츠에서 알려줌

 

Does it mutate?

The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] )

doesitmutate.xyz

 

'Today I learned! > 오늘 하루 배운 것, 기억할 것' 카테고리의 다른 글

220622  (0) 2022.06.22
자바스크립트에서 빈 배열인 변수와 []가 비교가 안되는 이유  (0) 2022.05.10
220428(html,css,js)  (0) 2022.04.28
220412(잡다)  (0) 2022.04.12
220411(css)  (0) 2022.04.11