it-swarm.com.de

Wie füge ich ein Element an einem bestimmten Index (JavaScript) in ein Array ein?

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

arr.insert(index, item)

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

2335
tags2k

Was Sie wollen, ist die Funktion splice für das native Array-Objekt.

arr.splice(index, 0, item); fügt item in arr am angegebenen Index ein (löscht zuerst 0-Elemente, dh es handelt sich lediglich um eine Einfügung).

In diesem Beispiel erstellen wir ein Array und fügen ein Element in 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());

3846
tvanfosson

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

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

Dann können Sie es wie folgt verwenden:

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

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

Mit Ausnahme des Spleißes können Sie diesen Ansatz verwenden, der das ursprüngliche Array nicht verändert, sondern ein neues Array mit dem hinzugefügten Element erstellt. Mutationen sollten Sie in der Regel möglichst vermeiden. 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 mehrere Elemente hinzuzufügen, indem Sie die Funktion etwas anpassen, um den Rest-Operator für die neuen Elemente zu verwenden, und dies auch im zurückgegebenen Ergebnis 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]

72
Gaafar

Benutzerdefinierte 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 native splice do) und unterstützt die Verkettung:

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

2. Mit Argumenten vom Array-Typ 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/

69
VisioN

Wenn Sie mehrere Elemente gleichzeitig in ein Array einfügen möchten, überprüfen Sie diese Antwort im Stack Overflow: Eine bessere Möglichkeit, ein Array in einem Array in Javascript zu verbinden.

Hier sind auch 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;
}

Zum Schluss noch ein jsFiddle, damit Sie es selbst sehen können: http://jsfiddle.net/luisperezphd/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
Luis Perez

Für eine korrekte Funktionsprogrammierung und Verkettung ist eine Erfindung von Array.prototype.insert() wesentlich. Tatsächlich hätte der Splice perfekt sein können, wenn er 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>");

Ok, das obige mit der Array.prototype.splice() mutiert das ursprüngliche Array und einige klagen wie "Sie sollten nicht das ändern, was Ihnen nicht gehört" und das könnte sich als richtig herausstellen. Für das Gemeinwohl möchte ich noch eine Array.prototype.insert() geben, die das ursprüngliche Array nicht verändert. 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));

16
Redu

Ich empfehle die Verwendung von pure JavaScript . In diesem Fall gibt es auch keine Einfügungsmethode in JavaScript, aber wir haben eine Methode, die eine eingebaute Array -Methode ist, die die Arbeit für Sie erledigt. Sie heißt Spleiß ...

Mal sehen, was Splice () ...

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

OK, stellen Sie sich vor, wir haben dieses Array unten:

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

Wir können 3 wie folgt entfernen:

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

Es wird 3 zurückgegeben, aber wenn wir jetzt den Arr überprüfen, haben wir:

[1, 2, 4, 5]

So weit, so gut, aber wie können wir mit Splice ein neues Element zu Array hinzufügen? Lassen Sie uns 3 in den Arr ...

arr.splice(2, 0, 3);

Mal sehen was wir gemacht haben ...

Wir verwenden splice , aber diesmal für das zweite Argument übergeben wir 0 , das heißt, wir möchten kein Element löschen, aber gleichzeitig fügen wir das dritte Argument hinzu, das 3 ist am zweiten Index ...

Sie sollten wissen, dass wir löschen und hinzufügen gleichzeitig können, zum Beispiel können wir jetzt:

arr.splice(2, 2, 3);

Wenn Sie 2 Elemente am Index 2 löschen, fügen Sie 3 am Index 2 hinzu und das Ergebnis lautet:

[1, 2, 3, 5];

Dies zeigt, wie jedes Element in der Verbindung funktioniert:

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

10
Alireza

Obwohl dies bereits beantwortet wurde, füge ich diese Anmerkung für einen alternativen Ansatz hinzu.

Ich wollte eine bekannte Anzahl von Elementen in einem Array an bestimmten Positionen platzieren, da sie von einem "assoziativen Array" (d. H. Einem Objekt) stammen, das definitionsgemäß nicht in einer sortierten Reihenfolge garantiert ist. Ich wollte, dass das resultierende Array ein Array von Objekten ist, die Objekte jedoch in einer bestimmten Reihenfolge im Array sind, da ein Array ihre Reihenfolge garantiert. Also habe ich das gemacht.

