分享一个JS对象隐式转换的问题

问题来源

今天在群里看到一个人发出的提问，先看问题是什么。

const prop1 = {
  a: 1
}
const prop2 = {
  b: 1
}
const obj = {}
obj[prop1] = 1;
obj[prop2] = 2;
console.log(obj[prop1]); // 2
console.log(obj[prop2]); // 2
1
2
3
4
5
6
7
8
9
10
11

这位群友的问题是：为什么 obj[prop1] 打印出来的值是2，而不是1。

问题分析

既然结果出乎意料，那么我们不妨把整个 obj 都打印出来看看是什么样的？

console.log(obj);
/*
  {
    '[object Object]': 2
  }
*/
1
2
3
4
5
6

打印出来的结果是不是很意外，既没有 prop1 也没有 prop2，反而出现了一个 [object Object]，这是为什么呢？

问题解决

如果使用过 Object.prototype.toString.call() 来判断变量类型的话一定能看出来这个键是对象类型的变量的返回值，说明这一定和类型有关系，prop1 和 prop2 被隐式转换为 [object Object] 了。

现在再去 MDN 看 Object 为什么会隐式转换 key。

在 Map 与 Object 类型的对比那已经给出了说明，Object 类型的键必须为 String 或 Symbol。

现在问题就已经解决了，因为 Object 类型不能保存 Object 类型的的键，因为会隐式转换为 [object Object]。