除了第一种形式可以使用变量而不仅仅是字符串文字这一显而易见的事实之外,是否有任何理由使用其中一种而不是另一种,如果是这样,在哪些情况下?

在代码:

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

上下文:我写了一个代码生成器,产生这些表达式,我想知道哪个更可取。


当前回答

让我再添加一些方括号符号的用例。如果你想访问一个属性,比如对象中的x-proxy,那么-将被错误地解释。还有一些其他的情况,比如空格,点,等等,点运算对你没有帮助。另外,如果你在一个变量中有键,那么在一个对象中访问键值的唯一方法是用括号符号。希望你能了解更多的背景。

其他回答

foo。Bar和foo[" Bar "]访问foo上的属性,但不一定是相同的属性。区别在于如何解释bar。当使用点时,点后面的单词是属性的字面名称。使用方括号时,将计算方括号之间的表达式以获得属性名。而foo。Bar获取 属性的值名为"bar", foo["bar"]尝试计算表达式"bar"并使用转换为字符串的结果作为属性名

点表示法的局限性

如果我们拿这个物体:

const obj = {
  123: 'digit',
  123name: 'start with digit',
  name123: 'does not start with digit',
  $name: '$ sign',
  name-123: 'hyphen',
  NAME: 'upper case',
  name: 'lower case'
};

使用点符号访问它们的专有属性

obj.123;      // ❌ SyntaxError
obj.123name;  // ❌ SyntaxError
obj.name123;  // ✅ 'does not start with digit'
obj.$name;    // ✅  '$ sign'
obj.name-123;  // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError
obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'

但对于括号符号来说,这些都不是问题:

obj['123'];     // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'
obj['name123']; // ✅ 'does not start with digit'
obj['$name'];   // ✅ '$ sign'
obj['name-123']; // ✅ 'does not start with digit'
obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'

使用variable访问变量:

const variable = 'name';
const obj = {
  name: 'value'
};
// Bracket Notation
obj[variable]; // ✅ 'value'
// Dot Notation
obj.variable; // undefined

使用这些符号时要小心: 如。如果我们想访问一个窗口的父函数。 在IE中:

window['parent']['func']

并不等同于

window.['parent.func']

我们可以用:

window['parent']['func'] 

or

window.parent.func 

访问它

当-时必须使用方括号

属性名是number。 Var ob = { 1:“一个”, 7:“7” } ob.7 // SyntaxError ob[7] // " 7 " 属性名有特殊字符。 Var ob = { 'This is one': 1, 这是7:7, } ob.'This is one' // SyntaxError ob['这是一个']// 1 属性名被赋给一个变量,您要访问 属性值。 Var ob = { “一”:1、 “七”:7, } var _Seven = ' 7 '; b. _seven //未定义 ob[_Seven] // 7 .使用实例

点表示法总是可取的。如果你正在使用一些“更聪明的”IDE或文本编辑器,它将显示来自该对象的未定义名称。 只有当你的名字有破折号或类似无效的东西时,才使用括号符号。如果名称存储在变量中也一样。

括号表示法允许您通过存储在变量中的名称访问属性:

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj。X在这种情况下不成立。