Ändern des Arrays in JavaScript-Funktion ändert das Array außerhalb der Funktion?

Question

Warum verhalten sich die beiden Skripte unterschiedlich? Ich möchte das erste Skript verwenden, aber beim zweiten drawData() Aufruf ändert es data; das ist seltsam und entspricht nicht meinen Vorstellungen. Das zweite Skript hat dieses Problem nicht. Warum ist das so und wie kann ich das erste Skript beheben?

Das erste Skript ändert data nicht:

    var data = ["right"];

    function drawData(arrs, type) {
        if (type == "percentage") {
            arrs[0] = "omg";
        }
        console.log(data[0]); // Geändert!?
    }
    drawData(data);
    drawData(data, "percentage");

Zweites Skript:

    var data = "right";

    function drawData(arrs, type) {
        if (type == "percentage") {
            arrs = "omg";
        }
        console.log(data); // OK, nicht geändert.
    }
    drawData(data);
    drawData(data, "percentage");

Answer 1

Dies ist der Unterschied zwischen der Zuweisung an eine lokale Variable und der Mutation des übergebenen Objekts.

In beiden Code-Abschnitten ist arrs eine lokale Variable, die sich von data unterscheidet. Aber die Elemente und andere Eigenschaften von arrs sind genau die gleichen wie die von data. Änderungen an diesen Eigenschaftswerten (die im Allgemeinen als Mutation des Objekts/Arrays bezeichnet werden) sind sowohl über arrs als auch über data sichtbar. Und genau das macht das erste Skript.

Das zweite Skript ändert jedoch keinen Eigenschaftswert von arrs, sondern weist arrs einen völlig neuen Wert zu, sodass es nun keine Eigenschaften mehr mit data teilt. Dies wird noch offensichtlicher, da sowohl data als auch arrs primitive Werte sind, die nicht mutieren können, wie im vorherigen Absatz erklärt. Auch wenn es sich um Objekte oder Arrays handelt und Sie die folgende Zuweisung vornehmen würden:

arrs = [1234];

Es würde sich nicht auf data auswirken. data würde nur beeinflusst werden, wenn Sie einer Eigenschaft/Index von arrs zuweisen, ohne direkt an arrs zuweisen.

Answer 2

Die erste Variante modifiziert das als Parameter an die Funktion übergebene Objekt (das zufälligerweise ein Array ist) - daher ist diese Änderung außerhalb der Funktion sichtbar. Die zweite Variante weist dem Funktionsparameter (der zufälligerweise eine Referenz auf ein Array ist) einen neuen Wert zu, ändert aber das Array selbst nicht.