source

항목을 특정 인덱스의 배열에 삽입하는 방법(JavaScript)

lovecheck 2022. 10. 30. 17:58
반응형

항목을 특정 인덱스의 배열에 삽입하는 방법(JavaScript)

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

arr.insert(index, item)

jQuery에서 사용하는 것이 좋지만 이 시점에서는 JavaScript 구현이 가능합니다.

네이티브 어레이 개체에 대한 기능을 사용하려고 합니다.

arr.splice(index, 0, item);itemarr된 「」로index (비밀(이행)0아, 아, 아, 아, 아, 아, 아, 아, 아, 아)

이 예에서는 배열을 생성하여 요소를 인덱스2에 추가합니다.

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

console.log(arr.join()); // Jani,Hege,Stale,Kai Jim,Borge
arr.splice(2, 0, "Lene");
console.log(arr.join()); // Jani,Hege,Lene,Stale,Kai Jim,Borge

하면 .Array.insert다음과 같이 합니다.

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

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

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

// => 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]

함수를 약간 조정하여 새 항목에 대해 rest 연산자를 사용하여 여러 항목을 추가하고 반환된 결과에도 해당 항목을 확산시키는 데 사용할 수 있습니다.

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]

어레이 custom custom custominsert

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;
};

여러 요소를 삽입할 수 있으며(원어민과 마찬가지로) 체인을 지원합니다.

["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/

한 번에 여러 요소를 어레이에 삽입하려면 다음 Stack Overflow 답변을 참조하십시오.javascript에서 어레이를 어레이로 분할하는 더 좋은 방법입니다.

또한 두 가지 예를 모두 보여주는 몇 가지 기능이 있습니다.

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.splice() 할 수 방법

const numbers = ['one', 'two', 'four', 'five']
numbers.splice(2, 0, 'three');

console.log(numbers)

은 이쪽Array.prototype.splice()

적절한 기능 프로그래밍 및 체인의 목적을 위해,Array.prototype.insert()필수불가결합니다.그...splice완전히 무의미한 빈 배열 대신 변환된 배열을 반환했다면 완벽했을 것입니다. 이렇게 나옵니다: 자, 이, 이, 이, 이, 이, 이.

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));

솔루션과 퍼포먼스

오늘(2020.04.24) 대규모 어레이와 소규모 어레이에 적합한 솔루션 테스트를 실시합니다.Chrome 81.0, Safari 13.1 및 Firefox 75.0의 macOS v10.13.6(High Sierra)에서 테스트했습니다.

결론들

모든 브라우저용

  • 스몰 어레이의 경우 의외로 다음과 같은 비임플레이스 솔루션을 기반으로 합니다.slice ★★★★★★★★★★★★★★★★★」reduce는 보통 (D,E,F)보다 더 .
  • ""은 "In-Place-Restore"를 으로 합니다.splice가 가장(때로는 최대 크기에 (AI, BI ci CI 때 、 CI 때 、 100 、 배름 、 름배름름름 )
  • 소규모 어레이의 경우 BI 솔루션이 가장 느렸습니다.
  • 대규모 어레이의 경우 E 솔루션이 가장 느렸습니다.

여기에 이미지 설명을 입력하십시오.

세부 사항

테스트는 인플레이스 솔루션(AI, BI 및 CI)과 비인플레이스 솔루션(D, E, F)의 두 가지 그룹으로 나뉘어져 다음 두 가지 경우에 대해 수행되었습니다.

  • 10개의 요소로 구성된 어레이 테스트 - 여기에서 실행할 수 있습니다.
  • 1,000,000개의 요소로 구성된 어레이 테스트 - 여기에서 실행할 수 있습니다.

테스트된 코드는 다음 스니펫에 제시되어 있습니다.

jsfiddle

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)

Google Chrome의 소형 어레이에 대한 결과는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오.

이 경우 순수 JavaScript 사용을 권장합니다.또한 JavaScript에는 삽입방식은 없지만, 내장 Array 방식인 삽입방식이 있습니다.스플라이스라고 해요

스플라이스()가 뭔지 보자...

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

다음 어레이가 있다고 가정해 보겠습니다.

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

수 있어요.3음음음같 뭇매하다

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

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

[1, 2, 4, 5]

지금까지는 좋습니다만, 어떻게 스플라이스를 사용하여 어레이에 새로운 요소를 추가할 수 있을까요?

3개를 다시...

arr.splice(2, 0, 3);

우리가 무슨 짓을 했는지 보자...

