목차
원본 배열 수정하는 메서드
push
배열의 끝에 하나 이상의 요소를 추가
const originalArray = [1, 2, 3];
originalArray.push(4, 5);
console.log(originalArray); // [1, 2, 3, 4, 5]
pop
배열의 마지막 요소를 제거하고 해당 요소를 반환
const originalArray = [1, 2, 3];
const removedElement = originalArray.pop(); // 3
console.log(removedElement); // 3
console.log(originalArray); // [1, 2]
unshift
배열의 시작 부분에 하나 이상의 요소를 추가
const originalArray = [2, 3];
originalArray.unshift(1);
console.log(originalArray); // [1, 2, 3]
shift
배열의 첫 번째 요소를 제거하고 해당 요소를 반환
const originalArray = [1, 2, 3];
const removedElement = originalArray.shift();
console.log(removedElement); // 1
console.log(originalArray); // [2, 3]
splice
배열에서 요소를 제거하거나 새로운 요소를 삽입하여 배열을 수정
array.splice(start[, deleteCount[, addItem1[, addItem2[, ...]]]])
- start : 배열의 변경을 시작할 인덱스
- 음수인 경우 배열의 끝에서부터 요소를 세어나감
- deleteCount : 배열에서 제거할 요소의 수
- 0 이하라면 어떤 요소도 제거하지 않음
- addItem : 배열에 추가할 요소
- 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 함
const originalArray = [1, 2, 3, 4, 5];
originalArray.splice(1, 2); // [2, 3] 제거
console.log(originalArray); // [1, 4, 5]
originalArray.splice(1, 0, 6, 7); // 인덱스 1에 6과 7 삽입
console.log(originalArray); // [1, 6, 7, 4, 5]
reverse
배열의 요소 순서를 역순으로 변경
const originalArray = [1, 3, 2, 4];
originalArray.reverse();
console.log(originalArray); // [4, 2, 3, 1]
sort
배열의 요소를 정렬
- 기본적으로는 문자열로 변환하여 정렬 (참고 사이트)
- 비교 함수를 제공하여 사용자 정의 정렬 기준을 설정
const originalArray = [3, 1, 2];
originalArray.sort((a, b) => a - b);
console.log(originalArray); // [1, 2, 3] # 오름차순 정렬하기
originalArray.sort((a, b) => b - a);
console.log(originalArray); // [3, 2, 1] # 내림차순 정렬하기
원본 배열의 일부를 복사하여 새로운 배열을 반환하는 메서드
원본 배열은 변경되지 않는다.
slice
원본 배열의 일부를 추출하여 새 배열을 반환
arr.slice([begin[, end]])
- begin : 시작점에 대한 인덱스
- 음수인 경우 배열의 끝에서부터 길이를 나타냄
- undefined인 경우에는, 0번 인덱스부터 시작
- 배열의 길이보다 큰 경우에는, 빈 배열을 반환
- end : 종료점에 대한 인덱스
- end 인덱스를 제외하고 추출
- 음수 인덱스는 배열의 끝에서부터의 길이를 나타냄
- end가 생략되면 배열의 끝까지 추출
const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.slice(1, 4);
console.log(newArray); // [2, 3, 4]
console.log(originalArray); // [1, 2, 3, 4, 5]
concat
두 개 이상의 배열을 결합하여 새로운 배열을 반환
const array1 = [1, 2];
const array2 = [3, 4];
const newArray = array1.concat(array2);
console.log(newArray); // [1, 2, 3, 4]
console.log(array1); // [1, 2]
console.log(array2); // [3, 4]
filter
조건에 따라 원본 배열의 일부 요소를 선택하여 새로운 배열을 반환
const originalArray = [1, 2, 3, 4, 5];
const filteredArray = originalArray.filter(item => item > 2);
console.log(newArray); // [3, 4, 5]
console.log(originalArray); // [1, 2, 3, 4, 5]
map
원본 배열의 각 요소를 변환하여 새로운 배열을 생성
const originalArray = [1, 2, 3];
const newArray = originalArray.map(item => item * 2);
console.log(newArray); // [2, 4, 6]
console.log(originalArray); // [1, 2, 3]
참고 사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
반응형
'JavaScript' 카테고리의 다른 글
JavaScript fetch와 axios 사용법 (0) | 2023.08.22 |
---|---|
JavaScript 비동기 처리 (0) | 2023.08.17 |
마우스 이벤트(client, page, offset, screen)의 차이점 (0) | 2023.04.07 |
반복문 (0) | 2020.07.20 |
연산자 (0) | 2020.06.17 |