다음과 같은 스타일의 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 ...)

특정 색인에 단일 요소 추가

//Append at specific position(here at index 1)
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


//Append at specific position (here at index 3)
arrName[3] = 'newName1';

특정 색인에 여러 요소 추가

//Append from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where append start, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements

의 다른 사용 가능한 솔루션입니다 Array#reduce.

var arr = ["apple", "orange", "raspberry"],
    arr2 = [1, 2, 4];

function insert(arr, item, index) {
    arr = arr.reduce(function(s, a, i) {
      i == index ? s.push(item, a) : s.push(a);
      return s;
    }, []);   
    console.log(arr);
}

insert(arr, "banana", 1);
insert(arr2, 3, 2);

두 가지 방법이 있습니다.

const array = [ 'My', 'name', 'Hamza' ];

array.splice(2, 0, 'is');

console.log("Method 1 : ", array.join(" "));

또는

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

const array = [ 'My', 'name', 'Hamza' ];
array.insert(2, 'is');

console.log("Method 2 : ", array.join(" "));

이것이 이미 답변되었지만 대안 접근 방식 으로이 메모를 추가하고 있습니다.

나는 배치하고 싶었다 알려진 숫자 가 정의에 의해 정렬 순서가 보장되지 않는 "연관 배열"(즉, 객체)의 이탈로, 특정 위치에 배열에 항목을. 결과 배열이 객체의 배열이되기를 원했지만 배열이 순서를 보장하기 때문에 객체가 배열의 특정 순서가되도록했습니다. 그래서 나는 이것을했다.

먼저 PostgreSQL에서 검색 한 JSONB 문자열 인 소스 객체입니다. 각 자식 개체의 "order"속성을 기준으로 정렬하고 싶었습니다.

var jsonb_str = '{"one": {"abbr": "", "order": 3}, "two": {"abbr": "", "order": 4}, "three": {"abbr": "", "order": 5}, "initialize": {"abbr": "init", "order": 1}, "start": {"abbr": "", "order": 2}}';

var jsonb_obj = JSON.parse(jsonb_str);

객체의 노드 수를 알고 있기 때문에 먼저 지정된 길이의 배열을 만듭니다.

var obj_length = Object.keys(jsonb_obj).length;
var sorted_array = new Array(obj_length);

그런 다음 새로 생성 된 임시 객체를 실제로 "정렬"하지 않고 배열의 원하는 위치에 배치하여 객체를 반복합니다.

for (var key of Object.keys(jsonb_obj)) {
  var tobj = {};
  tobj[key] = jsonb_obj[key].abbr;

  var position = jsonb_obj[key].order - 1;
  sorted_array[position] = tobj;
}

console.dir(sorted_array);

이 문제에 여전히 문제가 있으며 위의 모든 옵션을 시도했지만 결코 얻지 못한 사람. 내 솔루션을 공유하고 있습니다. 이것은 객체 대 배열의 속성을 명시 적으로 언급하고 싶지 않다는 것을 고려하는 것입니다.

function isIdentical(left, right){
    return JSON.stringify(left) === JSON.stringify(right);
}

function contains(array, obj){
    let count = 0;
    array.map((cur) => {
          if(this.isIdentical(cur, obj)) count++;
    });
    return count > 0;
}

이것은 참조 배열을 반복하고 확인하려는 객체와 비교하고 두 배열을 모두 문자열로 변환 한 다음 일치하면 반복합니다. 그럼 당신은 셀 수 있습니다. 이것은 향상 될 수 있지만 이것은 내가 정착 한 곳입니다. 도움이 되었기를 바랍니다.

다음과 같이 감소 방법의 이익을 얻으십시오 :

function insert(arr, val, index) {
    return index >= arr.length 
        ? arr.concat(val)
        : arr.reduce((prev, x, i) => prev.concat(i === index ? [val, x] : x), []);
}

따라서이 방법으로 인덱스에 요소를 삽입 한 상태에서 새로운 배열을 반환 할 수 있습니다 (멋진 기능 방식-푸시 또는 스플 라이스를 사용하는 것보다 낫습니다). 인덱스가 배열의 길이보다 길면 삽입됩니다 끝에.

Array#splice()실제로 배열을 변경하지 않으려는 경우가 아니면 갈 수 있습니다. 이 개 배열을 감안 arr1하고 arr2여기에 당신의 내용을 삽입 할 방법, arr2에 arr1첫 번째 요소 후 :

const arr1 = ['a', 'd', 'e'];
const arr2 = ['b', 'c'];

arr1.splice(1, 0, ...arr2); // arr1 now contains ['a', 'b', 'c', 'd', 'e']

console.log(arr1)

당신은, 당신이 대신 사용할 수 있습니다 (Immutable.js를 사용하는 경우, 예를 들어) 배열을 돌연변이에 대해 우려하는 경우 slice(),하지와 혼동 splice()A를 'p'.

const arr3 = [...arr1.slice(0, 1), ...arr2, ...arr1.slice(1)];

나는 이것을 시도했고 잘 작동하고있다!

var initialArr = ["India","China","Japan","USA"];
initialArr.splice(index, 0, item);

색인은 요소를 삽입하거나 삭제하려는 위치입니다. 즉, 두 번째 매개 변수는 제거 할 인덱스의 요소 수를 정의합니다. 항목은 배열에서 만들려는 새 항목입니다. 하나 이상일 수 있습니다.

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");

여기 내 응용 프로그램 중 하나에서 사용하는 작동 기능이 있습니다.

