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

问题描述：

除了第一种形式可以使用变量而不仅仅是字符串文字这个显而易见的事实之外，还有其他理由使用其中一种而不是另一种吗？如果是的话，在什么情况下使用呢？

在代码中：

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

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

// vs. 
var x = foo.bar;

背景：我编写了一个生成这些表达式的代码生成器，我想知道哪个更可取。

解决方案 1：

（来源于这里。）

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

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

包括非 ASCII（UTF-8）字符，如myForm["ダ"]（更多示例）中所示。

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

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

解决方案 2：

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

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

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

解决方案 3：

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

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

对于数组

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

解决方案 4：

在 Internet Explorer 8 中，点符号不适用于某些关键字（如new和class）。

我有这个代码：

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

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

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

解决方案 5：

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

解决方案 6：

一般来说，它们的作用是一样的。

不过，括号表示法可以让你做一些用点表示法做不到的事情，比如

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

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

解决方案 7：

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

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

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

解决方案 8：

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

window['parent']['func']

不等同于

window.['parent.func']

我们可以使用：

window['parent']['func'] 

或者

window.parent.func 

访问它

解决方案 9：

以下情况必须使用方括号表示法 -

1. 属性名称是数字。

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

1. 属性名称具有特殊字符。

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

1. 属性名称被分配给一个变量，并且您想通过该变量访问属性值。

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

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

解决方案 10：

括号表示法可以使用变量，因此在点表示法不起作用的两种情况下很有用：

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

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

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

解决方案 11：

[]符号有用的情况：

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

var a = { 1 : 3 };

现在，如果您尝试以类似的方式访问，a.1它将会出现错误，因为它在那里期待一个字符串。

解决方案 12：

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

解决方案 13：

x-proxy让我再补充一些方括号符号的使用情况。如果你想访问某个对象中的属性，那么-就会被错误地解释。还有一些其他情况，比如空格、点等，点操作对你没有帮助。此外，如果你在变量中有一个键，那么访问对象中键的值的唯一方法是使用方括号符号。希望你能获得更多背景信息。

解决方案 14：

点符号失效的示例

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,