JavaScript中为对象分配不同对象键却得到相同值的原因解析

嘿，这个问题其实是JavaScript普通对象键的一个常见小陷阱，我来给你掰扯清楚～

先看你写的这段代码：

const a = {};
const b = {
  key: 'b'
};
const c = {
  key: 'c'
};

a[b] = 123;
a[c] = 456;

console.log(a[b]);

你原本以为a[b]会输出123，但结果是456，核心原因就在于JavaScript普通对象的键只能是字符串或者Symbol类型——当你尝试用非字符串/非Symbol的值（比如这里的对象b和c）作为键时，JS会自动把这个值转换成它的字符串形式。

普通对象调用默认的toString()方法，返回的都是"[object Object]"，不管你的对象内容是什么。也就是说，你用b或者c作为a的键时，实际上都是在给a的同一个键"[object Object]"赋值：

• 第一次a[b] = 123，相当于给a["[object Object]"]设为123；
• 第二次a[c] = 456，还是给同一个键赋值，直接把之前的123覆盖成了456。

所以最后执行console.log(a[b])时，b又会被转成"[object Object]"，取到的自然就是最后赋值的456了。

如果想真正区分不同的对象作为键，可以用JavaScript的Map类型，它允许用任意类型的值作为键，并且会根据对象的引用区分不同的对象：

const a = new Map();
const b = { key: 'b' };
const c = { key: 'c' };

a.set(b, 123);
a.set(c, 456);

console.log(a.get(b)); // 这里就会输出你预期的123啦

备注：内容来源于stack exchange，提问作者ImranR