it-swarm.it

Come inserire un elemento in un array con un indice specifico (JavaScript)?

Sto cercando un metodo di inserimento di array JavaScript, nello stile di:

arr.insert(index, item)

Preferibilmente in jQuery, ma qualsiasi implementazione JavaScript farà a questo punto.

2335
tags2k

Quello che vuoi è la funzione splice sull'oggetto matrice nativo.

arr.splice(index, 0, item); inserirà item in arr nell'indice specificato (eliminando prima 0 elementi, ovvero, è solo un inserto).

In questo esempio creeremo un array e ne aggiungeremo un elemento nell'indice 2:

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

È possibile implementare il metodo Array.insert in questo modo:

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

Quindi puoi usarlo come:

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

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

Oltre alla giunzione, è possibile utilizzare questo approccio che non muterà la matrice originale, ma creerà una nuova matrice con l'elemento aggiunto. Di solito dovresti evitare la mutazione ogni volta che è possibile. Sto usando l'operatore di diffusione ES6 qui.

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]

Questo può essere usato per aggiungere più di un elemento modificando leggermente la funzione per utilizzare l'operatore di resto per i nuovi elementi e diffonderlo anche nel risultato restituito

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

Metodi personalizzati insert metodi

1. Con più argomenti e supporto per il concatenamento

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

Può inserire più elementi (come nativo splice does) e supporta il concatenamento:

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

2. Con gli argomenti di tipo array unendo e concatenando il supporto

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

Può unire gli array dagli argomenti con l'array specificato e supporta anche il concatenamento:

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

Se vuoi inserire più elementi in un array, controlla questa risposta di Overflow dello stack: Un modo migliore per unire un array in un array in javascript

Anche qui ci sono alcune funzioni per illustrare entrambi gli esempi:

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

Finalmente ecco un jsFiddle in modo che tu possa vederlo da solo: http://jsfiddle.net/luisperezphd/Wc8aS/

E questo è il modo in cui usi le funzioni:

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

Per una corretta programmazione funzionale e concatenazione è essenziale l'invenzione di Array.prototype.insert(). In realtà la giuntura poteva essere perfetta se avesse restituito la matrice mutata invece di una matrice vuota totalmente priva di significato. Quindi qui va

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

Bene bene quanto sopra con il Array.prototype.splice() si muta l'array originale e alcuni potrebbero lamentarsi come "non si dovrebbe modificare ciò che non appartiene a te" e che potrebbe rivelarsi giusto. Quindi per il benessere pubblico vorrei dare un altro Array.prototype.insert() che non muta la matrice originale. Eccolo;

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

In questo caso, io raccomando di usare pure JavaScript, anche in JavaScript non c'è alcun metodo di inserimento, ma abbiamo un metodo che è un metodo built-in Array che fa il lavoro per te, si chiama splice ...

Vediamo cosa è splice () ...

Il metodo splice () modifica il contenuto di un array rimuovendo elementi esistenti e/o aggiunta di nuovi elementi.

OK, immagina di avere questa matrice qui sotto:

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

Possiamo rimuovere 3 in questo modo:

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

Restituirà 3, ma se controlliamo l'arrro ora, abbiamo:

[1, 2, 4, 5]

Fin qui, tutto bene, ma come possiamo aggiungere un nuovo elemento all'array usando splice? Riportiamo 3 nell'arr ...

arr.splice(2, 0, 3);

Vediamo cosa abbiamo fatto ...

Usiamo splice di nuovo, ma questa volta per il secondo argomento, passiamo 0, significa che non vogliamo eliminare nessun elemento, ma allo stesso tempo, aggiungiamo il terzo argomento che è 3 che verrà aggiunto al secondo indice ...

Dovresti essere consapevole che possiamo delete e add allo stesso tempo, ad esempio ora possiamo fare:

arr.splice(2, 2, 3);

Che cancellerà 2 elementi all'indice 2, quindi aggiungi 3 all'indice 2 e il risultato sarà:

[1, 2, 3, 5];

Questo mostra come funziona ogni oggetto in splice:

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

10
Alireza

Anche se questo è già stato risolto, sto aggiungendo questa nota per un approccio alternativo.

Volevo collocare un numero noto di elementi in un array, in posizioni specifiche, poiché si trovano fuori da un "array associativo" (cioè un oggetto) che per definizione non è garantito che sia in un ordine ordinato. Volevo che l'array risultante fosse una matrice di oggetti, ma gli oggetti fossero in un ordine specifico nell'array poiché un array garantisce il loro ordine. Quindi l'ho fatto.

Prima l'oggetto sorgente, una stringa JSONB recuperata da PostgreSQL. Volevo che fosse ordinato dalla proprietà "order" in ogni oggetto child.

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

Poiché il numero di nodi nell'oggetto è noto, per prima cosa creo un array con la lunghezza specificata:

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

Quindi, itera l'oggetto, posizionando gli oggetti temporanei appena creati nelle posizioni desiderate nell'array senza realmente alcun "ordinamento" in atto.

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

Un'altra possibile soluzione, con l'utilizzo di 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

Aggiungi un singolo elemento a un indice specifico

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

Aggiungi elementi multipli a un indice specifico

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

Ho provato questo e sta funzionando bene!

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

L'indice è la posizione in cui si desidera inserire o eliminare l'elemento . 0, ovvero i secondi parametri definiscono il numero di elementi dall'indice da rimuovere Item sono le nuove voci che si desidera creare nell'array. Può essere uno o più di uno.

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

Qualcuno che ha ancora problemi con questo e ha provato tutte le opzioni di cui sopra e non ha mai capito. Sto condividendo la mia soluzione, questo è prendere in considerazione che non vuoi dichiarare esplicitamente le proprietà del tuo oggetto rispetto alla matrice.

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

Questa è una combinazione di iterare l'array di riferimento e confrontarlo con l'oggetto che si desidera controllare, convertirli entrambi in una stringa, quindi iterare se corrisponde. Quindi puoi contare. Questo può essere migliorato, ma è qui che mi sono stabilito. Spero che questo ti aiuti.

2
Clyde

Prendendo profitto di ridurre il metodo come segue:

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

Quindi in questo modo possiamo restituire un nuovo array (sarà un modo funzionale cool - molto meglio di usare Push o splice) con l'elemento inserito all'indice, e se l'indice è maggiore della lunghezza dell'array verrà inserito alla fine.

2
alejoko

Ecco una funzione di lavoro che utilizzo in una delle mie applicazioni. 

Questo controlla se la voce esce

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

E poi lo chiamo di seguito. 

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