JavaScript 对象 - [] vs 点 [重复]答案

【问题标题】：JavaScript objects - [] vs dot [duplicate]JavaScript 对象 - [] vs 点 [重复]
【发布时间】：2013-07-04 02:15:36
【问题描述】：

这两个作业之间有什么区别（如果有的话）：

var foo = {};
foo['bar'] = "some value";
foo.baz = "some other value";

console.log(foo.bar)
=> "some value"
console.log(foo.baz)
=> "some other value"

它们是同义词吗？我注意到您可以使用 [] 语法添加无效属性名称的键。

foo['a space'] = "does not work";
console.log(foo.a space);
=> SyntaxError: Unexpected identifier

我问的原因是我已经为伪命名空间制作了一个小的 JS 库。它是在上述赋值相同的假设下编写的（忽略使用 [] 语法时允许的超集）

【问题讨论】：

第一个示例没有技术差异。正如您所说，[] 语法允许使用无效标识符。
...请注意，所有 JavaScript 属性都是字符串，因此无论给[] 提供什么表达式，它最终都会得到toString() 处理。

标签： javascript

【解决方案1】：

foo["bar"] 等同于foo.bar，尽管在我看来foo.bar 更容易阅读。正如您已经注意到以前的语法 (foo["bar"]) 允许您使用不是有效标识符的属性名称。它还允许您使用动态属性名称：

var name = "bar";

foo[name] = 1;

console.log(foo["bar"]);

将输出1。

【讨论】：

【解决方案2】：

当您使用. 时，属性名称是文字标识符。当您在程序中使用它时，您必须对属性名称进行硬编码。

当您使用[] 时，属性名称是一个被计算的表达式。它通常不与引号中的简单字符串一起使用，因为这就是 . 符号的用途。但是当你需要计算属性时它很有用，例如

console.log(foo["item"+i]);

后一种表示法也是访问非标识符属性的唯一方法。您可以通过这种方式使用任何字符串作为属性名称。

【讨论】：

【解决方案3】：

它们是绝对等价的，只是您可以使用 [] 语法提供更多可能性，例如

var bar = 'text';
foo[bar] = 'baz';

【讨论】：

【解决方案4】：

唯一的区别是您可以在第二个示例中使用变量，但最好使用像这样的点表示法

someObject.hello = ' hello john';

我唯一使用另一种方式是如果我需要使用这样的变量

var msg = 'goodbye';

someObject[msg] = 'goodbye john';

这就是结果

// someObject.hello => 'hello john'
// someObject.goodbye => 'goodbye john'

所以使用点符号，如obj.some，并使用obj[myVar] 表示变量

所以区别在于你可以在第二个例子中使用变量

如果我这样做了

var myVar = 'test';

someObj.myVar = ' Hello Test ';

那么这就是结果

// someObj.test => doesnt work - undefined
// someObj.myVar => ' Hello Test '

【讨论】：

【解决方案5】：

它们是等价的，但是当属性名称包含空格（或其他非字母数字字符）时，您不能使用点表示法：

foo.a space // doesn't work
foo['a space'] // does

【讨论】：