Werte im Array ändern, wenn foreach ausgeführt wird

Question

Beispiel:

var arr = ["one","two","three"];

arr.forEach(function(part){
  part = "four";
  return "four";
})

alert(arr);

Das Array ist immer noch mit seinen ursprünglichen Werten, gibt es eine Möglichkeit, Schreibzugriff auf Array-Elemente von iterierenden Funktion haben?

Answer 1

Dem Callback wird das Element, der Index und das Array selbst übergeben.

arr.forEach(function(part, index, theArray) {
  theArray[index] = "hello world";
});

éditer - wie in einem Kommentar angemerkt, die .forEach() Funktion kann ein zweites Argument annehmen, das als Wert von this bei jedem Aufruf des Rückrufs:

arr.forEach(function(part, index) {
  this[index] = "hello world";
}, arr); // use arr as this

Das zweite Beispiel zeigt arr die selbst als this Man könnte meinen, dass das Array, das an der Rückrufaktion beteiligt ist. .forEach() Aufruf könnte die Standard Wert von this aber aus welchen Gründen auch immer ist das nicht der Fall; this wird sein undefined wenn dieses zweite Argument nicht angegeben wird.

(Hinweis: Die obigen Ausführungen über this gilt nicht, wenn der Rückruf ein => Funktion, denn this ist nie an etwas gebunden, wenn solche Funktionen aufgerufen werden).

Es ist auch wichtig, sich daran zu erinnern, dass es eine ganze Familie ähnlicher Dienstprogramme gibt, die auf dem Array-Prototyp bereitgestellt werden, und viele Fragen tauchen auf Stackoverflow über die eine oder andere Funktion auf, so dass die beste Lösung darin besteht, einfach ein anderes Werkzeug zu wählen. Das haben Sie:

• forEach um mit jedem Eintrag in einem Array etwas zu tun oder zu verändern;
• filter um ein neues Array zu erzeugen, das nur qualifizierte Einträge enthält;
• map für die Erstellung eines eins-zu-eins neuen Arrays durch Umwandlung eines bestehenden Arrays;
• some um zu prüfen, ob mindestens ein Element in einem Array einer Beschreibung entspricht;
• every zu prüfen, ob todos Einträge in einem Array mit einer Beschreibung übereinstimmen;
• find um einen Wert in einem Array zu suchen

und so weiter. MDN-Link

Answer 2

Lasst uns Versuchen Sie um es einfach zu halten und zu erörtern, wie es tatsächlich funktioniert. Es hat mit Variablentypen und Funktionsparametern zu tun.

Hier ist Ihr Code, über den wir sprechen:

var arr = ["one","two","three"];

arr.forEach(function(part) {
  part = "four";
  return "four";
})

alert(arr);

Zunächst einmal sollten Sie sich hier über Array.prototype.forEach() informieren:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Zweitens, lassen Sie uns kurz über Werttypen in JavaScript sprechen.

Primitive (undefiniert, null, String, Boolean, Zahl) einen aktuellen Wert speichern.

ex: var x = 5;

Referenztypen (benutzerdefinierte Objekte) speichern den Speicherort des Objekts.

ex: var xObj = { x : 5 };

Und drittens, wie Funktionsparameter funktionieren.

In Funktionen sind Parameter immer nach Wert übergeben.

Denn arr ist ein Array von Strings, es ist ein Array von primitiv Objekte, d.h. sie werden nach Wert gespeichert.

Für Ihren obigen Code bedeutet dies also, dass jedes Mal, wenn die forEach() iteriert, part entspricht dem gleichen Wert wie arr[index] , aber nicht das gleiche Objekt .

part = "four"; wird die part variabel, lässt aber arr allein.

Mit dem folgenden Code können Sie die gewünschten Werte ändern:

var arr = ["one","two","three"];

arr.forEach(function(part, index) {
  arr[index] = "four";
});

alert(arr);

Wenn nun Array arr war eine Reihe von Referenztypen Der folgende Code funktioniert, weil Referenztypen einen Speicherplatz eines Objekts anstelle des eigentlichen Objekts speichern.

var arr = [{ num : "one" }, { num : "two"}, { num : "three"}];

arr.forEach(function(part, index) {
  // part and arr[index] point to the same object
  // so changing the object that part points to changes the object that arr[index] points to

  part.num = "four";
});

alert(arr[0].num);
alert(arr[1].num);
alert(arr[2].num);

Die folgende Abbildung zeigt, dass Sie Folgendes ändern können part auf ein neues Objekt verweisen, während die Objekte, die in arr allein:

var arr = [{ num : "one" }, { num : "two"}, { num : "three"}];

arr.forEach(function(part, index) {
  // the following will not change the object that arr[index] points to because part now points at a new object
  part = 5;
});

alert(arr[0].num);
alert(arr[1].num);
alert(arr[2].num);

Answer 3

Array: [1, 2, 3, 4]
Ergebnis: ["foo1", "foo2", "foo3", "foo4"]

Array.prototype.map() Ursprüngliche Anordnung beibehalten

const originalArr = ["Iron", "Super", "Ant", "Aqua"];
const modifiedArr = originalArr.map(name => `${name}man`);

console.log( "Original: %s", originalArr );
console.log( "Modified: %s", modifiedArr );

Array.prototype.map() Überschreiben Sie das ursprüngliche Array

let originalArr = ["Iron", "Super", "Ant", "Aqua"];
originalArr = originalArr.map(name => `${name}man`);

console.log( "Original: %s", originalArr );

Array.prototype.forEach() Überschreiben Sie das ursprüngliche Array

const originalArr = ["Iron", "Super", "Ant", "Aqua"];
originalArr.forEach((name, index) => originalArr[index] = `${name}man`);

console.log( "Overridden: %s", originalArr );

Answer 4

Javascript ist "pass by value", und das bedeutet im Wesentlichen part es un kopieren. des Wertes im Array.

Um den Wert zu ändern, greifen Sie in Ihrer Schleife auf das Array selbst zu.

arr[index] = 'new value';

Answer 5

Hier ist eine ähnliche Antwort unter Verwendung einer => Stil-Funktion:

var data = [1,2,3,4];
data.forEach( (item, i, self) => self[i] = item + 10 );

ergibt das Ergebnis:

[11,12,13,14]

En self Parameter ist bei der Pfeilfunktion nicht unbedingt erforderlich, daher

data.forEach( (item,i) => data[i] = item + 10);

funktioniert auch.