Remplacer l'élément à la position spécifique dans un tableau sans mutation il

Comment l'opération suivante se faire sans la mutation de la matrice:

let array = ['item1'];
console.log(array); //['item1']
array[2] = 'item2'; //array is mutated
console.log(array); //['item1', undefined, 'item2']

Dans le code ci-dessus, array variable est muté. Comment puis-je effectuer la même opération sans la mutation de la matrice?

Si vous voulez quelque chose de rapide stackoverflow.com/a/47943825/1480391 ,;)

OriginalL'auteur Bless | 2016-06-27

  1. 43

    Vous pouvez utiliser Object.assign:

    Object.assign([], array, {2: newItem});
    Pas sûr de savoir comment ces structures de partage sont mis en œuvre. Mais la tranche des copies de toute la gamme, de sorte que le cas est également en O(n).
    Toute la documentation sur Object.assign?
    Cela dit, la copie d'un tableau avec slice pourrait être plus rapide car length est copié en premier, afin de preallocation est possible. Object.assign(array.slice(), {2: newItem}); est une autre possibilité.
    Notez que cela ne fonctionne pas si vous ne connaissez que l'indice au moment de l'exécution (ce qui est le cas le plus fréquent). Object.assign([], array, { i: newItem }) permettra de définir réellement la propriété i de l'objet array au lieu de définir la valeur à l'indice i.
    Il peut travailler, vous avez juste besoin d'utiliser cette syntaxe: Object.assign([], array, { [i]: newItem })

    OriginalL'auteur Oriol

  2. 6

    Bien, techniquement, ce ne serait pas remplacement comme il n'est pas un élément à l'index que vous êtes en train de changer.

    Oeil à la façon dont il est traité en Clojure—un langage qui se construit autour d'canonique d'implémentation de immuable des structures de données.

    (assoc [1] 2 3)
;; IndexOutOfBoundsException

    Non seulement il échoue, mais il bloque trop. Ces structures de données sont conçus pour être aussi robuste que possible, et quand vous revenez à l'égard de ces types d'erreurs, il n'est généralement pas parce que vous avez découvert un cas limite, mais il est plus probable que vous utilisez la mauvaise structure de données.

    Si vous êtes de se retrouver avec des matrices creuses, puis envisager de modélisation avec des objets ou des cartes à la place.

    let items = { 0: 1 };
{ ...items, 2: 3 };
//=> { 0: 1, 2: 3 }

let items = new Map([ [0, 1] ]);
items(2, 3);
//=> Map {0 => 1, 2 => 3}

    Cependant, la Carte est fondamentalement mutable structure de données, de sorte que vous aurez besoin de swap pour un immuable variante avec une bibliothèque comme Immutable.js ou Mori.

    let items = Immutable.Map([ [0, 2] ]);
items.set(2, 3);
//=> Immutable.Map {0 => 1, 2 => 3}

let items = mori.hashMap();
mori.assoc(items, 2, 3);
//=> mori.hashMap {0 => 1, 2 => 3}

    Bien sûr, il pourrait être une bonne raison de vouloir utiliser du JavaScript tableaux, voici donc une solution pour faire bonne mesure.

    function set(arr, index, val) {
  if(index < arr.length) {
    return [
      ...arr.slice(0, position),
      val,
      ...arr.slice(position + 1)
    ];
  } else {
    return [
      ...arr,
      ...Array(index - arr.length),
      val
    ];
  }
}

    OriginalL'auteur Dan Prince

  3. 6

    Vous pouvez simplement mettre en place un nouveau tableau en tant que tel:

    const newItemArray = array.slice();

    Et puis définissez la valeur de l'indice sur lequel vous souhaitez avoir une valeur pour.

    newItemArray[position] = newItem

    et de retour que. Les valeurs de l'index entre les deux auront undefined.

    Ou évidemment l'alternative serait:

    Object.assign([], array, {<position_here>: newItem});

    OriginalL'auteur Elod Szopos

  4. 3

    La rapide façon

    function replaceAt(array, index, value) {
  const ret = array.slice(0);
  ret[index] = value;
  return ret;
}

    Voir le JSPerf (grâce à @Bénisse)

    Related posts:

    Oui. +1. Voici une perf de la comparaison, jsperf.com/...

    OriginalL'auteur Yves M.

  5. 1

    Voici comment j'aimerais le faire:

    function update(array, newItem, atIndex) {
    return array.map((item, index) => index === atIndex ? newItem : item);
}

    Généralement, la Matrice de propagation opération produit quelques temporaire des tableaux pour vous, mais map n'est pas, de sorte qu'il peut être plus rapide. Vous pouvez aussi regarder cette discussion comme une référence

    Sympa mais le redux discussion sur la suppression d'un élément, je pense que le moyen le plus rapide pour remplacer un élément est stackoverflow.com/a/47943825/1480391 😉

    OriginalL'auteur just-boris