Hoe voeg ik een item in een array in met een specifieke index (JavaScript)?

Ik ben op zoek naar een JavaScript-array-invoegmethode, in de stijl van:

arr.insert(index, item)

Bij voorkeur in jQuery, maar op dit moment is elke JavaScript-implementatie voldoende.


Antwoord 1, autoriteit 100%

Wat u zoekt is de splicefunctie op het native array-object.

arr.splice(index, 0, item);zal iteminvoegen in arrop de gespecificeerde index(eerst 0items verwijderen, dat wil zeggen, het is slechts een invoeging).

In dit voorbeeld zullen we een array maken en er een element aan toevoegen in index 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

Antwoord 2, autoriteit 6%

U kunt de methode Array.insertals volgt implementeren:

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

Dan kun je het als volgt gebruiken:

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

Antwoord 3, autoriteit 3%

Anders dan splice kun je deze benadering gebruiken die de originele array niet muteert, maar een nieuwe array maakt met het toegevoegde item. Meestal moet u mutaties zoveel mogelijk vermijden. Ik gebruik hier de 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]

Antwoord 4

Aangepaste array insertmethoden

1. Met meerdere argumenten en ondersteuning voor chaining

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

Het kan meerdere elementen invoegen (als native splicedoet) en ondersteunt chaining:

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

2. Met ondersteuning voor het samenvoegen en koppelen van argumenten van het array-type

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

Het kan arrays van de argumenten samenvoegen met de gegeven array en ondersteunt ook chaining:

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


Antwoord 5

Als je meerdere elementen tegelijk in een array wilt invoegen, bekijk dan dit Stack Overflow-antwoord: Een betere manier om een array in een array in javascript te splitsen

Hier zijn ook enkele functies om beide voorbeelden te illustreren:

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

Eindelijk is hier een jsFiddle zodat je het zelf kunt zien: http://jsfiddle.net/luisperezphd/ Wc8aS/

En zo gebruik je de functies:

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

6

Voor de juiste functionele programmering en kettingdoeleinden van een uitvinding van Array.prototype.insert()is essentieel. Eigenlijk had splice perfect kunnen zijn als het de gemuteerde array had teruggestuurd in plaats van een volledig zinloze lege array. Dus hier gaat het

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

7

Voeg een enkel element toe bij een specifieke index

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

Voeg meervoudig element toe bij een specifieke index

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

Antwoord 8

Oplossingen & Prestaties

Vandaag (2020.04.24) voer ik tests uit voor gekozen oplossingen voor grote en kleine arrays. Ik heb ze getest op MacOs High Sierra 10.13.6 op Chrome 81.0, Safari 13.1, Firefox 75.0.

Conclusies

Voor alle browsers

  • verrassend genoeg voor kleine arrays zijn non-in-place oplossingen op basis van sliceen reduce(D,E,F) meestal 10x-100x sneller dan in-place oplossingen
  • voor grote arrays waren de in-place-oplossingen op basis van splice(AI,BI,CI) het snelst (soms ~100x – maar dit hangt af van de grootte van de array)
  • voor kleine arrays was BI-oplossing het langzaamst
  • voor grote arrays was E-oplossing het langzaamst

Details

De tests waren verdeeld in twee groepen: in-place oplossingen (AI,BI,CI) en non-in-place oplossingen (D,E,F) en werden uitgevoerd voor twee gevallen

  • test voor array met 10 elementen – u kunt het HIER
  • uitvoeren

  • test voor array met 1.000.000 elementen – u kunt het HIER
  • uitvoeren

Geteste code wordt weergegeven in onderstaand fragment

jsfiddle


Antwoord 9

Hier zijn twee manieren:

const array = [ 'My', 'name', 'Hamza' ];
array.splice(2, 0, 'is');
console.log("Method 1 : ", array.join(" "));

Antwoord 10

Array#splice()is de manier om go, tenzij je echt wilt voorkomen dat de array wordt gemuteerd. Gegeven 2 arrays arr1en arr2, kun je als volgt de inhoud van arr2invoegen in arr1na het eerste element :

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)

Antwoord 11

Een andere mogelijke oplossing, met gebruik van 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))

Antwoord 12

Hoewel dit al is beantwoord, voeg ik deze opmerking toe voor een alternatieve benadering.

Ik wilde een bekend aantalitems in een array plaatsen, op specifieke posities, aangezien ze afkomstig zijn van een “associatieve array” (dwz een object) waarvan per definitie niet gegarandeerd is in een gesorteerde volgorde. Ik wilde dat de resulterende array een array van objecten zou zijn, maar de objecten moesten in een specifieke volgorde in de array staan, omdat een array hun volgorde garandeert. Dus ik deed dit.

