Ist es möglich, die Werte des Arrays zu ändern, wenn foreach in Javascript ausgeführt wird?

Beispiel:

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

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

alert(arr);

Das Array hat immer noch seine ursprünglichen Werte. Gibt es eine Möglichkeit, über die Iterationsfunktion Schreibzugriff auf die Elemente des Arrays zu erhalten?

Dem Rückruf werden das Element, der Index und das Array selbst übergeben.

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

Bearbeiten - Wie in einem Kommentar angegeben, kann die .forEach()Funktion ein zweites Argument annehmen, das als Wert für thisjeden Aufruf des Rückrufs verwendet wird:

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

Dieses zweite Beispiel zeigt arrsich wie thisim Rückruf eingerichtet. Man könnte denken, dass das am .forEach()Aufruf beteiligte Array der Standardwert von ist this, aber aus welchem ​​Grund auch immer; thiswird sein, undefinedwenn dieses zweite Argument nicht angegeben wird.

(Hinweis: Die obigen Informationen thisgelten nicht, wenn der Rückruf eine =>Funktion ist, da thissie beim Aufrufen solcher Funktionen niemals an irgendetwas gebunden sind.)

Es ist auch wichtig, sich daran zu erinnern, dass der Array-Prototyp eine ganze Familie ähnlicher Dienstprogramme enthält und im Stackoverflow viele Fragen zu der einen oder anderen Funktion auftauchen, sodass die beste Lösung darin besteht, einfach ein anderes Tool auszuwählen. Du hast:

• forEach um mit oder mit jedem Eintrag in einem Array etwas zu tun;
• filter zum Erzeugen eines neuen Arrays, das nur qualifizierende Einträge enthält;
• map zum Erstellen eines neuen Eins-zu-Eins-Arrays durch Transformieren eines vorhandenen Arrays;
• some um zu überprüfen, ob mindestens ein Element in einem Array zu einer Beschreibung passt;
• everyum zu überprüfen, ob alle Einträge in einem Array mit einer Beschreibung übereinstimmen;
• find um nach einem Wert in einem Array zu suchen

und so weiter. MDN-Link

Lassen Sie uns versuchen , es einfach zu halten und zu diskutieren, 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 sollten Sie hier etwas über Array.prototype.forEach () lesen:

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

Lassen Sie uns zweitens kurz über Werttypen in JavaScript sprechen.

Grundelemente (undefiniert, null, Zeichenfolge, Boolescher Wert, Zahl) speichern einen tatsächlichen Wert.

Ex: var x = 5;

Referenztypen (benutzerdefinierte Objekte) speichern den Speicherort des Objekts.

Ex: var xObj = { x : 5 };

Und drittens, wie Funktionsparameter funktionieren.

In Funktionen werden Parameter immer als Wert übergeben.

Da arres sich um ein Array von Strings handelt, handelt es sich um ein Array primitiver Objekte, dh sie werden nach Wert gespeichert.

Für Ihren obigen Code bedeutet dies, dass jedes Mal, wenn forEach () iteriert, partderselbe Wert wie arr[index], aber nicht dasselbe Objekt ist .

part = "four";ändert die partVariable, lässt sie aber in arrRuhe.

Der folgende Code ändert die gewünschten Werte:

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

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

alert(arr);

Wenn das Array arrnun ein Array von Referenztypen war , funktioniert der folgende Code, da Referenztypen einen Speicherort eines Objekts anstelle des tatsächlichen 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);

Das Folgende zeigt, dass Sie ändern können part, um auf ein neues Objekt zu zeigen, während Sie die Objekte in arrRuhe lassen:

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

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

Array.prototype.map() Behalten Sie das ursprüngliche Array

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.forEach() Originalarray überschreiben

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

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

Javascript wird als Wert übergeben und bedeutet im Wesentlichen, dass partes sich um eine Kopie handelt des Werts im Array handelt.

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

arr[index] = 'new value';

Ersetzen Sie es durch den Index des Arrays.

array[index] = new_value;

Hier ist eine ähnliche Antwort unter Verwendung einer =>Stilfunktion:

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

gibt das Ergebnis:

[11,12,13,14]

Der selfParameter ist bei der Pfeilstilfunktion daher nicht unbedingt erforderlich

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

funktioniert auch.

Die .forEach-Funktion kann eine Rückruffunktion haben (jedes Element, elementIndex). Grundsätzlich müssen Sie also Folgendes tun:

arr.forEach(function(element,index){
    arr[index] = "four";   //set the value  
});
console.log(arr); //the array has been overwritten.

Wenn Sie das ursprüngliche Array beibehalten möchten, können Sie eine Kopie davon erstellen, bevor Sie den obigen Vorgang ausführen. Um eine Kopie zu erstellen, können Sie Folgendes verwenden:

