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

질문자 :tags2k

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

 arr.insert(index, item)

가급적이면 jQuery를 사용하지만 이 시점에서 모든 JavaScript 구현이 수행됩니다.

기본 배열 객체에 대한 splice

arr.splice(index, 0, item); 지정된 index arr item 을 삽입합니다( 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

tvanfosson

다음을 수행하여 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' ]

FrEsC 81

스플라이스 외에 원래 배열을 변경하지 않는 이 접근 방식을 사용할 수 있지만 추가된 항목으로 새 배열을 생성합니다. 일반적으로 가능하면 돌연변이를 피해야 합니다. 여기서는 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]

gafi

사용자 정의 배열 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("-"); // "abVWXYZcd"

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

VisioN

한 번에 여러 요소를 배열에 삽입하려면 이 스택 오버플로 답변을 확인하세요. 자바스크립트에서 배열을 배열에 연결하는 더 나은 방법

또한 다음은 두 가지 예를 설명하는 몇 가지 기능입니다.

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

Luis Perez

이 경우 순수 JavaScript 를 사용하는 것이 좋습니다. 또한 JavaScript에는 삽입 방법이 없지만 사용자를 대신하여 작업을 수행 하는 내장 Array 방법인 방법이 있습니다. 스플라이스 라고...

splice()가 무엇인지 봅시다 ...

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

자, 아래와 같은 배열이 있다고 상상해 보세요.

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

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

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

3을 반환하지만 지금 arr을 확인하면 다음이 표시됩니다.

 [1, 2, 4, 5]

지금까지는 좋았지만 splice를 사용하여 배열에 새 요소를 추가하는 방법은 무엇입니까?

arr에 3을 다시 넣자...

 arr.splice(2, 0, 3);

우리가 한 일을 보자 ...

splice를 다시 사용하지만 이번에는 두 번째 인수에 대해 0 을 전달합니다. 즉, 항목을 삭제하고 싶지 않지만 동시에 두 번째 인덱스에 추가될 세 번째 인수인 3을 추가합니다. ...

삭제 와 추가 를 동시에 할 수 있다는 점에 유의해야 합니다. 예를 들어 이제 다음을 수행할 수 있습니다.

 arr.splice(2, 2, 3);

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

 [1, 2, 3, 5];

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

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

Alireza

적절한 기능적 프로그래밍 및 연결 목적을 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));

Redu

솔루션 및 성능

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

결론

모든 브라우저용

• slice 및 reduce (D,E,F)를 기반으로 하는 비-인플레이스 솔루션은 일반적으로 인-플레이스 솔루션보다 10x-100배 빠릅니다.
• splice (AI, BI 및 CI)를 기반으로 하는 제자리 솔루션이 가장 빠릅니다(때로는 ~100x - 어레이 크기에 따라 다름)
• 소규모 어레이의 경우 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)=> (ji ? 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의 작은 배열에 대한 예시 결과는 다음과 같습니다.

Kamil Kiełczewski

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

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

Srikrushna

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

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

M. Hamza Rajput

배열을 변경하는 것을 정말로 피하고 싶지 않다면 Array#splice() 2개의 배열 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를 사용하는 경우) 'p' splice() 와 혼동하지 않도록 slice() 를 사용할 수 있습니다.

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

vkarpov15

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

kind user

이것은 이미 답변을 받았지만 대체 접근 방식을 위해 이 메모를 추가합니다.

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

먼저 원본 객체인 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);

Ville

이 문제에 여전히 문제가 있고 이전 답변의 모든 옵션을 시도했지만 얻지 못한 사람. 내 솔루션을 공유하고 있으며 이는 배열과 개체의 속성을 명시적으로 지정하고 싶지 않다는 점을 고려하기 위한 것입니다.

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

이것은 참조 배열을 반복하고 확인하려는 객체와 비교하고 둘 다 문자열로 변환한 다음 일치하는 경우 반복하는 조합입니다. 그럼 그냥 셀 수 있습니다. 이것은 개선 될 수 있지만 이것이 내가 정착 한 곳입니다.

Clyde

다음과 같이 감소 방법의 이익을 취합니다.

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

따라서 이러한 방식으로 우리는 인덱스에 삽입된 요소와 함께 새로운 배열(멋진 기능적 방법이 될 것입니다 - push 또는 splice를 사용하는 것보다 훨씬 낫습니다)을 반환할 수 있으며, 인덱스가 배열의 길이보다 크면 삽입됩니다. 끝에.

alejoko

불변 삽입

배열에 제자리에 삽입해야 하는 경우 splice 방법을 사용하는 것이 가장 좋은 답입니다.

그러나 삽입 시 원래 배열을 변경하는 대신 업데이트된 새 배열을 반환하는 불변 함수를 찾고 있다면 다음 함수를 사용할 수 있습니다.

 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을 사용하는 경우 나머지 매개변수 도 시도해 볼 수 있습니다. 이 답변을 참조하십시오.

kabirbaidhya

나는 이것을 시도했고 잘 작동합니다!

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

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

0, 즉 두 번째 매개변수는 인덱스에서 제거할 요소의 수를 정의합니다. item 은 배열에 만들고자 하는 새로운 항목을 포함합니다. 하나 또는 여러 개일 수 있습니다.

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

Pawan

다음은 내 응용 프로그램 중 하나에서 사용하는 작업 기능입니다.

항목이 있는지 확인합니다.

 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:

Lesly Revenge

splice()에는 확실히 약간의 혼란스러운 인터페이스가 있기 때문에 Redu의 답변에 동의해야 합니다. 그리고 "두 번째 매개변수가 0일 때만 빈 배열을 반환합니다. 0보다 크면 배열에서 제거된 항목을 반환합니다"라는 cdbajorin의 응답은 정확하지만 요점을 증명합니다.

이 기능의 의도는 연결하거나 이전에 Jakob Keller가 말한 대로 "결합하거나 연결하고 변경하는 것입니다.

요소를 추가하거나 제거하는 것을 포함하는 변경 중인 배열이 있습니다...." 이를 감안할 때 제거된 요소의 반환 값은 기껏해야 어색합니다. 그리고 저는 100% 동의합니다. 메서드가 연결 요소가 추가된 자연스러운 배열을 반환했다면 연결에 더 적합했을 수 있습니다. 그런 다음 ["19", "17"].splice(1,0,"18" ).join("...") 또는 반환된 배열로 원하는 모든 것.

제거된 것을 반환한다는 사실은 일종의 넌센스 IMHO입니다. 방법의 의도가 "요소 세트를 잘라내는 것"이고 그것이 유일한 의도라면 아마도. 내가 이미 무엇을 잘라내고 있는지 모른다면 아마도 그 요소를 잘라낼 이유가 거의 없는 것 같습니다. 그렇죠?

기존 배열을 변경하는 것보다 기존 배열에서 새 배열을 만드는 concat(), map(), reduce(), slice() 등과 같이 동작하면 더 좋을 것입니다. 사람들은 모든 체인 방식이며, 그것은 중요한 문제입니다. 체인 배열 조작은 다소 일반적입니다.

언어는 어느 한 방향으로 나아가서 가능한 한 그것에 충실하려고 노력해야 하는 것 같습니다. JavaScript는 기능적이고 덜 선언적이기 때문에 표준에서 이상한 일탈처럼 보입니다.

meem

나는 약간의 안전을 좋아하고 이것을 사용합니다.

 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 )

hossein sedighian

출처 : 여기를 클릭하세요

출처 : http:www.stackoverflow.com/questions/586182/how-to-insert-an-item-into-an-array-at-a-specific-index-javascript