除了第一种形式可以使用变量而不仅仅是字符串文字这一显而易见的事实之外，是否有任何理由使用其中一种而不是另一种，如果是这样，在哪些情况下?
在代码:
// Given:
var foo = {'bar': 'baz'};
// Then
var x = foo['bar'];
// vs.
var x = foo.bar;
上下文:我写了一个代码生成器，产生这些表达式，我想知道哪个更可取。
当前回答
一般来说，他们做同样的工作。 尽管如此，括号符号给了你做点符号做不到的事情的机会，比如
var x = elem["foo[]"]; // can't do elem.foo[];
这可以扩展到任何包含特殊字符的属性。
其他回答
(来源此处)
方括号表示法允许使用点表示法不能使用的字符:
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
括号表示法可以使用变量，所以它在两个点表示法不起作用的情况下很有用:
1)动态确定属性名时(直到运行时才知道确切的名称)。
2)当使用for..in循环遍历对象的所有属性时。
来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
如果属性名有特殊字符，则需要使用括号:
var foo = {
"Hello, world!": true,
}
foo["Hello, world!"] = false;
除此之外，我想这只是个人喜好的问题。恕我直言，点表示法更短，而且更明显地表明它是一个属性而不是数组元素(当然JavaScript没有关联数组)。
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
我举了另一个例子来清楚地理解用法上的差异。当使用嵌套数组和嵌套对象时
const myArray = [
{
type: "flowers",
list: [ "a", "b", "c" ],
},
{
type: "trees",
list: [ "x", "y", "z" ],
}
];
现在如果我们想要访问树列表中的第二项是y。
我们不能一直用括号
const secondTree = myArray[1]["list"][1]; // incorrect syntex
相反，我们必须使用
const secondTree = myArray[1].list[1]; // correct syntex
