Website-Suche

javascript - Wie fügt man ein Element an einem bestimmten Index in ein Array ein?

Ich suche nach einer JavaScript-Array-Einfügemethode im Stil von:

arr.insert(index, item)

Vorzugsweise in jQuery, aber jede JavaScript-Implementierung ist zu diesem Zeitpunkt in Ordnung.

Antwort #1

Du willst die splice-Funktion auf dem nativen Array-Objekt.

arr.splice(index, 0, item); fügt item in arr an der angegebenen Index-Stelle ein (es werden zuerst 0 Elemente gelöscht, das heißt, es ist nur eine Einfügung).

In diesem Beispiel werden wir ein Array erstellen und ein Element an Index 2 hinzufügen:

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

AKTUALISIERUNG (24. Mai 2024)

Sie können jetzt die toSpliced-Methode verwenden, die sich genau wie splice verhält, jedoch ein neues Array zurückgibt, ohne das bestehende zu verändern.

Sie könnten das vorherige Beispiel wie folgt aktualisieren:

const updated = arr.toSpliced(2, 0, "Lene");

Antwort #2

Sie können die Array.insert-Methode folgendermaßen implementieren:

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

Dann kannst du es so verwenden:

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

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

Antwort #3

Abgesehen von splice können Sie diesen Ansatz verwenden, der das ursprüngliche Array nicht verändert, aber ein neues Array mit dem hinzugefügten Element erstellt. Es ist nützlich, wenn Sie eine Veränderung vermeiden müssen. Ich verwende hier den ES6-Spread-Operator.

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]

Dies kann verwendet werden, um mehr als einen Artikel hinzuzufügen, indem die Funktion ein wenig angepasst wird, um den Rest-Operator für die neuen Artikel zu verwenden, und diesen auch im zurückgegebenen Ergebnis zu verbreiten:

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]

Antwort #4

Die Verwendung von Array.prototype.splice() ist eine elegante Möglichkeit, dies zu erreichen

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

console.log(numbers)

Lesen Sie mehr über Array.prototype.splice

Antwort #5

Benutzerdefinierte Array-insert-Methoden

1. Mit mehreren Argumenten und Unterstützung für Verkettung

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

Es kann mehrere Elemente einfügen (wie das native splice es tut) und unterstützt Verkettung:

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

2. Mit Unterstützung für das Mischen und Verketten von Array-ähnlichen Argumenten

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

Es kann Arrays aus den Argumenten mit dem gegebenen Array zusammenführen und unterstützt auch Verkettung:

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

DEMO: http://jsfiddle.net/UPphH/

Antwort #6

Wenn Sie mehrere Elemente auf einmal in ein Array einfügen möchten, schauen Sie sich diese Stack-Overflow-Antwort an: Eine bessere Möglichkeit, ein Array in ein Array in JavaScript zu spalten

Hier sind also einige Funktionen, um beide Beispiele zu veranschaulichen:

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

Endlich hier ist ein jsFiddle, damit Sie es selbst sehen können: http://jsfiddle.net/luisperezphd/Wc8aS/

Und so verwendet man die Funktionen:

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

Antwort #7

Lösungen & Leistung

Heute (24.04.2020) führe ich Tests für ausgewählte Lösungen für große und kleine Arrays durch. Ich habe sie auf macOS v10.13.6 (High Sierra) in Chrome 81.0, Safari 13.1 und Firefox 75.0 getestet.

Schlussfolgerungen

Für alle Browser

  • Überraschenderweise sind für kleine Arrays nicht-in-place Lösungen basierend auf slice und reduce (D,E,F) normalerweise 10- bis 100-mal schneller als In-Place-Lösungen
  • Für große Arrays waren die In-Place-Lösungen basierend auf splice (AI, BI und CI) am schnellsten (manchmal ~100x - aber es hängt von der Array-Größe ab)
  • Für kleine Arrays war die BI-Lösung am langsamsten
  • Für große Arrays war die E-Lösung am langsamsten

Einzelheiten

Tests wurden in zwei Gruppen unterteilt: In-Place-Lösungen (AI, BI und CI) und Nicht-In-Place-Lösungen (D, E und F) und wurden für zwei Fälle durchgeführt:

  • Test für ein Array mit 10 Elementen - du kannst es hier ausführen
  • Test für ein Array mit 1.000.000 Elementen - Sie können es hier ausführen

Der getestete Code wird im folgenden Ausschnitt gezeigt:

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)

Beispielergebnisse für ein kleines Array in Google Chrome sind unten:

Antwort #8

Du kannst dafür splice() verwenden

Die splice()-Methode erhält beim Hinzufügen eines Elements normalerweise drei Argumente:

  1. der Index des Arrays, an dem das Element hinzugefügt wird
  2. die Anzahl der zu entfernenden Elemente, die in diesem Fall 0 ist
  3. das Element, hinzuzufügen

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

console.log(array)

Antwort #9

