除了第一种形式可以使用变量而不仅仅是字符串文字这一显而易见的事实之外，是否有任何理由使用其中一种而不是另一种，如果是这样，在哪些情况下?
在代码:
// Given:
var foo = {'bar': 'baz'};
// Then
var x = foo['bar'];
// vs.
var x = foo.bar;
上下文:我写了一个代码生成器，产生这些表达式，我想知道哪个更可取。
当前回答
一般来说，他们做同样的工作。 尽管如此，括号符号给了你做点符号做不到的事情的机会，比如
var x = elem["foo[]"]; // can't do elem.foo[];
这可以扩展到任何包含特殊字符的属性。
其他回答
[]符号有用的情况:
如果您的对象是动态的，并且在键中可能有一些随机值，如number和[]或任何其他特殊字符，例如-
var a = {1:3};
如果你试图访问a。1，它会报错，因为它期待的是一个字符串。
点表示法和括号表示法都用于在JavaScript中访问对象属性。点表示法是最常用的，因为它更容易阅读和理解。为什么我们要用括号，这两者有什么区别呢?好吧，方括号符号[]允许我们使用变量访问对象属性，因为它将方括号内的表达式转换为字符串。
Const person = { 名称:“约翰”, 年龄:30 }; / /点符号 const nameDot = person.name; console.log (nameDot); / /“约翰” const name括号= person['name']; console.log (nameBracket); / /“约翰”
现在，让我们看一个变量的例子:
Const person = { 名称:“约翰”, 年龄:30 }; const myName = 'name'; console.log(人[名字]); / /“约翰”
点表示法的另一个优点是只包含字母数字(以及_和$)，例如，如果你想访问一个像下面这样的对象(包含'-'，你必须使用括号表示法)
Const person = { my-name: John ｝ console.log(人['我的名字']);/ /“约翰” / / console.log (person.my-name);/ /错误
点表示法总是可取的。如果你正在使用一些“更聪明的”IDE或文本编辑器，它将显示来自该对象的未定义名称。 只有当你的名字有破折号或类似无效的东西时，才使用括号符号。如果名称存储在变量中也一样。
或者当你想动态改变一个元素的classList动作时:
// Correct
showModal.forEach(node => {
node.addEventListener(
'click',
() => {
changeClass(findHidden, 'remove'); // Correct
},
true
);
});
//correct
function changeClass(findHidden, className) {
for (let item of findHidden) {
console.log(item.classList[className]('hidden'));// Correct
}
}
// Incorrect
function changeClass(findHidden, className) {
for (let item of findHidden) {
console.log(item.classList.className('hidden')); // Doesn't work
}
}
括号表示法可以使用变量，所以它在两个点表示法不起作用的情况下很有用:
1)动态确定属性名时(直到运行时才知道确切的名称)。
2)当使用for..in循环遍历对象的所有属性时。
来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