다시 스플라이스를 사용하지만 두 번째 인수에서는 0을 통과합니다. 즉, 어떤 항목도 삭제하지 않고 세 번째 인수인 두 번째 인덱스에 추가되는 세 번째 인수를 추가합니다.

삭제와 추가를 동시에 할 수 있다는 점에 유의하시기 바랍니다.예를 들어 다음과 같은 작업을 수행할 수 있습니다.

arr.splice(2, 2, 3);

그러면 인덱스 2에서 두 항목이 삭제됩니다.그런 다음 인덱스 2에 3을 더하면 다음과 같이 됩니다.

[1, 2, 3, 5];

다음은 스플라이스의 각 항목이 어떻게 작동하는지 보여 줍니다.

array.splice(시작, deleteCount, item1, item2, item3...)

다음은 두 가지 방법입니다.

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(" "));

특정 인덱스에 단일 요소 추가

// Append at a 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 a 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

하시면 됩니다.splice() 때문에

splice()할 때 세 .

  1. 항목을 추가할 배열의 인덱스입니다.
  2. 삭제할 항목의 수. 이 경우 다음과 같습니다.0.
  3. 추가할 요소.

let array = ['item 1', 'item 2', 'item 3']
let insertAtIndex = 0
let itemsToRemove = 0
    
array.splice(insertAtIndex, itemsToRemove, 'insert this string on index 0')

console.log(array)

Array#splice() 어레이의 변형을 피하고 싶은 경우를 제외하고, 이것이 최선의 방법입니다.2개의 어레이를 지정arr1 ★★★★★★★★★★★★★★★★★」arr2 이렇게 arr2arr1요소 에: "Discription"이 있습니다.

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)

어레이의 뮤트(예를 들어 Unmutable.js 를 사용하는 경우)가 염려되는 경우는, 를 사용해 주세요.splice() a 'p'.

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

다른 가능한 해결책으로는Array.reduce.

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

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

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

이미 답변이 되었지만, 다른 접근방식을 위해 이 메모를 추가합니다.

이미 알고 있는 수의 항목을 배열에 특정 위치에 배치하려고 했는데, 이는 정의된 대로 정렬 순서가 보장되지 않는 "관련 배열"(즉, 개체)에서 추출되기 때문입니다.결과 어레이를 객체의 배열로 하고 싶었지만 배열이 해당 순서를 보장하므로 객체는 배열 내에서 특정 순서로 배열됩니다.그래서 이렇게 했어요.

먼저 소스 오브젝트, Postgre에서 취득한JSONB 문자열SQL. 각 하위 개체의 "순서" 속성을 기준으로 정렬하려고 합니다.

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 insert(array, index) {
  const items = Array.prototype.slice.call(arguments, 2);

  return [].concat(array.slice(0, index), items, array.slice(index));
}

const list = ['one', 'two', 'three'];

const list1 = insert(list, 0, 'zero'); // Insert single item
const list2 = insert(list, 3, 'four', 'five', 'six'); // Insert multiple

console.log('Original list: ', list);
console.log('Inserted list1: ', list1);
console.log('Inserted list2: ', list2);

주의: 이것은 ES6 이전 버전이기 때문에 오래된 브라우저와 새로운 브라우저 모두에서 사용할 수 있습니다.

ES6를 사용하는 경우 나머지 매개 변수도 시험해 볼 수 있습니다. 이 답변을 참조하십시오.

이 질문에 대해 여전히 문제가 있고 이전 답변의 모든 옵션을 시도해봤지만 얻지 못한 사람.솔루션을 공유합니다.이는 객체의 속성과 어레이의 속성을 명시적으로 기술하고 싶지 않다는 점을 고려하기 위한 것입니다.

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), []);
}

따라서 인덱스에 삽입된 요소를 사용하여 새로운 어레이를 반환할 수 있습니다(푸시 또는 스플라이스사용하는 것보다 훨씬 좋습니다). 인덱스가 어레이 길이보다 클 경우 어레이가 마지막에 삽입됩니다.

이거 해봤는데 잘 되네!

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

인덱스는 요소를 삽입하거나 삭제할 위치입니다.

두 합니다.0, 즉 삭제해야 . item에는 배열 내에서 작성하는 새로운 엔트리가 기재되어 있습니다.1번으로 하다

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

다음은 제가 사용하는 어플리케이션 중 하나에서 사용하는 작업 기능입니다.

항목이 존재하는지 확인합니다.