Eerst het bronobject, een JSONB-tekenreeks die is opgehaald uit PostgreSQL. Ik wilde het gesorteerd hebben op de “order” eigenschap in elk onderliggend object.

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

Aangezien het aantal knooppunten in het object bekend is, maak ik eerst een array met de opgegeven lengte:

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

En herhaal dan het object en plaats de nieuw gemaakte tijdelijke objecten op de gewenste locaties in de array zonder dat er echt wordt “gesorteerd”.

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

Antwoord 13

Iedereen die hier nog steeds problemen mee heeft en alle bovenstaande opties heeft geprobeerd en het nooit heeft gekregen. Ik deel mijn oplossing, dit is om er rekening mee te houden dat je de eigenschappen van je object versus de array niet expliciet wilt vermelden.

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

Dit is een combinatie van het herhalen van de referentiearray en het vergelijken met het object dat u wilde controleren, beide omzetten in een tekenreeks en vervolgens herhalen als het overeenkwam. Dan kan je gewoon rekenen. Dit kan worden verbeterd, maar hier heb ik me gevestigd. Ik hoop dat dit helpt.


Antwoord 14

Ik heb dit geprobeerd en het werkt prima!

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

Index is de positie waar u het element wilt invoegen of verwijderen.
0 d.w.z. de tweede parameter definieert het aantal elementen uit de index dat moet worden verwijderd
item zijn de nieuwe items die u in de array wilt maken. Het kan een of meer dan een zijn.

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

Antwoord 15

Profiteren van de reduceermethode als volgt:

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

Dus op deze manier kunnen we een nieuwe array retourneren (zal een coole functionele manier zijn – veel beter dan push of splice gebruiken) met het element ingevoegd bij index, en als de index groter is dan de lengte van de array wordt aan het einde ingevoegd.


Antwoord 16

Onveranderlijke invoeging

splice-methode is zeker het beste antwoord als u in-place in een array moet invoegen.

Als u echter op zoek bent naar een onveranderlijke functie die een nieuwe bijgewerkte array retourneert in plaats van de oorspronkelijke array te muteren bij het invoegen, kunt u de volgende functie gebruiken.

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

Antwoord 17

Hier is een werkende functie die ik gebruik in een van mijn applicaties.

Dit controleert of het item wordt afgesloten

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

En dan noem ik het hieronder.

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

Antwoord 18

Een beetje een oudere thread, maar ik ben het eens met Redu hierboven omdat splice zeker een beetje een verwarrende interface heeft. En het antwoord van cdbajorin dat “het alleen een lege array retourneert als de tweede parameter 0 is. Als het groter is dan 0, retourneert het de items die uit de array zijn verwijderd” is, hoewel nauwkeurig, het bewijs van het punt. De bedoeling van de functie is om te splitsen of, zoals eerder gezegd door Jakob Keller, “om mee te doen of te verbinden, ook om te veranderen. Je hebt een gevestigde array die je nu aan het veranderen bent, waarbij elementen worden toegevoegd of verwijderd…”. retourwaarde van de elementen, indien aanwezig, die zijn verwijderd, is op zijn best onhandig. En ik ben het er 100% mee eens dat deze methode beter geschikt had kunnen zijn voor chaining als het had teruggegeven wat natuurlijk lijkt, een nieuwe array met de gesplitste elementen toegevoegd. Dan zou je dingen kunnen doen als [“19”, “17”].splice(1,0,”18″).join(“…”) of wat je maar wilt met de geretourneerde array. Het feit dat het teruggeeft wat is verwijderd, is gewoon een beetje onzin IMHO. Als de bedoeling van de methode was om “een reeks elementen weg te snijden” en dat was misschien de enige bedoeling. Het lijkt erop dat als ik al niet weet wat ik wegknip, ik waarschijnlijk weinig reden heb om die elementen weg te laten, nietwaar? Het zou beter zijn als het zich zou gedragen als concat, map, reduce, slice, enz. waarbij een nieuwe array wordt gemaakt van de bestaande array in plaats van de bestaande array te muteren. Die zijn allemaal ketenbaar, en dat IS een belangrijk probleem. Het is vrij gebruikelijk om array-manipulatie te ketenen. Het lijkt erop dat de taal de ene of de andere kant op moet gaan en er zoveel mogelijk aan proberen vast te houden. Omdat Javascript functioneel en minder declaratief is, lijkt het gewoon een vreemde afwijking van de norm.


Antwoord 19

ik hou van weinig veiligheid en ik gebruik dit

  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 )

Other episodes