Comment remplacer un élément d'un tableau par Javascript?

315

Chaque élément de ce tableau est un certain nombre.

var items = Array(523,3452,334,31, ...5346);

Comment puis-je remplacer un certain nombre avec un tableau par un nouveau?

Par exemple, nous voulons remplacer 3452 par 1010, comment ferions-nous cela?

James
la source
5
Existe-t-il plusieurs instances de 3452 à modifier ou une seule?
mellamokb
53
Il y aura une instance, si les forces obscures n'en ajoutent pas une de plus.
James
2
Quand il y a un remplacement de chaîne, pourquoi n'y a-t-il pas de replaceméthode pour les tableaux?
lifebalance

Réponses:

465
var index = items.indexOf(3452);

if (index !== -1) {
    items[index] = 1010;
}

Il est également recommandé de ne pas utiliser la méthode constructeur pour initialiser vos tableaux. Utilisez plutôt la syntaxe littérale:

var items = [523, 3452, 334, 31, 5346];

Vous pouvez également utiliser l' ~opérateur si vous êtes en JavaScript laconique et que vous souhaitez raccourcir la -1comparaison:

var index = items.indexOf(3452);

if (~index) {
    items[index] = 1010;
}

Parfois, j'aime même écrire une containsfonction pour résumer cette vérification et faciliter la compréhension de ce qui se passe. Ce qui est génial, c'est que cela fonctionne sur les tableaux et les chaînes à la fois:

var contains = function (haystack, needle) {
    return !!~haystack.indexOf(needle);
};

// can be used like so now:
if (contains(items, 3452)) {
    // do something else...
}

En commençant par ES6 / ES2015 pour les chaînes et proposé pour ES2016 pour les tableaux, vous pouvez plus facilement déterminer si une source contient une autre valeur:

if (haystack.includes(needle)) {
    // do your thing
}
Eli
la source
9
Juste pensé que je donnerais une version ES6 de contains: var contains = (a, b) => !!~a.indexOf(b): P
Florrie
1
@geon pouvez-vous s'il vous plaît expliquer les inconvénients?
Karl Taylor
1
@KarlTaylor Ce n'est tout simplement pas très idiomatique. Si vous pouvez utiliser ES2017, utilisez Array.prototype.includesplutôt.
geon
1
puis-je utiliser IndexOf avec des éléments d'objet?
ValRob
2
@ValRob non, mais vous pouvez utiliser inpour voir si un objet a une clé (par exemple, 'property' in obj), ou vous pouvez également parcourir les valeurs d'un objet avec Object.values(obj).forEach(value => {}).
Eli
95

La Array.indexOf()méthode remplacera la première instance. Pour obtenir chaque instance, utilisez Array.map():

a = a.map(function(item) { return item == 3452 ? 1010 : item; });

Bien sûr, cela crée un nouveau tableau. Si vous voulez le faire sur place, utilisez Array.forEach():

a.forEach(function(item, i) { if (item == 3452) a[i] = 1010; });
gilly3
la source
7
Pour tous ceux qui lisent ceci. Map () et forEach () sont des ajouts plus récents à la spécification Javascript et ne sont pas présents dans certains navigateurs plus anciens. Si vous souhaitez les utiliser, vous devrez peut-être ajouter du code de compatibilité pour les navigateurs plus anciens: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
jfriend00
2
Array.indexOf()a été introduit en même temps que map()et forEach(). Si vous prenez en charge IE8 ou une version antérieure, et que vous n'utilisez pas de cale pour ajouter du support, utilisez plutôt la réponse de mellamokb .
gilly3
array.map renvoie également l'index dans leur deuxième paramètre a = a.map (fonction (élément, clé) {if (élément == 3452) a [clé] = 1010;});
Ricky sharma
38

Ma solution suggérée serait:

items.splice(1, 1, 1010);

L'opération d'épissage supprimera 1 élément, en commençant à la position 1 dans le tableau (c'est-à-dire 3452), et le remplacera par le nouvel élément 1010.

Shimon Agassi
la source
6
Cela est trompeur car vous indiquez que le premier paramètre signifie que l' 1élément sera supprimé alors qu'en fait le premier paramètre signifie que l'opération a lieu à l'index 1. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
InsOp
28

Utilisez indexOf pour rechercher un élément.

var i = items.indexOf(3452);
items[i] = 1010;
Tesserex
la source
1
que se passe-t-il s'il ne s'attend pas à l'élément. s'il est trouvé, il renverra l'index de l'élément trouvé mais sinon, il renverra -1. et il va définir cette valeur à -1. veuillez vous référer à jsbin.com/wugatuwora/edit?js,console
surekha shelake
23

Facile à réaliser avec une forboucle.

for (var i = 0; i < items.length; i++)
    if (items[i] == 3452)
        items[i] = 1010;
mellamokb
la source
9
Facilement, mais pas nécessairement efficacement;)
Eli
7
@Eli: OP ne savait pas s'ils remplaçaient une ou plusieurs instances. Ma solution gère plusieurs instances.
mellamokb
@Eli Si quoi que ce soit, ce serait la réponse la plus efficace publiée pour remplacer toutes les
occurrences
15

