括号表示法可以使用变量，所以它在两个点表示法不起作用的情况下很有用:

1)动态确定属性名时(直到运行时才知道确切的名称)。

2)当使用for..in循环遍历对象的所有属性时。

来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

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

我有这样的代码:

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

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

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

如果属性名有特殊字符，则需要使用括号:

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

除此之外，我想这只是个人喜好的问题。恕我直言，点表示法更短，而且更明显地表明它是一个属性而不是数组元素(当然JavaScript没有关联数组)。

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

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

window['parent']['func']

并不等同于

window.['parent.func']

我们可以用:

window['parent']['func'] 

or

window.parent.func 

访问它

或者当你想动态改变一个元素的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
  }
}