Array.prototype.toSpliced()

Baseline 2023

Newly available

Since July 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

ArraytoSpliced() 메서드는 splice()에 대응되는 복사 메서드입니다. 이 메서드는 주어진 인덱스에서 일부 요소가 제거되거나 교체된 새로운 배열을 반환합니다.

구문

js
toSpliced(start)
toSpliced(start, deleteCount)
toSpliced(start, deleteCount, item1)
toSpliced(start, deleteCount, item1, item2)
toSpliced(start, deleteCount, item1, item2, /* …, */ itemN)

매개변수

start

배열은 0부터 시작하는 인덱스로 변경되며, 정수로 변환됩니다..

  • 음수 인덱스는 배열의 끝에서부터 카운트됩니다. 만약 start < 0 인 경우, start + array.length가 적용됩니다.
  • start < -array.length이거나 start가 생략된 경우, 0이 적용됩니다.
  • start >= array.length인 경우 요소는 삭제되지 않지만, 메서드는 요소를 추가하는 추가 함수처럼 작동합니다.
deleteCount Optional

start에서부터 제거할 배열의 요소의 개수를 나타내는 수입니다.

만약 deleteCount가 생략되거나, deleteCountstart 인덱스 뒤의 요소의 개수보다 크거나 같으면 배열의 시작부터 끝까지 모든 요소가 삭제됩니다. 그러나 itemN 매개변수를 전달하려면 InfinitydeleteCount로 전달하여 start 인덱스 뒤의 모든 요소를 삭제해야 합니다. 왜냐하면 undefined는 0으로 변환되기 때문입니다.

deleteCount0이거나 음수라면, 요소가 제거되지 않습니다. 이 경우 새 요소를 하나 이상 지정해야 합니다. (아래 참조).

item1, …, itemN Optional

start 부터 시작하여 배열에 추가할 요소입니다.

만약 명확한 요소를 지정하지 않으면, toSpliced()는 배열에서 요소만 제거합니다.

반환 값

start 전의 모든 요소, item1, item2, …, itemNstart + deleteCount 이후 모든 요소로 구성된 새로운 배열입니다.

설명

splice()와 비슷한 toSpliced()메서드는 여러 작업을 한 번에 수행합니다. 지정한 인덱스에서 시작하여 배열에서 지정한 수의 요소를 제거한 다음 동일한 인덱스에 지정된 요소를 삽입합니다. 그러나 원래 배열을 수정하는 대신 새로운 배열을 반환합니다. 따라서 삭제된 요소는 이 메서드에서 반환되지 않습니다.

toSpliced() 메서드는 절대 희소 배열을 생성하지 않습니다. 만약 배열이 비어있다면 빈 슬롯은 새로운 배열에서 undefined로 대체됩니다.

toSpliced()메서드는 제네릭입니다. this값에는 length속성과 정수 키 속성만 있을 것으로 예상합니다.

예시

요소의 삭제, 추가 및 교체하기

toSpliced()를 사용하면 배열의 요소를 삭제, 추가 및 교체할 수 있으며, slice()concat()를 사용하는 것 보다 더 효율적으로 새 배열을 만들 수 있습니다.

js
const months = ["Jan", "Mar", "Apr", "May"];

// 인덱스 1에 요소 추가
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]

// 인덱스 2부터 2개의 요소 삭제
const months3 = months2.toSpliced(2, 2);
console.log(months3); // ["Jan", "Feb", "May"]

// 인덱스 1의 한 요소를 두 개의 새로운 요소로 교체
const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
console.log(months4); // ["Jan", "Feb", "Mar", "May"]

// 원래 배열은 수정되지 않음
console.log(months); // ["Jan", "Mar", "Apr", "May"]

희소 배열에서 toSpliced() 사용하기

toSpliced()메서드는 항상 밀집 배열을 생성합니다.

js
const arr = [1, , 3, 4, , 6];
console.log(arr.toSpliced(1, 2)); // [1, 4, undefined, 6]

배열이 아닌 객체에서 toSpliced() 호출하기

toSpliced()메서드는 this속성의 length를 읽습니다. 그런 다음 필요한 정수 키 속성을 읽고 이를 새로운 배열에 작성합니다.

js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.toSpliced.call(arrayLike, 0, 1, 2, 3));
// [2, 3, undefined, 4]

명세서

Specification
ECMAScript Language Specification
# sec-array.prototype.tospliced

브라우저 호환성

BCD tables only load in the browser

같이 보기