Wie ersetze ich ein Element in einem Array durch Javascript?

314

Jedes Element dieses Arrays ist eine Nummer.

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

Wie ersetze ich eine Zahl durch ein Array durch eine neue?

Zum Beispiel möchten wir 3452 durch 1010 ersetzen. Wie würden wir das tun?

James
quelle
5
Gibt es mehrere Instanzen von 3452, die geändert werden müssen, oder nur eine?
Mellamokb
53
Es wird eine Instanz geben, wenn dunkle Mächte keine weitere hinzufügen.
James
2
Wenn es einen String-Ersatz gibt , warum gibt es keine replaceMethode für Arrays?
Lebensbalance

Antworten:

463
var index = items.indexOf(3452);

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

Es wird außerdem empfohlen, die Konstruktormethode nicht zum Initialisieren Ihrer Arrays zu verwenden. Verwenden Sie stattdessen die wörtliche Syntax:

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

Sie können den ~Operator auch verwenden , wenn Sie sich für knappes JavaScript interessieren und den -1Vergleich verkürzen möchten :

var index = items.indexOf(3452);

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

Manchmal schreibe ich sogar gerne eine containsFunktion, um diese Prüfung zu abstrahieren und das Verständnis der Vorgänge zu erleichtern. Was großartig ist, ist, dass dies sowohl für Arrays als auch für Strings funktioniert:

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

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

Beginnend mit ES6 / ES2015 für Zeichenfolgen und vorgeschlagen für ES2016 für Arrays können Sie leichter feststellen, ob eine Quelle einen anderen Wert enthält:

if (haystack.includes(needle)) {
    // do your thing
}
Eli
quelle
9
Ich dachte , ich würde eine ES6 - Version geben contains: var contains = (a, b) => !!~a.indexOf(b): P
Florrie
1
@geon kannst du bitte die Nachteile erklären?
Karl Taylor
1
@ KarlTaylor Es ist einfach nicht sehr idiomatisch. Wenn Sie ES2017 verwenden können, verwenden Sie Array.prototype.includesstattdessen.
Geon
1
Kann ich IndexOf mit Objektelementen verwenden?
ValRob
2
@ValRob nein, aber Sie können verwenden, um inzu sehen, ob ein Objekt einen Schlüssel hat (z. B. 'property' in obj), oder Sie können auch die Werte eines Objekts mit durchlaufen Object.values(obj).forEach(value => {}).
Eli
95

Die Array.indexOf()Methode ersetzt die erste Instanz. Um jede Instanz zu erhalten, verwenden Sie Array.map():

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

Dadurch wird natürlich ein neues Array erstellt. Wenn Sie dies an Ort und Stelle tun möchten, verwenden Sie Array.forEach():

a.forEach(function(item, i) { if (item == 3452) a[i] = 1010; });
gilly3
quelle
7
Für alle anderen, die dies lesen. Sowohl map () als auch forEach () sind neuere Ergänzungen der Javascript-Spezifikation und in einigen älteren Browsern nicht vorhanden. Wenn Sie sie verwenden möchten, müssen Sie möglicherweise Kompatibilitätscode für ältere Browser hinzufügen: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
jfriend00
2
Array.indexOf()wurde gleichzeitig mit map()und eingeführt forEach(). Wenn Sie IE8 oder früher unterstützen und keine Unterlegscheibe zum Hinzufügen von Unterstützung verwenden, sollten Sie die Antwort von mellamokb verwenden .
Gilly3
array.map gibt auch den Index in ihrem zweiten Parameter zurück a = a.map (Funktion (Element, Schlüssel) {if (Element == 3452) a [Schlüssel] = 1010;});
Ricky Sharma
38

Meine vorgeschlagene Lösung wäre:

items.splice(1, 1, 1010);

Die Spleißoperation entfernt 1 Element, beginnend an Position 1 im Array (dh 3452), und ersetzt es durch das neue Element 1010.

Shimon Agassi
quelle
5
Dies ist irreführend, da Sie darauf hinweisen, dass der erste Parameter bedeutet, dass das 1Element entfernt wird, obwohl der erste Parameter tatsächlich bedeutet, dass die Operation am Index stattfindet 1. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
InsOp
28

Verwenden Sie indexOf, um ein Element zu finden.

var i = items.indexOf(3452);
items[i] = 1010;
Tesserex
quelle
1
Was ist, wenn es kein Element erwartet. Wenn gefunden, wird der Index des gefundenen Elements zurückgegeben, andernfalls wird -1 zurückgegeben. und es wird diesen Wert auf -1 setzen. Bitte beziehen Sie sich auf jsbin.com/wugatuwora/edit?js,console
Surekha Shelake
23

Leicht mit einer forSchleife zu erreichen.

for (var i = 0; i < items.length; i++)
    if (items[i] == 3452)
        items[i] = 1010;
mellamokb
quelle
9
Leicht, aber nicht unbedingt effizient;)
Eli
7
@Eli: OP war nicht klar, ob sie eine Instanz oder mehrere Instanzen ersetzen. Meine Lösung verarbeitet mehrere Instanzen.
Mellamokb
@Eli Wenn überhaupt, wäre dies die effizienteste Antwort, um alle Vorkommen zu ersetzen
Tobiq
14

Sie können eine beliebige Anzahl der Liste mithilfe von Indizes bearbeiten

beispielsweise :

items[0] = 5;
items[5] = 100;
VirtualTroll
quelle
11