var copy = arr.slice();

Mit den Array-Objektmethoden können Sie den Array-Inhalt ändern, aber im Vergleich zu den grundlegenden for-Schleifen fehlt diesen Methoden eine wichtige Funktionalität. Sie können den Index während des Laufs nicht ändern.

Wenn Sie beispielsweise das aktuelle Element entfernen und an einer anderen Indexposition innerhalb desselben Arrays platzieren, können Sie dies problemlos tun. Wenn Sie das aktuelle Element an eine vorherige Position verschieben, gibt es in der nächsten Iteration kein Problem. Sie erhalten das gleiche nächste Element, als hätten Sie nichts getan.

Betrachten Sie diesen Code, in dem wir das Element an Indexposition 5 auf Indexposition 2 verschieben, sobald der Index bis zu 5 zählt.

var ar = [0,1,2,3,4,5,6,7,8,9];
ar.forEach((e,i,a) => {
i == 5 && a.splice(2,0,a.splice(i,1)[0])
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 5 5 - 6 6 - 7 7 - 8 8 - 9 9

Wenn wir das aktuelle Element jedoch an einen Ort jenseits der aktuellen Indexposition verschieben, wird es etwas chaotisch. Dann verschiebt sich das nächste Element in die Position der verschobenen Elemente und in der nächsten Iteration können wir es nicht sehen oder bewerten.

Betrachten Sie diesen Code, in dem wir das Element an Indexposition 5 auf Indexposition 7 verschieben, sobald der Index bis zu 5 zählt.

var a = [0,1,2,3,4,5,6,7,8,9];
a.forEach((e,i,a) => {
i == 5 && a.splice(7,0,a.splice(i,1)[0])
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 5 5 - 6 7 - 7 5 - 8 8 - 9 9

Wir haben also noch nie 6 in der Schleife getroffen. Normalerweise wird in einer for-Schleife erwartet, dass Sie den Indexwert verringern, wenn Sie das Array-Element nach vorne verschieben, sodass Ihr Index im nächsten Durchlauf an derselben Position bleibt und Sie das an der Stelle des entfernten Elements verschobene Element weiterhin auswerten können. Dies ist mit Array-Methoden nicht möglich. Sie können den Index nicht ändern. Überprüfen Sie den folgenden Code

var a = [0,1,2,3,4,5,6,7,8,9];
a.forEach((e,i,a) => {
i == 5 && (a.splice(7,0,a.splice(i,1)[0]), i--);
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 4 5 - 6 7 - 7 5 - 8 8 - 9 9

Wie Sie sehen, wird es beim Dekrementieren inicht von 5 auf 6 fortgesetzt, von wo es übrig geblieben ist.

Denken Sie also daran.

Um Elemente hinzuzufügen oder zu löschen, die den Index ändern würden, zählen Sie einfach die Anzahl der Elemente, die Sie bereits gelöscht oder hinzugefügt haben, und ändern Sie den Index entsprechend, um den Vorschlag von zhujy_8833 zu erweitern. Zum Löschen von Elementen:

let values = ["A0", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8"];
let count = 0;
values.slice().forEach((value, index) => {
    if (value === "A2" || value === "A5") {
        values.splice(index - count++, 1);
    };
});
console.log(values);

// Expected: [ 'A0', 'A1', 'A3', 'A4', 'A6', 'A7', 'A8' ]

So fügen Sie Elemente vor:

if (value === "A0" || value === "A6" || value === "A8") {
    values.splice(index - count--, 0, 'newVal');
};

// Expected: ['newVal', A0, 'A1', 'A2', 'A3', 'A4', 'A5', 'newVal', 'A6', 'A7', 'newVal', 'A8' ]

So fügen Sie Elemente nach:

if (value === "A0" || value === "A6" || value === "A8") {
    values.splice(index - --count, 0, 'newVal');
};

// Expected: ['A0', 'newVal', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'newVal', 'A7', 'A8', 'newVal']

So ersetzen Sie ein Element:

if (value === "A3" || value === "A4" || value === "A7") {
    values.splice(index, 1, 'newVal');
};

// Expected: [ 'A0', 'A1', 'A2', 'newVal', 'newVal', 'A5', 'A6', 'newVal', 'A8' ]

Hinweis: Wenn Sie sowohl 'vor' als auch 'nach' Einfügungen implementieren, sollte der Code zuerst 'vor' Einfügungen verarbeiten, anders herum wäre dies nicht wie erwartet

Sie können dies versuchen, wenn Sie überschreiben möchten

var newArray= [444,555,666];
var oldArray =[11,22,33];
oldArray.forEach((name, index) => oldArray [index] = newArray[index]);
console.log(newArray);