Vous pouvez modifier n'importe quel nombre de la liste à l'aide d'index

par exemple :

items[0] = 5;
items[5] = 100;
VirtualTroll
la source
11

Si vous utilisez un objet complexe (ou même simple) et que vous pouvez utiliser es6, Array.prototype.findIndexc'est un bon. Pour le tableau OP, ils pourraient faire,

const index = items.findIndex(x => x === 3452)
items[index] = 1010

Pour les objets plus complexes, cela brille vraiment. Par exemple,

const index = 
    items.findIndex(
       x => x.jerseyNumber === 9 && x.school === 'Ohio State'
    )

items[index].lastName = 'Utah'
items[index].firstName = 'Johnny'
Yatrix
la source
6

Le remplacement peut se faire sur une seule ligne:

var items = Array(523, 3452, 334, 31, 5346);

items[items.map((e, i) => [i, e]).filter(e => e[1] == 3452)[0][0]] = 1010

console.log(items);

Ou créez une fonction à réutiliser:

Array.prototype.replace = function(t, v) {
    if (this.indexOf(t)!= -1)
        this[this.map((e, i) => [i, e]).filter(e => e[1] == t)[0][0]] = v;
  };

//Check
var items = Array(523, 3452, 334, 31, 5346);
items.replace(3452, 1010);
console.log(items);

Artee
la source
6

Manière ES6 :

const items = Array(523, 3452, 334, 31, ...5346);

Nous voulons remplacer 3452par 1010, solution:

const newItems = items.map(item => item === 3452 ? 1010 : item);

Certes, la question se pose depuis de nombreuses années et pour l'instant je préfère simplement utiliser une solution immuable , c'est vraiment génial pour ReactJS.

Pour une utilisation fréquente, j'offre la fonction ci-dessous:

const itemReplacer = (array, oldItem, newItem) =>
  array.map(item => item === oldItem ? newItem : item);
AmerllicA
la source
4

Première méthode

Meilleur moyen en une seule ligne pour remplacer ou mettre à jour un élément du tableau

array.splice(array.indexOf(valueToReplace), 1, newValue)

Par exemple:

let items = ['JS', 'PHP', 'RUBY'];

let replacedItem = items.splice(items.indexOf('RUBY'), 1, 'PYTHON')

console.log(replacedItem) //['RUBY']
console.log(items) //['JS', 'PHP', 'PYTHON']

Deuxième méthode

Une autre manière simple de faire la même opération est:

items[items.indexOf(oldValue)] = newValue
Goms
la source
3

Le moyen le plus simple consiste à utiliser certaines bibliothèques comme underscorejs et la méthode map.

var items = Array(523,3452,334,31,...5346);

_.map(items, function(num) {
  return (num == 3452) ? 1010 : num; 
});
=> [523, 1010, 334, 31, ...5346]
mrded
la source
2
Le genre de souhait que lodash / underscore fournisse replacemaintenant un tableau-conscient ..._.replace([1, 2, 3], 2, 3);
Droogans
3

La manière immuable de remplacer l'élément dans la liste en utilisant les opérateurs et la .sliceméthode de propagation ES6 .

const arr = ['fir', 'next', 'third'], item = 'next'

const nextArr = [
  ...arr.slice(0, arr.indexOf(item)), 
  'second',
  ...arr.slice(arr.indexOf(item) + 1)
]

Vérifiez que cela fonctionne

console.log(arr)     // [ 'fir', 'next', 'third' ]
console.log(nextArr) // ['fir', 'second', 'third']
Purkhalo Alex
la source
2
var items = Array(523,3452,334,31,5346);

Si vous connaissez la valeur, utilisez-la,

items[items.indexOf(334)] = 1010;

Si vous voulez savoir si cette valeur est présente ou non, utilisez,

var point = items.indexOf(334);

if (point !== -1) {
    items[point] = 1010;
}

Si vous connaissez le lieu (position), utilisez directement,

items[--position] = 1010;

Si vous voulez remplacer quelques éléments et que vous savez que la position de départ ne signifie que,

items.splice(2, 1, 1010, 1220);

pour en savoir plus sur .splice

KarSho
la source
1
var index = Array.indexOf(Array value);
        if (index > -1) {
          Array.splice(index, 1);
        }

à partir d'ici, vous pouvez supprimer une valeur particulière du tableau et en fonction du même index, vous pouvez insérer une valeur dans le tableau.

 Array.splice(index, 0, Array value);
Gunjan Kumar
la source
1

Eh bien, si quelqu'un s'intéresse à la façon de remplacer un objet de son index dans un tableau, voici une solution.

Trouvez l'index de l'objet par son id:

const index = items.map(item => item.id).indexOf(objectId)

Remplacez l'objet à l'aide de la méthode Object.assign ():

Object.assign(items[index], newValue)
faye.babacar78
la source
1

La réponse de @ gilly3 est excellente.

Comment étendre cela pour un tableau d'objets

