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

arr.insert(index, item)

Am besten in jQuery, aber jede JavaScript-Implementierung reicht an dieser Stelle aus.

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

arr.splice(index, 0, item);einfügen wird itemin arram angegebenen Index (Löschen 0Artikel zuerst, das heißt, es ist nur ein Einsatz).

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

Sie können die Array.insertMethode 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' ]

Anders als beim Spleißen können Sie diesen Ansatz verwenden, bei dem das ursprüngliche Array nicht mutiert wird, sondern ein neues Array mit dem hinzugefügten Element erstellt wird. Sie sollten Mutationen nach Möglichkeit vermeiden, wann immer dies möglich ist. 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 ein Element hinzuzufügen, indem Sie die Funktion ein wenig optimieren, um den Restoperator für die neuen Elemente zu verwenden, und dies auch im zurückgegebenen Ergebnis 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]

Benutzerdefinierte Array- insertMethoden

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 (wie es native splicetut) und unterstützt die Verkettung:

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

2. Unterstützung beim Zusammenführen und Verketten von Argumenten vom Typ Array

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

Wenn Sie mehrere Elemente gleichzeitig in ein Array einfügen möchten, lesen Sie diese Antwort zum Stapelüberlauf: Eine bessere Möglichkeit, ein Array in Javascript in ein Array zu verbinden

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 eine jsFiddle, damit Sie sie 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);

Für eine ordnungsgemäße funktionale Programmierung und Verkettung ist eine Erfindung von Array.prototype.insert()wesentlich. Tatsächlich hätte der Spleiß perfekt sein können, wenn er das mutierte Array anstelle eines völlig bedeutungslosen leeren Arrays zurückgegeben hätte. Also los geht's

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

Ich empfehle in diesem Fall die Verwendung von reinem JavaScript. Es gibt auch keine Einfügemethode in JavaScript, aber wir haben eine Methode, die eine integrierte Array- Methode ist, die die Arbeit für Sie erledigt. Sie heißt Spleiß ...

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, stellen Sie sich vor, wir haben dieses Array unten:

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

Wir können so entfernen 3:

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

Es wird 3 zurückgeben, aber wenn wir die Arr jetzt überprüfen, haben wir:

[1, 2, 4, 5]

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

arr.splice(2, 0, 3);

Mal sehen, was wir getan haben ...

Wir verwenden wieder Spleiß , aber dieses Mal übergeben wir für das zweite Argument 0 , was bedeutet, dass wir kein Element löschen möchten, aber gleichzeitig fügen wir das dritte Argument hinzu, nämlich 3, das beim zweiten Index hinzugefügt wird ...

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

Dadurch werden 2 Elemente bei Index 2 gelöscht , dann 3 bei Index 2 hinzugefügt und das Ergebnis lautet:

[1, 2, 3, 5];

Dies zeigt, wie jedes Element im Spleiß funktioniert:

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

Fügen Sie ein einzelnes Element an einen bestimmten Index an

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

Hängen Sie mehrere Elemente an einen bestimmten Index an

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

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

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

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

Ich wollte eine bekannte Anzahl von Elementen in einem Array an bestimmten Positionen platzieren, da sie aus einem "assoziativen Array" (dh einem Objekt) stammen, das per Definition nicht garantiert in einer sortierten Reihenfolge vorliegt. Ich wollte, dass das resultierende Array ein Array von Objekten ist, aber die Objekte sollten sich in einer bestimmten Reihenfolge im Array befinden, da ein Array ihre Reihenfolge garantiert. Also habe ich das gemacht.

Zuerst das Quellobjekt, eine aus PostgreSQL abgerufene JSONB-Zeichenfolge. Ich wollte, dass es in jedem untergeordneten Objekt nach der Eigenschaft "order" 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);

Anschließend iterieren Sie das Objekt und platzieren die neu erstellten temporären Objekte an den gewünschten Stellen im Array, ohne dass wirklich "sortiert" wird.

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