Für ordnungsgemäßes funktionales Programmieren und Verkettungszwecke ist eine Erfindung von Array.prototype.insert() unerlässlich. Eigentlich hätte das splice perfekt sein können, wenn es das veränderte Array statt eines völlig bedeutungslosen leeren Arrays zurückgegeben hätte. Also, hier geht es los:

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

Nun, okay, das oben Genannte mit Array.prototype.splice() verändert das ursprüngliche Array, und manche könnten sich beschweren wie „du solltest nicht ändern, was dir nicht gehört“, und das könnte sich ebenfalls als richtig herausstellen. Also möchte ich zum Wohle der Allgemeinheit eine andere Array.prototype.insert() vorstellen, die das ursprüngliche Array nicht verändert. Also, hier ist sie;

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

Antwort #10

Ich empfehle in diesem Fall die Verwendung von reinem JavaScript. Außerdem gibt es keine Insert-Methode in JavaScript, aber wir haben eine Methode, die eine eingebaute Array-Methode ist und die Aufgabe für dich erledigt. Sie heißt splice...

Mal sehen, was splice() ist...

Die splice()-Methode ändert den Inhalt eines Arrays, indem vorhandene Elemente entfernt und/oder neue Elemente hinzugefügt werden.

OK, stell dir vor, wir haben dieses Array unten:

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

Wir können 3 so entfernen:

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

Es wird 3 zurückgeben, aber wenn wir das arr jetzt überprüfen, haben wir:

[1, 2, 4, 5]

Bisher so gut, aber wie können wir ein neues Element mit splice zu einem Array hinzufügen?

Lass uns 3 wieder in das Array einsetzen...

arr.splice(2, 0, 3);

Mal sehen, was wir gemacht haben...

Wir verwenden splice erneut, aber diesmal übergeben wir für das zweite Argument 0, was bedeutet, dass wir kein Element löschen möchten, gleichzeitig fügen wir ein drittes Argument hinzu, nämlich die 3, die am zweiten Index eingefügt werden soll...

Sie sollten sich bewusst sein, dass wir gleichzeitig löschen und hinzufügen können. Zum Beispiel können wir jetzt Folgendes tun:

arr.splice(2, 2, 3);

Was zwei Elemente an Index 2 löschen wird. Dann 3 an Index 2 hinzufügen und das Ergebnis wird sein:

[1, 2, 3, 5];

Dies zeigt, wie jedes Element in splice funktioniert:

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

Antwort #11

Hier sind zwei Möglichkeiten:

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

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

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

Oder

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

Antwort #12

Fügen Sie ein einzelnes Element an einem bestimmten Index hinzu:

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

Mehrere Elemente an einem bestimmten Index anhängen:

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

Antwort #13

Array#splice() ist der richtige Weg, es sei denn, Sie möchten wirklich vermeiden, das Array zu verändern. Gegeben sind 2 Arrays arr1 und arr2, so würden Sie den Inhalt von arr2 nach dem ersten Element in arr1 einfügen:

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)

Wenn Sie sich Sorgen machen, das Array zu verändern (zum Beispiel bei Verwendung von Immutable.js), können Sie stattdessen slice() verwenden, nicht zu verwechseln mit splice() mit einem 'p'.

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

Antwort #14

Eine weitere mögliche Lösung unter Verwendung von 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))

Antwort #15

Auch wenn dies bereits beantwortet wurde, füge ich diese Notiz für einen alternativen Ansatz hinzu.

Ich wollte eine bekannte Anzahl von Elementen in ein Array einfügen, an bestimmten Positionen, während sie von einem "assoziativen Array" (d.h. einem Objekt) kommen, das definitionsgemäß nicht garantiert in einer sortierten Reihenfolge ist. Ich wollte, dass das resultierende Array ein Array von Objekten ist, aber die Objekte in einer bestimmten Reihenfolge im Array stehen, da ein Array ihre Reihenfolge garantiert. Also habe ich Folgendes gemacht.

Zuerst das Quellobjekt, ein JSONB-String, der aus PostgreSQL abgerufen wurde. Ich wollte es nach der Eigenschaft „order“ in jedem Kindobjekt sortiert haben.

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

Da die Anzahl der Knoten im Objekt bekannt ist, erstelle ich zunächst ein Array mit der angegebenen Länge:

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

Und dann iteriere das Objekt und platziere die neu erstellten temporären Objekte an den gewünschten Stellen im Array, ohne dass wirklich eine „Sortierung“ stattfindet.

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

Antwort #16

Unveränderliche Einfügung

Die Verwendung der splice-Methode ist sicherlich die beste Antwort, wenn Sie Elemente in ein Array an Ort und Stelle einfügen müssen.

Wenn Sie jedoch nach einer unveränderlichen Funktion suchen, die ein neues aktualisiertes Array zurückgibt, anstatt das ursprüngliche Array beim Einfügen zu ändern, können Sie die folgende Funktion verwenden.

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

Hinweis: Dies ist eine Methode aus der Zeit vor ES6, daher funktioniert sie sowohl in älteren als auch in neueren Browsern.

Wenn Sie ES6 verwenden, können Sie auch Rest-Parameter ausprobieren; siehe diese Antwort.

Verwandte Artikel