Question

除了显而易见的事实，即第一种形式可以使用变量而不仅仅是字符串文字，是否有任何理由使用其中一种，如果是，在哪种情况下？

在代码中：

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

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

// vs. 
var x = foo.bar;

上下文：我编写了一个生成这些表达式的代码生成器，我想知道哪个更好。

Answer 1

（来自here。）

方括号表示法允许使用不能与点表示法一起使用的字符：

var foo = myForm.foo[]; // incorrect syntax
var foo = myForm["foo[]"]; // correct syntax

包括非ASCII（UTF-8）字符，如myForm["ダ"]（more examples）。

其次，方括号表示法在处理时很有用属性名称以可预测的方式变化：

for (var i = 0; i < 10; i++) {
  someFunction(myForm["myControlNumber" + i]);
}

<强>综述：

点符号编写速度更快，阅读更清晰。

方括号表示法允许访问包含的属性   特殊人物和选择   使用变量的属性

另一个不能与点表示法一起使用的字符示例是属性名称，它们本身包含一个点。

例如，json响应可以包含名为bar.Baz的属性。

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

Answer 2

括号表示法允许您按名称存储在变量中访问属性：

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

obj.x在这种情况下不起作用。

Answer 3

Dot notation不适用于Internet Explorer 8中的某些关键字（如new和class）。

我有这段代码：

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

这会触发可怕的“预期标识符”（至少在Windows XP上的IE8上，我没有尝试过其他环境）。简单的解决方法是切换到括号表示法：

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

Answer 4

使用这些表示法时要小心：例如。如果我们想要访问窗口父级中存在的函数。在IE中：

window['parent']['func']

不等于

window.['parent.func']

我们可以使用：

window['parent']['func']

或

window.parent.func

访问它

Answer 5

在JavaScript中访问属性的两种最常用方法是使用点和方括号。两个value.x and value[x]都访问值上的属性，但不一定是相同的属性。区别在于如何解释x。使用点时，点后面的部分必须是有效的变量名，并直接命名该属性。使用方括号时，将计算括号之间的表达式以获取属性名称。 value.x获取名为“x”的值的属性，而value [x]尝试计算表达式x并将结果用作属性名称。

因此，如果您知道您感兴趣的属性称为“长度”，则说value.length。如果要提取由变量i中保存的值命名的属性，请说value[i]。并且因为属性名称可以是任何字符串，如果要访问名为“2”或“John Doe”的属性，则必须使用方括号：value[2] or value["John Doe"]。即使您事先知道属性的确切名称也是如此，因为“2” nor “John Doe”都不是有效的变量名，因此无法通过点表示法访问。

如果是数组

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

Answer 6

一般来说，他们做同样的工作尽管如此，括号表示法让您有机会使用点符号来做一些你不能做的事情，比如

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

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

Answer 7

如果属性名称包含特殊字符，则需要使用括号：

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

除此之外，我认为这只是一个品味问题。恕我直言，点符号更短，它更明显，它是一个属性而不是数组元素（虽然当然JavaScript没有关联数组）。

Answer 8

括号表示法可以使用变量，因此在点符号不起作用的两个实例中很有用：

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

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

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

Answer 9

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'

使用变量访问变量：

const variable = 'name';
const obj = {
  name: 'value'
};
// Bracket Notation
obj[variable]; // ✅ 'value'
// Dot Notation
obj.variable; // undefined

Answer 10

在 -

时必须使用方括号表示法

属性名称是数字。

var ob = {
  1: 'One',
  7 : 'Seven'
}
ob.7  // SyntaxError
ob[7] // "Seven"

属性名称具有特殊字符。

var ob = {
  'This is one': 1,
  'This is seven': 7,
}  
ob.'This is one'  // SyntaxError
ob['This is one'] // 1

属性名称已分配给变量，您想要访问该变量此变量的属性值。

var ob = {
  'One': 1,
  'Seven': 7,
}

var _Seven = 'Seven';
ob._Seven  // undefined
ob[_Seven] // 7

Answer 11

[]符号有用的情况：

如果您的对象是动态的，并且在number和[]或其他任何特殊字符的键中可能存在一些随机值，例如 -

var a = { 1 : 3 };

现在，如果您尝试以类似a.1的方式进行访问，则会出现错误，因为它预计会出现一个字符串。

Answer 12

让我添加一些方括号表示法的用例。如果您想在对象中访问属性x-proxy，那么-将被错误地解释。他们的其他一些情况也像空格，点等，其中点操作对你没有帮助。此外，如果你有一个变量中的键，那么只能通过括号表示法来访问对象中键的值。希望你能得到更多的背景。

Answer 13

点表示法失败的示例

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "?":'?',
   "a[]":[ 
      2,
      2
   ]
};

// correct
console.log(json['value:']);
console.log(json['help"']);
console.log(json["help\""]);
console.log(json['hello\'']);
console.log(json["hello'"]);
console.log(json["data+"]);
console.log(json["?"]);
console.log(json["a[]"]);

// wrong
console.log(json.value:);
console.log(json.help");
console.log(json.hello');
console.log(json.data+);
console.log(json.?);
console.log(json.a[]);

属性名称不应干扰javascript的语法规则，以便您能够以json.property_name的身份访问它们

Answer 14

点表示法始终是首选。如果使用的是“更智能”的IDE或文本编辑器，它将显示该对象的未定义名称。仅当您的名称带有破折号或类似无效的名称时，才使用括号表示法。以及名称是否存储在变量中。

Answer 15

var foo = { 'bar': 'baz' };
console.log(foo['bar']); // baz
console.log(foo.bar);   //  baz

在上面的例子中，两者都可以正常工作，但是如果我有一个像这样的两个词的键呢

var foo = { 'bar bar': 'baz' };
console.log(foo['bar bar']); // baz
console.log(foo.bar bar);    // error

因此，在使用点表示法时，键名不能包含 spaces、hyphens 或 start with a number. 点表示法不适用于所有情况。

JavaScript属性访问：点符号与括号？

15 个答案:

点符号的局限性

使用变量访问变量：