为什么 object[bar] 与 object[foo] 的输出相同？

Question

在其关于属性访问器的页面中，MDN 有这个：下面的链接给出了关于 javascript 的 Property_accessors 的描述， https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
object[foo] = 'value';
console.log(object[bar]);

这也输出“值”，因为这两个foo和bar被转换为相同的字符串。在 SpiderMonkey JavaScript 引擎中，这个字符串是"['object Object']".

但是，我无法理解有关 object[bar] 等于“value”的原因的解释......你能给出更好的解释吗？

Answer 1

你的报价开始得太早了，这部分：

这将输出“值”，因为 1 被类型转换为“1”。

与它上面的代码有关，而不是它下面的代码。

对于你的问题：

JavaScript 属性名称始终是字符串或符号。所以这段代码显示是"value"因为当您使用一个对象作为属性名称时，该对象被隐式转换为字符串，就像您String(obj)在它们上使用过的一样，并且普通对象强制转换为字符串"[object Object]"而不管它们的内容如何。因此，无论您使用foo或 ，它都是相同的属性名称bar。

所以这：

var foo = {unique_prop: 1};
var bar = {unique_prop: 2};
var object = {};
object[foo] = 'value';
console.log(object[bar]);

与此相同：

var foo = {unique_prop: 1};
var bar = {unique_prop: 2};
var object = {};
object[String(foo)] = 'value';
console.log(object[String(bar)]);

两者String(foo)并String(bar)产生相同的字符串"[object Object]"：

var foo = {unique_prop: 1};
var bar = {unique_prop: 2};
console.log("String(foo) =", String(foo));
console.log("String(bar) =", String(bar));

如果您想使用对象作为键，则需要使用 aMap代替。例子：

var foo = {unique_prop: 1};
var bar = {unique_prop: 2};
var map = new Map;
map.set(foo, 'value');
console.log(map.get(bar)); // undefined
console.log(map.get(foo)); // "value"

如果您不能使用地图，请使用对象的某些独特属性。

因为有人不可避免地会向您建议：您可以使用JSON.stringify为对象创建一个字符串，但这是一个坏主意。一方面，如果有多个属性，它是脆弱的，因为 JSON 中的属性顺序将取决于属性的名称和添加它们的顺序。为什么你不应该这样做的例子JSON.stringify：

// Don't do this
var foo = {unique_prop: 1, another_prop: 2};
var object = {};
object[JSON.stringify(foo)] = "value";
console.log(object[JSON.stringify(foo)]); // "value" - so far so good
var bar = {another_prop: 2, unique_prop: 1};
console.log("foo.unique_prop = " + foo.unique_prop);
console.log("bar.unique_prop = " + bar.unique_prop);
console.log("foo.another_prop = " + foo.another_prop);
console.log("bar.another_prop = " + bar.another_prop);
// Seemingly the same object, so this should work, right?
console.log(object[JSON.stringify(bar)]); // undefined
// It doesn't because:
console.log("JSON.stringify(foo) = ", JSON.stringify(foo));
console.log("JSON.stringify(bar) = ", JSON.stringify(bar));

.as-console-wrapper {
  max-height: 100% !important;
}

从 ES2015 开始，对象中的自身属性具有顺序，并且JSON.stringify在创建字符串时需要遵循该顺序。所以最好不要通过JSON.stringify.