Javascript object 赋值的奇怪行为

Question

我是 javascript 的新手（真的是整个编程的新手）。而我遇到了这种我不太理解的for/in循环的行为。以下代码是运行在控制台中使用 $node 命令。

code_0:

var result = {};
var list = ['A', 'B', 'C'];

for(var index in list){
    var id = list[index];
    result[id] = {};
    result[id]['name'] = id;
}

console.log(result);

result_0:

{ A: { name: 'A' }, B: { name: 'B' }, C: { name: 'C' } }

code_1:

var result = {};
var list = ['A', 'B', 'C'];
var INIT = {'a': 0, 'b': 0, 'c': 0,}

for(var index in list){
    var id = list[index];
    result[id] = INIT;
    result[id]['name'] = id;
}

console.log(result);

result_1:

{ A: { a: 0, b: 0, c: 0, name: 'C' },
  B: { a: 0, b: 0, c: 0, name: 'C' },
  C: { a: 0, b: 0, c: 0, name: 'C' } }

我能理解为什么code_0会给出result_0。但是 result_1 是我不明白的。我预计 result_1 是：

{ A: { a: 0, b: 0, c: 0, name: 'A' },
  B: { a: 0, b: 0, c: 0, name: 'B' },
  C: { a: 0, b: 0, c: 0, name: 'C' } }

code_0 和 code_1 有什么区别？为什么 code_1 会给出 result_1？

编辑：* 添加与问题相关的标签。 * 更改标题。（标题曾经是关于 for/in 循环）

Answer 1

在 Javascript 中，对象是通过引用（而非复制）分配的。这是在 Javascript.

中初次上手时容易混淆和学习的一个常见点

在您的 code_1 块中，这行代码：

result[id] = INIT;

在你的循环的每次迭代中分配对完全相同对象的引用，因此它们都指向同一个对象并且都将具有相同的属性（因为它们都是同一个对象）。因此，对 result[id] 的任何进一步更改实际上只是对 INIT 的更改，INIT 是 result 中所有插槽正在使用的同一对象，因此它们似乎都立即更改。

在Javascript中，如果你想在每次赋值中单独复制一个对象，那么你必须在赋值之前创建一个新对象。在最新的浏览器中，您可以使用 Object.assign() 将可枚举属性从一个对象复制到另一个对象。

使用 Object.assign()，这是解决在分配对象之前制作对象副本的问题的一种方法：

var result = {};
var list = ['A', 'B', 'C'];
var INIT = {'a': 0, 'b': 0, 'c': 0,}

for(var index in list){
    var id = list[index];
    // make a new object that is a copy of INIT
    var obj = Object.assign({}, INIT);
    obj.name = id;
    // put that new object into result[id]
    result[id] = obj;
}

console.log(result);

对于旧版浏览器，这里有 Object.assign() 的 polyfill：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

这里有一个更简单的例子：

 var items = {a:1, b:2, c:3};

 var list1 = items;
 var list2 = items;

 list1.a = 10;
 console.log(items);               // {a:10, b:2, c:3}
 console.log(list1);               // {a:10, b:2, c:3}
 console.log(list2);               // {a:10, b:2, c:3}
 console.log(list1 === items);     // true, they are the same object
 console.log(list2 === items);     // true, they are the same object

您可以看到所有三个变量都显示相同的值，因为它们都指向完全相同的对象，因此通过三个变量中的任何一个修改对象都会产生完全相同的变化。

Javascript object 赋值的奇怪行为

Javascript object assignment's strange behavior

javascript

node.js

loops

object

assign