Array APIs - splice(), slice(), concat()
2022. 10. 5. 00:11ㆍJavascript
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
반응형
splice : 삭제한 배열을 반환하고 기존의 배열을 업데이트함
splice(start: number, deleteCount?: number): T[];
/**
* Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
* @param start The zero-based location in the array from which to start removing elements.
* @param deleteCount The number of elements to remove.
* @returns An array containing the elements that were deleted.
*/
splice(start: number, deleteCount: number, ...items: T[]): T[];
/**
* Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
* @param start The zero-based location in the array from which to start removing elements.
* @param deleteCount The number of elements to remove.
* @param items Elements to insert into the array in place of the deleted elements.
* @returns An array containing the elements that were deleted.
*/
//배열 요소들 중간에 삭제 및 추가
const fruits = ['🍌', '🍉', '🍇', '🍓'];
const newArr = fruits.splice(1); //인덱스 1부터 시작해서 뒤에 모든 요소들 삭제하고 그 요소들을 리턴
console.log(fruits); //['🍌'], 기존의 배열을 업데이트 함
console.log(newArr); //['🍉', '🍇', '🍓'], 삭제한 요소들
const fruits2 = ['🍌', '🍉', '🍇', '🍓'];
const newArr2 = fruits2.splice(1, 2); //인덱스 1부터 시작해서 뒤로 2개만 삭제
console.log(fruits2); //['🍌', '🍓'], 기존의 배열을 업데이트 함
console.log(newArr2); //['🍉', '🍇'], 삭제한 요소들
const fruits3 = ['🍌', '🍉', '🍇', '🍓'];
const newArr3 = fruits3.splice(1, 2, '🍑','🥝'); //삭제하고 원하는 요소들 추가
console.log(fruits3); //['🍌', '🍑', '🥝', '🍓'], 기존의 배열을 업데이트 함
console.log(newArr3); //['🍉', '🍇'], 삭제한 요소들
const fruits4 = ['🍌', '🍉', '🍇', '🍓'];
const newArr4 = fruits4.splice(1, 0, '🍓','🥝'); //삭제하지 않고 원하는 요소들 추가
console.log(fruits4); //['🍌', '🍓', '🥝', '🍉', '🍇', '🍓'], 기존의 배열을 업데이트 함
console.log(newArr4); //[], 삭제한 요소가 없음
slice : 기존의 배열은 유지하고, 잘라진 새로운 배열을 반환
slice(start?: number, end?: number): T[];
/**
* Returns a copy of a section of an array.
* For both start and end, a negative index can be used to indicate an offset from the end of the array.
* For example, -2 refers to the second to last element of the array.
* @param start The beginning index of the specified portion of the array.
* If start is undefined, then the slice begins at index 0.
* @param end The end index of the specified portion of the array. This is exclusive of the element at the index 'end'.
* If end is undefined, then the slice extends to the end of the array.
*/
//기존 배열은 유지하고, 잘라진 새로운 배열을 리턴
const fruits = ['🍎', '🍐', '🍊', '🍋'];
let newArr = fruits.slice(0, 2); //인덱스 0부터 시작해서 인덱스 2 이전까지(인덱스 2 요소는 불포함) 리턴
console.log(fruits); //['🍎', '🍐', '🍊', '🍋']
console.log(newArr); //['🍎', '🍐']
let newArr2 = fruits.slice(); //인덱스 0부터 끝까지, 배열 전체를 리턴
console.log(newArr2); //['🍎', '🍐', '🍊', '🍋']
let newArr3 = fruits.slice(1); //인덱스 1부터 끝까지 리턴
console.log(newArr3); //['🍐', '🍊', '🍋']
let newArr4 = fruits.slice(-1); //뒤에서 하나의 요소만 slice
console.log(newArr4); //['🍋']
concat : 여러 개의 배열을 합쳐서 새로운 배열을 반환
concat(...items: ConcatArray<T>[]): T[];
/**
* Combines two or more arrays.
* This method returns a new array without modifying any existing arrays.
* @param items Additional arrays and/or items to add to the end of the array.
*/
concat(...items: (T | ConcatArray<T>)[]): T[];
/**
* Combines two or more arrays.
* This method returns a new array without modifying any existing arrays.
* @param items Additional arrays and/or items to add to the end of the array.
*/
//여러개의 배열을 합쳐줌
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = arr1.concat(arr2);
console.log(newArr); //[1, 2, 3, 4, 5, 6]
반응형
'Javascript' 카테고리의 다른 글
Array APIs - join(), split() (0) | 2022.10.06 |
---|---|
Array APIs - indexOf(), lastIndexOf(), includes() (1) | 2022.10.05 |
Array APIs - push(), pop(), unshift(), shift() (0) | 2022.10.03 |
Array APIs - forEach() (0) | 2022.10.02 |
현재 스크롤Y값 구하기 (0) | 2022.09.28 |