Come sostituire un elemento in un array con Javascript?


315

Ogni elemento di questo array è un numero.

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

Come posso sostituire un numero con l'array con uno nuovo?

Ad esempio, vogliamo sostituire 3452 con 1010, come potremmo farlo?


5
Esistono più istanze di 3452 che devono essere modificate o solo una?
mellamokb,

53
Ci sarà un'istanza, se le forze oscure non ne aggiungeranno un'altra.
James,

2
Quando è presente la sostituzione della stringa, perché non esiste un replacemetodo per le matrici?
lifebalance

Risposte:


464
var index = items.indexOf(3452);

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

Inoltre, si consiglia di non utilizzare il metodo di costruzione per inizializzare le matrici. Invece, usa la sintassi letterale:

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

È inoltre possibile utilizzare l' ~operatore se si è in JavaScript conciso e si desidera abbreviare il -1confronto:

var index = items.indexOf(3452);

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

A volte mi piace persino scrivere una containsfunzione per sottrarre questo controllo e rendere più facile capire cosa sta succedendo. La cosa fantastica è che funziona su array e stringhe:

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

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

A partire da ES6 / ES2015 per le stringhe e proposto per ES2016 per le matrici, è possibile determinare più facilmente se una sorgente contiene un altro valore:

if (haystack.includes(needle)) {
    // do your thing
}

9
Proprio ho pensato di dare una versione ES6 di contains: var contains = (a, b) => !!~a.indexOf(b): P
Florrie

1
@geon puoi per favore spiegare gli svantaggi?
Karl Taylor,

1
@KarlTaylor Non è solo molto idiomatico. Se è possibile utilizzare ES2017, utilizzare Array.prototype.includesinvece.
geon,

1
posso usare IndexOf con gli elementi oggetto?
ValRob,

2
@ValRob no, ma puoi usare inper vedere se un oggetto ha una chiave (es., 'property' in obj), Oppure puoi anche scorrere i valori di un oggetto con Object.values(obj).forEach(value => {}).
Eli,

95

Il Array.indexOf()metodo sostituirà la prima istanza. Per utilizzare ogni istanza Array.map():

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

Naturalmente, questo crea un nuovo array. Se vuoi farlo sul posto, usa Array.forEach():

a.forEach(function(item, i) { if (item == 3452) a[i] = 1010; });

7
Per chiunque legga questo. Sia map () che forEach () sono aggiunte più recenti alle specifiche Javascript e non sono presenti in alcuni browser meno recenti. Se si desidera utilizzarli, potrebbe essere necessario aggiungere il codice di compatibilità per i browser più vecchi: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
jfriend00

2
Array.indexOf()è stato presentato contemporaneamente a map()e forEach(). Se stai supportando IE8 o precedenti e non stai usando uno spessore per aggiungere supporto, meglio andare con la risposta di mellamokb .
gilly3,

array.map restituisce anche l'indice nel loro secondo parametro a = a.map (funzione (oggetto, chiave) {if (oggetto == 3452) a [chiave] = 1010;});
Ricky Sharma,

38

La mia soluzione suggerita sarebbe:

items.splice(1, 1, 1010);

L'operazione di giunzione rimuoverà 1 oggetto, iniziando dalla posizione 1 dell'array (es. 3452), E lo sostituirà con il nuovo oggetto 1010.


6
Ciò è fuorviante poiché si connota che il primo parametro indica che l' 1elemento verrà rimosso quando in realtà il primo parametro indica che l'operazione ha luogo all'indice 1. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
InsOp

28

Usa indexOf per trovare un elemento.

var i = items.indexOf(3452);
items[i] = 1010;

1
cosa succede se non previsto elemento. se trovato restituirà l'indice dell'elemento trovato ma in caso contrario restituirà -1. e imposterà quel valore su -1. si prega di fare riferimento a jsbin.com/wugatuwora/edit?js,console
surekha shelake

23

Facilmente realizzato con un forciclo.

for (var i = 0; i < items.length; i++)
    if (items[i] == 3452)
        items[i] = 1010;

9
Facilmente, ma non necessariamente in modo efficiente;)
Eli,

7
@Eli: OP non era chiaro se stavano sostituendo un'istanza o più istanze. La mia soluzione gestisce più istanze.
mellamokb,

@Eli Semmai, questa sarebbe la risposta più efficace postata per sostituire tutte le
occorrenze

15

È possibile modificare qualsiasi numero dell'elenco utilizzando gli indici

per esempio :

items[0] = 5;
items[5] = 100;

11

