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?


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
}

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

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.


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;

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;

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;

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'

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


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

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

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]

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']

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


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

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)

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


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;

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

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

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.

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]

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


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);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.