Jeder, der immer noch Probleme mit diesem hat und alle oben genannten Optionen ausprobiert hat und es nie bekommen hat. Ich teile meine Lösung, um zu berücksichtigen, dass Sie die Eigenschaften Ihres Objekts gegenüber dem Array nicht explizit 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 Referenzarrays und Vergleich mit dem Objekt, das Sie überprüfen möchten. Konvertieren Sie beide in eine Zeichenfolge und iterieren Sie sie, wenn sie übereinstimmt. Dann können Sie einfach zählen. Dies kann verbessert werden, aber hier habe ich mich niedergelassen. Hoffe das hilft.

Profitieren Sie von der Reduktionsmethode 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 ein neues Array zurückgeben (dies ist eine coole funktionale Methode - viel besser als Push oder Splice), wobei das Element am Index eingefügt wird. Wenn der Index größer als die Länge des Arrays ist, wird es eingefügt Am Ende.

Array#splice()ist der richtige Weg, es sei denn, Sie möchten wirklich vermeiden, dass das Array mutiert. Gegeben zwei Arrays arr1und arr2hier, wie Sie den Inhalt einfügen würden arr2in arr1nach dem ersten Elemente:

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 Bedenken haben, das Array zu mutieren (z. B. wenn Sie Immutable.js verwenden), können Sie stattdessen verwenden slice(), nicht zu verwechseln splice()mit a 'p'.

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

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 dh der zweite Parameter definiert die Anzahl der Elemente aus dem zu entfernenden Indexelement. Dies sind die neuen Einträge, die Sie im Array vornehmen möchten. Es kann einer oder mehrere sein.

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

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

Dies prüft, ob das Element beendet wird

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: 

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 "ein leeres Array nur zurückgegeben wird, wenn der zweite Parameter 0 ist. Wenn es größer als 0 ist, werden die aus dem Array entfernten Elemente zurückgegeben", beweist dies den Punkt, obwohl es genau ist. Die Absicht der Funktion ist es, zu verbinden oder, wie bereits von Jakob Keller gesagt, "zu verbinden oder zu verbinden, auch zu ändern. Sie haben ein etabliertes Array, das Sie jetzt ändern, was das Hinzufügen oder Entfernen von Elementen beinhalten 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 zur Verkettung 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önnten Sie Dinge wie ["19", "17"]. Splice (1,0, "18"). Join ("...") oder was auch immer Sie mit dem zurückgegebenen Array mögen. Die Tatsache, dass es zurückgibt, was entfernt wurde, ist meiner Meinung nach nur ein Unsinn. Wenn die Absicht der Methode darin bestand, "eine Reihe von Elementen auszuschneiden", und das war vielleicht nur die Absicht. Es scheint, als ob ich, wenn ich nicht weiß, was ich bereits ausschneide, wahrscheinlich wenig Grund habe, diese Elemente auszuschneiden, nicht wahr? Es wäre besser, wenn es sich wie Concat, Map, Reduce, Slice usw. verhalten würde, wenn ein neues Array aus dem vorhandenen Array erstellt wird, anstatt das vorhandene Array zu mutieren. Diese sind alle verkettbar, und das ist ein wichtiges Problem. Es ist ziemlich üblich, Array-Manipulationen zu verketten. Es scheint, als müsste die Sprache in die eine oder andere Richtung gehen und versuchen, so weit wie möglich daran festzuhalten. Da Javascript funktional und weniger aussagekräftig ist, scheint es nur eine seltsame Abweichung von der Norm zu sein.

Performance

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

Schlussfolgerungen

Für alle Browser

• überraschenderweise sind bei kleinen Arrays nicht vorhandene Lösungen, die auf sliceund reduce(D, E, F) basieren, normalerweise 10x-100x schneller als in-place-Lösungen
• Bei großen Arrays waren die auf splice(AI, BI, CI) basierenden In-Place-Lösungen am schnellsten (manchmal ~ 100x - dies hängt jedoch von der Arraygröß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

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

• Test für Array mit 10 Elementen - Sie können es HIER ausführen
• Test für Array mit 1.000.000 Elementen - Sie können es HIER ausführen

Der getestete Code ist im folgenden Snippet dargestellt

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 kleine Arrays auf Chrom sind unten aufgeführt