Frage Wie fügt man ein Element in ein Array bei einem bestimmten Index ein?


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

arr.insert(index, item)

Vorzugsweise in jQuery, aber jede Javascript-Implementierung wird an dieser Stelle tun.


2075
2018-02-25 14:29


Ursprung


Antworten:


Was du willst, ist das splice Funktion für das native Array-Objekt.

arr.splice(index, 0, item); wird eingefügt item in arr am angegebenen Index (Löschen 0 Elemente zuerst, das heißt, es ist nur ein Einsatz).

In diesem Beispiel erstellen wir ein Array und fügen ein Element zu Index 2 hinzu:

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


3437
2018-02-25 14:32



Sie können das implementieren Array.insert Methode, indem Sie dies tun:

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

Dann kannst du es benutzen wie:

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

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

207
2017-10-03 14:26



Benutzerdefiniertes Array insert Methoden

1. Mit mehreren Argumenten und Verkettungsunterstützung

/* 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 (als nativ splice tut) und unterstützt die Verkettung:

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

2. Mit array-artigen Argumenten, die die Unterstützung zusammenführen und verketten

/* 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 angegebenen Array zusammenführen und unterstützt auch die 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/


63
2018-03-25 17:45



Anders als bei Spleiß können Sie diesen Ansatz verwenden, der das ursprüngliche Array nicht mutiert, aber ein neues Array mit dem hinzugefügten Element erstellt. Normalerweise sollten Sie Mutationen möglichst vermeiden. Ich benutze ES6 Spread Operator hier.

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 ein Element hinzuzufügen, indem die Funktion ein wenig angepasst wird, um den Ruheoperator für die neuen Elemente zu verwenden, und dies auch im zurückgegebenen Ergebnis zu verteilen

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]


54
2017-07-04 09:18



Wenn Sie mehrere Elemente gleichzeitig in ein Array einfügen möchten, sehen Sie sich diese Stack Overflow-Antwort an: Eine bessere Möglichkeit, ein Array in einem JavaScript-Array zu einem Array zusammenzufügen

Auch hier sind 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;
}

Schließlich ist hier ein jsFiddle, damit Sie es für sich selbst sehen können: http://jsfiddle.net/luisperephid/Wc8aS/

Und so nutzen Sie 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);

33
2017-08-30 04:37



Für eine ordnungsgemäße funktionale Programmierung und Verkettung Zwecke eine Erfindung von Array.prototype.insert() ist bedeutsam. Eigentlich hätte Spleiß perfekt sein können, wenn es das mutierte Array anstelle eines völlig bedeutungslosen leeren Arrays zurückgegeben hätte. Also hier geht es

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

Naja ok das oben mit dem Array.prototype.splice() man mutiert das ursprüngliche Array und einige mögen sich beschweren wie "Du solltest nicht modifizieren, was nicht dir gehört" und das könnte sich auch als richtig herausstellen. Also für das Gemeinwohl möchte ich ein anderes geben Array.prototype.insert() Das mutiert nicht das ursprüngliche Array. Hier kommt's;

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


14
2018-05-13 23:22



Ich empfehle die Verwendung von Pure JavaScript In diesem Fall gibt es auch keine Insert-Methode in JavaScript, aber wir haben eine Methode, die a ist eingebautes Array Methode, die die Arbeit für Sie erledigt, heißt es spleißen...

Mal sehen was ist spleißen()...

Die splice () -Methode ändert den Inhalt eines Arrays durch Entfernen   vorhandene Elemente und / oder neue Elemente hinzufügen.

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

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

Wir können entfernen 3 so was:

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

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

[1, 2, 4, 5]

So weit, so gut, aber wie können wir ein Array mit Spleißen um ein neues Element erweitern? Lassen Sie uns 3 im arr zurücklegen ...

arr.splice(2, 0, 3);

Mal sehen was wir gemacht haben ...

Wir gebrauchen spleißen wieder, aber diesmal für das zweite Argument, wir gehen 0, bedeutet, dass wir kein Element löschen wollen, aber gleichzeitig fügen wir ein drittes Argument hinzu, das 3 ist, das am zweiten Index hinzugefügt wird ...

Sie sollten wissen, dass wir es können löschen und hinzufügen zur gleichen Zeit, zum Beispiel jetzt können wir tun:

arr.splice(2, 2, 3);

Welches wird gelöscht 2 Gegenstände bei Index 2, dann hinzufügen 3 bei Index 2 und Ergebnis wird sein:

[1, 2, 3, 5];

Dies zeigt, wie jedes Element in Spleiß funktioniert:

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


7
2017-12-25 13:04



Eine andere mögliche Lösung, mit Verwendung von 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);


5
2018-04-05 17:06