除了第一种形式可以使用变量而不仅仅是字符串文字这一显而易见的事实之外，是否有任何理由使用其中一种而不是另一种，如果是这样，在哪些情况下?
在代码:
// Given:
var foo = {'bar': 'baz'};
// Then
var x = foo['bar'];
// vs.
var x = foo.bar;
上下文:我写了一个代码生成器，产生这些表达式，我想知道哪个更可取。
当前回答
我举了另一个例子来清楚地理解用法上的差异。当使用嵌套数组和嵌套对象时
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
其他回答
我举了另一个例子来清楚地理解用法上的差异。当使用嵌套数组和嵌套对象时
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
[]符号有用的情况:
如果您的对象是动态的，并且在键中可能有一些随机值，如number和[]或任何其他特殊字符，例如-
var a = {1:3};
如果你试图访问a。1，它会报错，因为它期待的是一个字符串。
括号表示法允许您通过存储在变量中的名称访问属性:
var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello
obj。X在这种情况下不成立。
点表示法和括号表示法都用于在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);/ /错误
或者当你想动态改变一个元素的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
}
}