Se usi un oggetto complesso (o anche uno semplice) e puoi usare es6, Array.prototype.findIndexè buono. Per l'array dell'OP, potrebbero fare,

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

Per oggetti più complessi, questo brilla davvero. Per esempio,

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

items[index].lastName = 'Utah'
items[index].firstName = 'Johnny'

6

La sostituzione può essere effettuata in una riga:

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

Oppure crea una funzione da riutilizzare:

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

Modo ES6 :

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

Vogliamo sostituire 3452con 1010, soluzione:

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

Sicuramente, la domanda è per molti anni fa e per ora preferisco solo usare una soluzione immutabile , sicuramente, è fantastico per ReactJS.

Per un uso frequente offro la seguente funzione:

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

4

Primo metodo

Il modo migliore in una sola riga per sostituire o aggiornare l'elemento dell'array

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

Per esempio:

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

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

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

Secondo metodo

Un altro modo semplice per eseguire la stessa operazione è:

items[items.indexOf(oldValue)] = newValue

3

Il modo più semplice è utilizzare alcune librerie come underscorejs e il metodo cartografico.

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

_.map(items, function(num) {
  return (num == 3452) ? 1010 : num; 
});
=> [523, 1010, 334, 31, ...5346]

2
Il tipo di lodash / sottolineatura dei desideri ha fornito un array-aware replaceora ..._.replace([1, 2, 3], 2, 3);
Droogans il

3

Il modo immutabile per sostituire l'elemento nell'elenco usando operatori e .slicemetodi di diffusione ES6 .

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

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

Verifica che funzioni

console.log(arr)     // [ 'fir', 'next', 'third' ]
console.log(nextArr) // ['fir', 'second', 'third']

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

Se conosci il valore, utilizza,

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

Se vuoi sapere che il valore è presente o meno, usa,

var point = items.indexOf(334);

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

Se conosci il luogo (posizione), quindi utilizza direttamente,

items[--position] = 1010;

Se vuoi sostituire pochi elementi e sai che solo la posizione iniziale significa solo,

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

per ulteriori informazioni su .splice


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

da qui è possibile eliminare un determinato valore dall'array e in base allo stesso indice è possibile inserire il valore nell'array.

 Array.splice(index, 0, Array value);

1

Bene, se qualcuno sta interrompendo su come sostituire un oggetto dal suo indice in un array, ecco una soluzione.

Trova l'indice dell'oggetto in base al suo ID:

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

Sostituisci l'oggetto usando il metodo Object.assign ():

Object.assign(items[index], newValue)

1

La risposta di @ gilly3 è fantastica.

Come estenderlo per array di oggetti

Preferisco il seguente modo per aggiornare il nuovo record aggiornato nella mia matrice di record quando ottengo i dati dal server. Mantiene l'ordine intatto e abbastanza semplice una fodera.

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

Innanzitutto, riscrivi l'array in questo modo:

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

Quindi, accedi all'elemento nell'array tramite il suo numero indice. La formula per determinare il numero di indice è:n-1

Per sostituire il primo elemento (n=1)dell'array, scrivere:

items[0] = Enter Your New Number;

Nel tuo esempio, il numero 3452è nella seconda posizione (n=2). Quindi la formula per determinare il numero di indice è 2-1 = 1. Quindi scrivi il seguente codice da sostituire 3452con 1010:

items[1] = 1010;

0

Ecco la risposta di base trasformata in una funzione riutilizzabile:

function arrayFindReplace(array, findValue, replaceValue){
    while(array.indexOf(findValue) !== -1){
        let index = array.indexOf(findValue);
        array[index] = replaceValue;
    }
}

1
lascia indice; while ((index = indexOf (findValue))! == -1) per evitare il doppio indexOf (findValue)
Juan R

0

Ho risolto questo problema usando per i cicli e iterando attraverso l'array originale e aggiungendo le posizioni dell'arreas corrispondente a un altro array e quindi passando attraverso quell'array e cambiandolo nell'array originale quindi restituendolo, ho usato e la funzione freccia ma una funzione normale funzionerebbe anche.

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

Il modo più semplice è questo.

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]

non funziona per gli articoli trovati nell'indice 0 replaceWhat = 523, replaceWith = 999999non produce risultati corretti
Anthony Chung,

0

Ecco una fodera. Presuppone che l'elemento sarà nella matrice.

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

Se vuoi un semplice oneliner per la sintassi dello zucchero puoi semplicemente:

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

Piace:

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

Se non hai un ID, puoi stringere l'elemento come:

(elements = elements.filter(element => JSON.stringify(element) !== JSON.stringify(updatedElement))).push(updatedElement);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.