Je préfère la manière suivante pour mettre à jour le nouvel enregistrement mis à jour dans mon tableau d'enregistrements lorsque j'obtiens des données du serveur. Il garde l'ordre intact et assez simple sur une doublure.

users = users.map(u => u.id !== editedUser.id ? u : editedUser);

var users = [
{id: 1, firstname: 'John', lastname: 'Sena'},
{id: 2, firstname: 'Serena', lastname: 'Wilham'},
{id: 3, firstname: 'William', lastname: 'Cook'}
];

var editedUser = {id: 2, firstname: 'Big Serena', lastname: 'William'};

users = users.map(u => u.id !== editedUser.id ? u : editedUser);

console.log('users -> ', users);

muasif80
la source
0

Tout d'abord, réécrivez votre tableau comme ceci:

var items = [523,3452,334,31,...5346];

Ensuite, accédez à l'élément du tableau via son numéro d'index. La formule pour déterminer le numéro d'index est:n-1

Pour remplacer le premier élément (n=1)du tableau, écrivez:

items[0] = Enter Your New Number;

Dans votre exemple, le nombre 3452est en deuxième position (n=2). Donc, la formule pour déterminer le numéro d'index est 2-1 = 1. Écrivez donc le code suivant pour le remplacer 3452par 1010:

items[1] = 1010;
Anthony Levato
la source
0

Voici la réponse de base transformée en fonction réutilisable:

function arrayFindReplace(array, findValue, replaceValue){
    while(array.indexOf(findValue) !== -1){
        let index = array.indexOf(findValue);
        array[index] = replaceValue;
    }
}
JohnP2
la source
1
let index; while ((index = indexOf (findValue))! == -1) pour éviter le double indexOf (findValue)
Juan R
0

J'ai résolu ce problème en utilisant des boucles for et en itérant à travers le tableau d'origine et en ajoutant les positions des arreas correspondants à un autre tableau, puis en parcourant ce tableau et en le modifiant dans le tableau d'origine, puis je le renvoie, j'ai utilisé la fonction de flèche et une fonction régulière fonctionnerait aussi.

var replace = (arr, replaceThis, WithThis) => {
    if (!Array.isArray(arr)) throw new RangeError("Error");
    var itemSpots = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == replaceThis) itemSpots.push(i);
    }

    for (var i = 0; i < itemSpots.length; i++) {
        arr[itemSpots[i]] = WithThis;
    }

    return arr;
};
J. Svec
la source
0
presentPrompt(id,productqty) {
    let alert = this.forgotCtrl.create({
      title: 'Test',
      inputs: [
        {
          name: 'pickqty',
          placeholder: 'pick quantity'
        },
        {
          name: 'state',
          value: 'verified',
          disabled:true,
          placeholder: 'state',

        }
      ],
      buttons: [
        {
          text: 'Ok',
          role: 'cancel',
          handler: data => {

            console.log('dataaaaname',data.pickqty);
            console.log('dataaaapwd',data.state);


          for (var i = 0; i < this.cottonLists.length; i++){

            if (this.cottonLists[i].id == id){
                this.cottonLists[i].real_stock = data.pickqty;

            }
          }

          for (var i = 0; i < this.cottonLists.length; i++){

            if (this.cottonLists[i].id == id){
              this.cottonLists[i].state = 'verified';   

          }
        }
            //Log object to console again.
            console.log("After update: ", this.cottonLists)
            console.log('Ok clicked');
          }
        },

      ]
    });
    alert.present();
  }

As per your requirement you can change fields and array names.
thats all. Enjoy your coding.
mahendren
la source
0

La façon la plus simple est la suivante.

var items = Array(523,3452,334,31, 5346);
var replaceWhat = 3452, replaceWith = 1010;
if ( ( i = items.indexOf(replaceWhat) ) >=0 ) items.splice(i, 1, replaceWith);

console.log(items);
>>> (5) [523, 1010, 334, 31, 5346]
Vladimir Prudnikov
la source
ne fonctionne pas pour les éléments trouvés à l'index 0 replaceWhat = 523, replaceWith = 999999ne donne pas de résultats corrects
Anthony Chung
0

Voici une doublure. Il suppose que l'élément sera dans le tableau.

var items = [523, 3452, 334, 31, 5346]
var replace = (arr, oldVal, newVal) => (arr[arr.indexOf(oldVal)] = newVal, arr)
console.log(replace(items, 3452, 1010))

Alex Cory
la source
0

Si vous voulez un simple revêtement de sintax au sucre, vous pouvez simplement:

(elements = elements.filter(element => element.id !== updatedElement.id)).push(updatedElement);

Comme:

let elements = [ { id: 1, name: 'element one' }, { id: 2, name: 'element two'} ];
const updatedElement = { id: 1, name: 'updated element one' };

Si vous n'avez pas d'identifiant, vous pouvez stringifier l'élément comme:

(elements = elements.filter(element => JSON.stringify(element) !== JSON.stringify(updatedElement))).push(updatedElement);
Marco Silva
la source