[javascript] 특정 인덱스 (JavaScript)에서 배열에 항목을 삽입하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

다음과 같은 스타일의 JavaScript 배열 삽입 방법을 찾고 있습니다.

arr.insert(index, item)

가급적 jQuery에서는 모든 JavaScript 구현이이 시점에서 수행됩니다.

답변

원하는 것은 splice기본 배열 객체 의 함수입니다.

arr.splice(index, 0, item);삽입합니다 item으로 arr지정된 인덱스 (삭제 0첫 번째 항목, 즉, 그냥 삽입입니다).

이 예에서는 배열을 만들고 요소를 인덱스 2에 추가합니다.

var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";

console.log(arr.join());
arr.splice(2, 0, "Lene");
console.log(arr.join());

스 니펫 확장

답변

다음을 수행하여 Array.insert메소드를 구현할 수 있습니다 .

Array.prototype.insert = function ( index, item ) {
    this.splice( index, 0, item );
};

그런 다음 다음과 같이 사용할 수 있습니다.

var arr = [ 'A', 'B', 'D', 'E' ];
arr.insert(2, 'C');

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]

답변

스플 라이스 이외의 방법으로이 방법을 사용하면 원래 배열을 변경하지 않지만 추가 된 항목으로 새 배열을 만들 수 있습니다. 가능하면 항상 돌연변이를 피해야합니다. 여기에 ES6 스프레드 연산자를 사용하고 있습니다.

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, newItem) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted item
  newItem,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10)

console.log(result)
// [1, 10, 2, 3, 4, 5]

스 니펫 확장

이것은 새로운 아이템에 나머지 연산자를 사용하기 위해 함수를 약간 조정하여 하나 이상의 아이템을 추가하는 데 사용될 수 있으며, 그 결과를 반환 된 결과로도 확산시킬 수 있습니다

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, ...newItems) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted items
  ...newItems,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10, 20)

console.log(result)
// [1, 10, 20, 2, 3, 4, 5]

스 니펫 확장

답변

커스텀 배열 insert메소드

1. 여러 개의 인수와 연결 지원

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    this.splice.apply(this, [index, 0].concat(
        Array.prototype.slice.call(arguments, 1)));
    return this;
};

네이티브처럼 여러 요소를 삽입 splice하고 체인을 지원합니다.

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);
// ["b", "X", "Y", "Z", "c"]

2. 배열 유형 인수 병합 및 체인 지원

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    index = Math.min(index, this.length);
    arguments.length > 1
        && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
        && this.insert.apply(this, arguments);
    return this;
};

주어진 배열과 인수의 배열을 병합 할 수 있으며 연결을 지원합니다.

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");
// "a-b-V-W-X-Y-Z-c-d"

데모 : http://jsfiddle.net/UPphH/

답변

한 번에 여러 요소를 배열에 삽입하려면이 스택 오버플로 답변을 확인하십시오. 자바 배열에서 배열을 배열에 결합하는 더 좋은 방법

다음은 두 예제를 모두 설명하는 함수입니다.

function insertAt(array, index) {
    var arrayToInsert = Array.prototype.splice.apply(arguments, [2]);
    return insertArrayAt(array, index, arrayToInsert);
}

function insertArrayAt(array, index, arrayToInsert) {
    Array.prototype.splice.apply(array, [index, 0].concat(arrayToInsert));
    return array;
}

마지막으로 여기 jsFiddle이 있으므로 직접 볼 수 있습니다. http://jsfiddle.net/luisperezphd/Wc8aS/

그리고 이것은 당신이 기능을 사용하는 방법입니다 :

// if you want to insert specific values whether constants or variables:
insertAt(arr, 1, "x", "y", "z");

// OR if you have an array:
var arrToInsert = ["x", "y", "z"];
insertArrayAt(arr, 1, arrToInsert);

답변

적절한 기능적 프로그래밍과 체이닝 목적을 Array.prototype.insert()위해서는 발명 이 필수적입니다. 실제로 의미없는 빈 배열 대신 돌연변이 배열을 반환하면 실제로 스플 라이스가 완벽했을 수 있습니다. 그래서 여기에 간다

Array.prototype.insert = function(i,...rest){
  this.splice(i,0,...rest)
  return this
}

var a = [3,4,8,9];
document.write("<pre>" + JSON.stringify(a.insert(2,5,6,7)) + "</pre>");

스 니펫 확장

글쎄, 위의 내용 Array.prototype.splice()은 원래 배열을 변경하고 일부는 “귀하의 것이 아닌 것을 수정해서는 안됩니다”와 같은 불평을 할 수 있으며 그 결과도 옳을 수 있습니다. 따라서 공공 복지를 위해 Array.prototype.insert()원래 배열을 변경하지 않는 다른 것을 제공하고 싶습니다 . 여기 간다;

Array.prototype.insert = function(i,...rest){
  return this.slice(0,i).concat(rest,this.slice(i));
}

var a = [3,4,8,9],
    b = a.insert(2,5,6,7);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

스 니펫 확장

답변

이 경우 순수한 JavaScript 를 사용하는 것이 좋습니다 . 또한 JavaScript에는 insert 메소드가 없지만 내장 배열 메소드 인 메소드가 있습니다. 스플 라이스 라고합니다 …

splice ()가 무엇인지 보자 …

splice () 메서드는 기존 요소를 제거하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

자, 아래 배열이 있다고 상상해보십시오.

const arr = [1, 2, 3, 4, 5];

다음 3과 같이 제거 할 수 있습니다 .

arr.splice(arr.indexOf(3), 1);

3을 반환하지만 지금 arr을 확인하면 다음과 같습니다.

[1, 2, 4, 5]

지금까지는 훌륭했지만 스플 라이스를 사용하여 배열에 새 요소를 추가하는 방법은 무엇입니까? Arr에 3을 다시 넣자 …

arr.splice(2, 0, 3);

우리가 한 일을 보자 …

우리는 다시 접속을 사용 하지만 이번에는 두 번째 인수에 대해 0 을 전달합니다. 항목을 삭제하지 않으려 고하지만 동시에 두 번째 색인에 추가 될 3 인 세 번째 인수를 추가합니다 …

우리는 동시에 삭제 하고 추가 할 수 있다는 것을 알고 있어야합니다 .

arr.splice(2, 2, 3);

인덱스 2에서 2 개의 항목 을 삭제 한 다음 인덱스 2에서 3 을 추가 하면 결과는 다음과 같습니다.

[1, 2, 3, 5];

스플 라이스의 각 항목이 작동하는 방식을 보여줍니다.

array.splice (start, deleteCount, item1, item2, item3 …)