Zuerst das Quellobjekt, eine von PostgreSQL abgerufene JSONB-Zeichenfolge. Ich wollte, dass es nach der "order" -Eigenschaft in jedem untergeordneten Objekt sortiert wird.

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

Dann iterieren Sie das Objekt und platzieren Sie die neu erstellten temporären Objekte an den gewünschten Positionen im Array, ohne dass wirklich "Sortieren" 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);
6
Ville

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

6
kind user

Einzelne Elemente an einen bestimmten Index anhängen

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

Mehrere Elemente an einen 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
5
Srikrushna Pal

Ich habe es versucht und es funktioniert gut!

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

Index ist die Position, an der Sie das Element einfügen oder löschen möchten . 0, d. H. Die zweiten Parameter definieren die Anzahl der Elemente aus dem Index, die entfernt werden sollen Item sind die neuen Einträge, die Sie im Array erstellen möchten. Es kann eine oder mehrere sein.

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

Jeder, der immer noch Probleme damit hat und alle Optionen ausprobiert hat, hat sie nie verstanden. Ich teile meine Lösung, dies ist zu berücksichtigen, dass Sie nicht explizit die Eigenschaften Ihres Objekts gegenüber dem Array angeben möchten.

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

Dies ist eine Kombination aus Iteration des Referenz-Arrays und Vergleich mit dem Objekt, das Sie überprüfen möchten. Konvertieren Sie beide in eine Zeichenfolge und iterieren Sie, wenn sie übereinstimmen. Dann kannst du einfach zählen. Dies kann verbessert werden, aber hier habe ich mich niedergelassen. Hoffe das hilft.

2
Clyde

Nutzen Sie die reduzierte Methode wie folgt:

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

Auf diese Weise können wir auf diese Weise ein neues Array zurückgeben (wird ein cooler funktionaler Weg sein - viel besser als Push oder Splice verwenden), wobei das Element am Index eingefügt wird. Wenn der Index größer ist als die Länge des Arrays, wird er eingefügt Am Ende.

2
alejoko

Ein bisschen wie ein älterer Thread, aber ich muss Redu oben zustimmen, da Splice definitiv eine etwas verwirrende Oberfläche hat. Und die Antwort von cdbajorin, dass "es nur ein leeres Array zurückgibt, wenn der zweite Parameter 0 ist. Wenn es größer als 0 ist, gibt es die aus dem Array entfernten Elemente zurück." Die Funktion hat die Absicht, zu verbinden oder, wie bereits von Jakob Keller erwähnt, "sich zu verbinden oder auch zu ändern. Sie haben ein festgelegtes Array, das Sie jetzt ändern und das das Hinzufügen oder Entfernen von Elementen umfassen würde." Der Rückgabewert der Elemente, falls vorhanden, die entfernt wurden, ist bestenfalls umständlich. Und ich stimme zu 100% zu, dass diese Methode besser zum Verketten geeignet gewesen wäre, wenn sie das zurückgegeben hätte, was natürlich erscheint, ein neues Array mit den hinzugefügten gespleißten Elementen. Dann können Sie mit dem zurückgegebenen Array Dinge wie ["19", "17"]. Splice (1,0, "18"). Join ("...") oder was auch immer tun. Die Tatsache, dass es zurückgibt, was entfernt wurde, ist IMHO nur ein bisschen Unsinn. Wenn die Absicht der Methode war, "eine Menge von Elementen auszuschneiden" und das war es vielleicht nur die Absicht. Es sieht so aus, als ob ich, wenn ich nicht weiß, was ich bereits herausschneide, wahrscheinlich wenig Grund habe, diese Elemente herauszuschneiden, nicht wahr? Es wäre besser, wenn es sich wie Concat, Map, Reduce, Slice usw. verhalten würde, bei dem ein neues Array aus dem vorhandenen Array erstellt wird, anstatt das vorhandene Array zu mutieren. Diese sind alle verkettbar und das IS ist ein wichtiges Problem. Es ist eher üblich, Arrays zu manipulieren. Es scheint, als müsse die Sprache in die eine oder andere Richtung gehen und versuchen, sich so weit wie möglich daran zu halten. Javascript ist funktionell und weniger aussagekräftig, es scheint nur eine merkwürdige Abweichung von der Norm zu sein.

1
meem

Hier gibt es 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(" "));
0
M. Hamza Rajput

Hier ist eine Arbeitsfunktion, die ich in einer meiner Anwendungen verwende. 

Dies prüft, ob der Artikel beendet ist

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

Und dann nenne ich es unten. 

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