Wenn Sie ein komplexes Objekt (oder sogar ein einfaches) verwenden und es6 verwenden können, Array.prototype.findIndexist dies ein gutes Objekt . Für das Array des OP könnten sie Folgendes tun:

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

Bei komplexeren Objekten scheint dies wirklich. Zum Beispiel,

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

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

Der Austausch kann in einer Zeile erfolgen:

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

Oder erstellen Sie eine Funktion zur Wiederverwendung:

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
quelle
6

ES6 Weg:

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

Wir wollen ersetzen 3452durch 1010, Lösung:

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

Sicherlich ist die Frage schon vor vielen Jahren und im Moment bevorzuge ich es einfach, eine unveränderliche Lösung zu verwenden, definitiv ist es großartig für ReactJS.

Für den häufigen Gebrauch biete ich folgende Funktion an:

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

Erste Methode

Der beste Weg in nur einer Zeile, um ein Array-Element zu ersetzen oder zu aktualisieren

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

Z.B:

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

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

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

Zweite Methode

Eine andere einfache Möglichkeit, dieselbe Operation auszuführen, ist:

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

Am einfachsten ist es, einige Bibliotheken wie Unterstriche und Kartenmethoden zu verwenden.

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

_.map(items, function(num) {
  return (num == 3452) ? 1010 : num; 
});
=> [523, 1010, 334, 31, ...5346]
mrded
quelle
2
Art von Wunsch lodash / Unterstrich lieferte ein Array-bewusst replacejetzt ..._.replace([1, 2, 3], 2, 3);
Droogans
3

Die unveränderliche Möglichkeit, das Element in der Liste mithilfe von ES6-Spread-Operatoren und .slice-Methoden zu ersetzen .

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

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

Stellen Sie sicher, dass dies funktioniert

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

Wenn Sie den Wert kennen, verwenden Sie,

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

Wenn Sie wissen möchten, dass ein Wert vorhanden ist oder nicht, verwenden Sie,

var point = items.indexOf(334);

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

Wenn Sie den Ort (die Position) kennen, verwenden Sie direkt,

items[--position] = 1010;

Wenn Sie nur wenige Elemente ersetzen möchten und nur die Startposition kennen, bedeutet dies:

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

Weitere Informationen zu .splice

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

Von hier aus können Sie einen bestimmten Wert aus dem Array löschen und basierend auf demselben Index einen Wert in das Array einfügen.

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

Wenn sich jemand dafür interessiert, wie ein Objekt aus seinem Index in einem Array ersetzt werden kann, finden Sie hier eine Lösung.

Suchen Sie den Index des Objekts anhand seiner ID:

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

Ersetzen Sie das Objekt mithilfe der Object.assign () -Methode:

Object.assign(items[index], newValue)
faye.babacar78
quelle
1
Arbeiten wie ein Zauber !!
Mitesh Shah
0

Schreiben Sie Ihr Array zunächst folgendermaßen neu:

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

Greifen Sie als Nächstes über die Indexnummer auf das Element im Array zu. Die Formel zur Bestimmung der Indexnummer lautet:n-1

Um das erste Element (n=1)im Array zu ersetzen , schreiben Sie:

items[0] = Enter Your New Number;

In Ihrem Beispiel befindet sich die Nummer 3452an zweiter Stelle (n=2). Die Formel zur Bestimmung der Indexnummer lautet also 2-1 = 1. Schreiben Sie also den folgenden Code, den Sie ersetzen 3452möchten 1010:

items[1] = 1010;
Anthony Levato
quelle
0

Hier ist die grundlegende Antwort, die in eine wiederverwendbare Funktion umgewandelt wurde:

function arrayFindReplace(array, findValue, replaceValue){
    while(array.indexOf(findValue) !== -1){
        let index = array.indexOf(findValue);
        array[index] = replaceValue;
    }
}
JohnP2
quelle
1
let index; while ((index = indexOf (findValue))! == -1), um doppelten indexOf (findValue) zu vermeiden
Juan R
0

Ich habe dieses Problem gelöst, indem ich for-Schleifen verwendet und das ursprüngliche Array durchlaufen habe und die Positionen der übereinstimmenden Bereiche zu einem anderen Array hinzugefügt habe. Dann habe ich dieses Array durchlaufen und es im ursprünglichen Array geändert und dann zurückgegeben. Ich habe eine Pfeilfunktion verwendet, aber eine reguläre Funktion würde auch funktionieren.

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
quelle
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
quelle
0

Der einfachste Weg ist dies.

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
quelle
funktioniert nicht für Elemente, die bei Index 0 gefunden wurden, replaceWhat = 523, replaceWith = 999999liefert keine korrekten Ergebnisse
Anthony Chung
0

Hier ist ein Einzeiler. Es wird davon ausgegangen, dass sich das Element im Array befindet.

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
quelle
0

Wenn Sie einen einfachen Zucker-Sintax-Oneliner möchten, können Sie einfach:

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

Mögen:

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

Wenn Sie keine ID haben, können Sie das Element wie folgt anordnen:

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

Die Antwort von @ gilly3 ist großartig.

So erweitern Sie dies für ein Array von Objekten

Ich bevorzuge die folgende Methode, um den neuen aktualisierten Datensatz in meinem Datensatzarray zu aktualisieren, wenn ich Daten vom Server erhalte. Es hält die Bestellung intakt und ganz einfach einen Liner.

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
quelle