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

在代码:

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

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

// vs. 
var x = foo.bar;

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


当前回答

让我再添加一些方括号符号的用例。如果你想访问一个属性,比如对象中的x-proxy,那么-将被错误地解释。还有一些其他的情况,比如空格,点,等等,点运算对你没有帮助。另外,如果你在一个变量中有键,那么在一个对象中访问键值的唯一方法是用括号符号。希望你能了解更多的背景。

其他回答

一般来说,他们做同样的工作。 尽管如此,括号符号给了你做点符号做不到的事情的机会,比如

var x = elem["foo[]"]; // can't do elem.foo[];

这可以扩展到任何包含特殊字符的属性。

括号表示法允许您通过存储在变量中的名称访问属性:

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj。X在这种情况下不成立。

The two most common ways to access properties in JavaScript are with a dot and with square brackets. Both value.x and value[x] access a property on value—but not necessarily the same property. The difference is in how x is interpreted. When using a dot, the part after the dot must be a valid variable name, and it directly names the property. When using square brackets, the expression between the brackets is evaluated to get the property name. Whereas value.x fetches the property of value named “x”, value[x] tries to evaluate the expression x and uses the result as the property name.

So if you know that the property you are interested in is called “length”, you say value.length. If you want to extract the property named by the value held in the variable i, you say value[i]. And because property names can be any string, if you want to access a property named “2” or “John Doe”, you must use square brackets: value[2] or value["John Doe"]. This is the case even though you know the precise name of the property in advance, because neither “2” nor “John Doe” is a valid variable name and so cannot be accessed through dot notation.

对于数组

数组中的元素存储在属性中。因为这些属性的名称都是数字,而且我们经常需要从变量中获取它们的名称,所以我们必须使用括号语法来访问它们。数组的length属性告诉我们它包含多少个元素。这个属性名是一个有效的变量名,我们事先知道它的名字,所以要找到一个数组的长度,你通常写array。长度,因为它比数组[" Length "]更容易写。

我举了另一个例子来清楚地理解用法上的差异。当使用嵌套数组和嵌套对象时

    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

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

我有这样的代码:

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

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

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