深入理解 JS 对象值传递：为何数组/对象的值有时变了，有时不变？

2024-01-20 09:20:00

JavaScript 中的对象传递：揭开困惑的面纱

在 JavaScript 的奇妙世界中，对象值传递机制往往令人迷惑不解。有时，对象值的变化似乎是不可预测的，有时却又表现得合乎逻辑。本文将深入剖析对象的值传递机制，帮助你彻底理解 JavaScript 中对象的可变性和不可变性，让你不再对它困惑不解。

变量和值：一个甜美的比喻

想象一下，你有一袋装满糖果的袋子。你可以把袋子传给朋友，或者把其中的糖果送给朋友。在这个比喻中，袋子本身代表变量，而里面的糖果代表值。

当你在变量中存储一个原始类型的值（如数字或字符串），这个值是不可变的。这意味着当你修改原始类型的值时，该值不会影响原始变量。就像当你从糖果袋里拿出一颗糖果时，袋子本身并不会发生改变。

代码示例：

let num = 10;
num = 20;
console.log(num); // 输出：20

在上面的代码中，num 变量存储了原始类型的值 10。当我们重新赋值 num 为 20 时，原始值 10 不会受到影响。

对象：可变的糖果盒

然而，当你在变量中存储一个对象值时，情况就变得复杂一些。对象是引用类型，它们指向内存中的一个对象。当你修改对象的值时，不仅修改了该值，还修改了指向它的变量。就像当你往糖果盒里添加或移除糖果时，糖果盒本身也发生了改变。

代码示例：

const obj = { name: "John" };
const obj2 = obj;
obj2.name = "Jane";
console.log(obj.name); // 输出：Jane

在这个代码中，obj 和 obj2 变量指向同一个对象。当修改 obj2 的 name 属性时，也会修改 obj 的 name 属性，因为它们指向的是同一个对象。

数组：对象的糖果

值得注意的是，数组在 JavaScript 中也是对象。因此，数组值也是按引用传递的。就像糖果盒里装的是糖果一样，数组里装的是元素。

代码示例：

const arr = [1, 2, 3];
const arr2 = arr;
arr2.push(4);
console.log(arr); // 输出：[1, 2, 3, 4]

在上面的代码中，arr 和 arr2 变量指向同一个数组。当修改 arr2 的元素时，也会修改 arr 的元素，因为它们指向的是同一个数组。

值传递与引用传递的规则

为了帮助你牢记 JavaScript 中的值传递机制，这里有一个简单的规则：

结论

理解 JavaScript 中的对象值传递机制至关重要，因为它影响着代码的行为方式。记住，原始类型是不可变的，而对象是可变的。对象值按引用传递，这意味着修改对象的值会影响所有指向该对象的变量。

通过牢牢掌握这些原则，你可以避免对象值传递带来的陷阱，并编写更健壮、更可预测的 JavaScript 代码。就像你熟练地处理糖果袋和糖果盒一样，你也可以轻松驾驭 JavaScript 中的对象值传递机制。

常见问题解答

探索Web开发资源和人工智能教程的代码社区

扫码关注微信公众号