항목이 종료되는지 확인합니다.

let ifExist = (item, strings = [ '' ], position = 0) => {
     // output into an array with empty string. Important just in case their is no item. 
    let output = [ '' ];
    // check to see if the item that will be positioned exist.
    if (item) {
        // output should equal to array of strings. 
        output = strings;
       // use splice in order to break the array. 
       // use positition param to state where to put the item
       // and 0 is to not replace an index. Item is the actual item we are placing at the prescribed position. 
        output.splice(position, 0, item);
    }
    //empty string is so we do not concatenate with comma or anything else. 
    return output.join("");
};

그런 다음 아래에서 호출합니다.

ifExist("friends", [ ' ( ', ' )' ], 1)}  // output: ( friends )
ifExist("friends", [ ' - '], 1)}  // output:  - friends 
ifExist("friends", [ ':'], 0)}  // output:   friends: 

조금 오래된 스레드이지만 스플 라이스에는 분명히 혼란스러운 인터페이스가 있기 때문에 위의 Redu에 동의해야합니다. cdbajorin이 제공 한 응답은 "두 번째 매개 변수가 0 일 때 빈 배열 만 반환합니다.이 값이 0보다 크면 배열에서 제거 된 항목을 반환합니다"는 정확하지만 포인트를 증명합니다. 이 기능의 목적은 Jakob Keller가 "연결하거나 연결하거나 변경하는 것"과 같이 스플 라이스하거나 이전에 말한 것처럼, 요소를 추가하거나 제거하는 것과 관련하여 현재 변경중인 기존 배열이 있습니다 .... 제거 된 요소의 값을 반환하는 것이 가장 어색합니다. 그리고 100 %는이 방법이 스 플라이 싱 된 요소가 추가 된 새로운 배열 인 것처럼 보이는 것을 반환하면 체인에 더 적합 할 수 있다는 데 동의합니다. 그런 다음 [ "19", "17"]. splice (1,0, "18"). join ( "...") 또는 반환 된 배열로 원하는 것을 수행 할 수 있습니다. 그것이 제거 된 것을 반환한다는 사실은 말도 안되는 IMHO입니다. 이 방법의 의도가 "요소 세트를 잘라내는 것"이고 그것이 의도 된 것일 경우 일 수 있습니다. 내가 이미 잘라 내고있는 것을 모른다면 아마도 그 요소를 잘라낼 이유가 거의 없을 것 같습니다. 기존 배열을 변경하지 않고 기존 배열에서 새 배열을 만드는 concat, map, reduce, slice 등의 동작을 수행하는 것이 좋습니다. 그것들은 모두 연결할 수 있으며 중요한 문제입니다. 배열 조작을 연쇄시키는 것이 일반적입니다. 언어가 하나 또는 다른 방향으로 가고 가능한 한 많은 언어를 고수하려고하는 것 같습니다. 자바 스크립트는 기능적이고 덜 선언적이며, 표준에서 이상한 편차처럼 보입니다.

공연

오늘 (2020.04.24) 크고 작은 어레이에 대해 선택된 솔루션에 대한 테스트를 수행합니다. Chrome 81.0, Safari 13.1, Firefox 75.0의 MacOs High Sierra 10.13.6에서 테스트했습니다.

결론

모든 브라우저

• 놀라 울 정도로 작은 배열에 대한 비에 적절한 솔루션을 기반으로 slice하고 reduce(D, E, F)의 10 배-100 배 빠른에서 적절한 솔루션보다 보통
• 대규모 배열의 경우 splice(AI, BI, CI) 기반 솔루션 이 가장 빠릅니다 (때로는 ~ 100x-배열 크기에 따라 다름)
• 작은 배열의 경우 BI 솔루션이 가장 느 렸습니다.
• 큰 배열의 경우 E 솔루션이 가장 느 렸습니다.

세부

테스트는 현장 솔루션 (AI, BI, CI)과 비 현장 솔루션 (D, E, F)의 두 그룹으로 나뉘어 두 경우에 수행되었습니다.

• 10 개의 요소로 배열을 테스트하십시오- 여기에서 실행할 수 있습니다
• 1.000.000 요소로 배열을 테스트하십시오- 여기에서 실행할 수 있습니다

테스트 된 코드는 아래 스 니펫에 표시됩니다

function AI(arr, i, el) {
  arr.splice(i, 0, el);
  return arr;
}

function BI(arr, i, el) {
  Array.prototype.splice.apply(arr, [i, 0, el]);
  return arr;
}

function CI(arr, i, el) {
  Array.prototype.splice.call(arr, i, 0, el);
  return arr;
}

function D(arr, i, el) {
  return arr.slice(0, i).concat(el, arr.slice(i));
}

function E(arr, i, el) {
  return [...arr.slice(0, i), el, ...arr.slice(i)]
}

function F(arr, i, el) {
  return arr.reduce((s, a, j)=> (j-i ? s.push(a) : s.push(el, a), s), []);
}



// -------------
// TEST
// -------------

let arr = ["a", "b", "c", "d", "e", "f"];

let log = (n, f) => {
  let a = f([...arr], 3, "NEW");
  console.log(`${n}: [${a}]`);
};

log('AI', AI);
log('BI', BI);
log('CI', CI);
log('D', D);
log('E', E);
log('F', F);

This snippet only presents tested code (it not perform tests)

크롬의 작은 배열에 대한 예제 결과는 다음과 같습니다.