let ifExist = (item, strings = [ '' ], position = 0) => {
     // Output into an array with an empty string. Important just in case their isn't any item.
    let output = [ '' ];
    // Check to see if the item that will be positioned exist.
    if (item) {
        // Output should be equal to an array of strings.
        output = strings;
       // Use splice() in order to break the array.
       // Use positional parameters 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:

splice()는 확실히 혼란스러운 인터페이스를 가지고 있기 때문에 Redu의 답변에 동의할 수 밖에 없습니다.cdbajorin에 의해 "두 번째 파라미터가 0일 때만 빈 배열을 반환합니다.0보다 크면 배열에서 삭제된 항목을 반환합니다."는 정확하지만 요점을 증명합니다.

이 함수의 의도는 접합하거나 앞서 Jakob Keller가 말한 것처럼 "결합 또는 연결, 또한 변화하기 위한 것입니다.

현재 변경 중인 기존 어레이가 있으며 요소의 추가 또는 삭제가 필요합니다.이 때문에 삭제한 요소의 반환값이 있는 경우 반환되는 값은 아무리 생각해도 어색합니다.그리고 이 방법이 자연스럽게 보이는 것을 반환했다면 체인에 더 적합했을 것이라는 데 100% 동의합니다. 스플라이스된 요소가 추가된 새로운 배열입니다.그러면 [19, 17] 같은 걸 할 수 있어요.splice(1,0,"18"), splice..." 또는 반환된 배열로 원하는 것을 지정합니다.

제거된 것을 돌려준다는 것은 말도 안 되는 IMHO입니다.만약 이 방법의 의도가 "일련의 요소를 잘라내는 것"이었고 그것이 유일한 의도였다면, 아마도 그럴 것이다.하지만 내가 이미 뭘 잘라내고 있는지 모른다면, 그 요소들을 잘라내야 할 이유가 거의 없는 것 같아, 그렇지 않니?

기존 어레이를 변환하는 것이 아니라 기존 어레이에서 새 어레이를 만드는 concat(), map(), reduce(), slice() 등의 동작을 하는 것이 좋습니다.그것들은 모두 사슬에 묶일 수 있고, 그것은 중요한 문제이다.체인 어레이를 조작하는 것은 일반적입니다.

언어는 어느 쪽으로든 갈 필요가 있고 가능한 한 그것을 고수하려고 노력해야 할 것 같다.JavaScript는 기능적이고 덜 선언적인데, 그것은 단지 표준에서 이상한 이탈처럼 보일 뿐이다.

약간의 안전이 마음에 들어서 이걸 사용해요.

Array.prototype.Insert = function (item, before) {
  if (!item) return;
  if (before == null || before < 0 || before > this.length - 1) {
    this.push(item);
    return;
  }
  this.splice(before, 0, item);
}


var t = ["a", "b"]

t.Insert("v", 1)

console.log(t)

최신(Typescript 기능) 방법은 다음과 같습니다.

export const insertItemInList = <T>(
  arr: T[],
  index: number,
  newItem: T
): T[] => [...arr.slice(0, index), newItem, ...arr.slice(index)]

나는 이렇게 한다:

const insert = (what, where, index) => 
  ([...where.slice(0, index), what , ...where.slice(index, where.length)]);

const insert = (what, where, index) =>
  ([...where.slice(0, index), what , ...where.slice(index, where.length)]);
  
const list = [1, 2, 3, 4, 5, 6];
const newList = insert('a', list, 2);

console.log(newList.indexOf('a') === 2);

여러 값을 동시에 삽입할 수 있는 간단한 함수는 다음과 같습니다.

function add_items_to_array_at_position(array, index, new_items)
{
    return [...array.slice(0, index), ...new_items, ...array.slice(index)];
}

사용 예:

let old_array = [1,2,5];

let new_array = add_items_to_array_at_position(old_array, 2, [3,4]);

console.log(new_array);

//Output: [1,2,3,4,5]

array.splice를 사용하여 수행할 수 있습니다.

/**
 * @param arr:  Array
 * @param item:  item to insert
 * @param index: index at which to insert 
 * @returns array with the inserted element
 */
export function _arrayInsertAt<T>(arr: T[], item: T, index: number) {
    return  arr.splice(index, 0, item);; 
}

어레이의 문서조각을 내라

var array= [10,20,30,40]

var i;

var pos=2; //pos=index + 1
/*pos is position which we want to insert at which is index + 1.position two in an array is index 1.*/

var value=5 
//value to insert

//Initialize from last array element

for(i=array.length-1;i>=pos-1;i--){

array[i+1]=array[i]

}

array[pos-1]=value

console.log(array)

언급URL : https://stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript

반응형