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

在代码:

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

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

// vs. 
var x = foo.bar;

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


当前回答

[]符号有用的情况:

如果您的对象是动态的,并且在键中可能有一些随机值,如number和[]或任何其他特殊字符,例如-

var a = {1:3};

如果你试图访问a。1,它会报错,因为它期待的是一个字符串。

其他回答

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

(来源此处)

方括号表示法允许使用点表示法不能使用的字符:

var foo = myForm.foo[];//错误的语法 var foo = myForm["foo[]"];//正确的语法

包括非ascii (UTF-8)字符,如myForm["ダ"](更多示例)。

其次,方括号符号在处理时很有用 以可预测的方式变化的属性名:

For (var I = 0;I < 10;我+ +){ someFunction(myForm["myControlNumber" + i]); }

摘要:

点表示法写起来更快,读起来更清楚。 方括号符号允许访问包含 特殊字符的选择 使用变量的属性


不能与点表示法一起使用的字符的另一个例子是本身包含点的属性名。

例如,json响应可以包含一个名为bar.Baz的属性。

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

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

window['parent']['func']

并不等同于

window.['parent.func']

我们可以用:

window['parent']['func'] 

or

window.parent.func 

访问它

[]符号有用的情况:

如果您的对象是动态的,并且在键中可能有一些随机值,如number和[]或任何其他特殊字符,例如-

var a = {1:3};

如果你试图访问a。1,它会报错,因为它期待的是一个字符串。

在ie8中,点表示法不适用于某些关键字(如new和class)。

我有这样的代码:

//app.users is a hash
app.users.new = {
  // some code
}

这会触发可怕的“期望标识符”(至少在IE8和windows xp上,我还没有尝试过其他环境)。简单的解决方法是切换到括号符号:

app.users['new'] = {
  // some code
}