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

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

javascript syntax

JavaScript属性访问：点符号与括号？,javascript,syntax,object-literal,Javascript,Syntax,Object Literal,除了第一个表单可以使用变量而不仅仅是字符串文字这一明显事实之外，还有什么理由使用一个而不是另一个，如果是，在哪些情况下代码： // Given: var foo = {'bar': 'baz'}; // Then var x = foo['bar']; // vs. var x = foo.bar; 上下文：我编写了一个生成这些表达式的代码生成器，我想知道哪个更可取。如果属性名称有特殊字符，则需要使用括号： var foo = { "Hello, world!": true,

除了第一个表单可以使用变量而不仅仅是字符串文字这一明显事实之外，还有什么理由使用一个而不是另一个，如果是，在哪些情况下

代码：

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

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

// vs. 
var x = foo.bar;

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

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

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

除此之外，我想这只是口味的问题。恕我直言，点符号较短，它更明显地表明它是一个属性而不是数组元素，尽管JavaScript当然没有关联数组。

来源于

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

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

包括非ASCII UTF-8字符，如myForm[ダ] .

第二，方括号表示法在处理以可预测的方式变化的属性名称：

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

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

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

一般来说，它们做相同的工作。然而，括号表示法给了你机会去做点表示法做不到的事情，比如

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

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

点表示法不适用于internet explorer 8中的某些关键字，如new和class

我有这个密码：

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

这会触发可怕的预期标识符，至少在windows xp上的IE8上，我还没有尝试过其他环境。简单的修复方法是切换到括号表示法：

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

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

1当在运行时之前不知道确切名称时动态确定属性名称

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

来源：

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

不等于

window.['parent.func']

我们可以使用：

window['parent']['func']

或

若要访问[]符号有用的情况，请执行以下操作：

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

变量a={1:3}

现在，如果您尝试访问类似于a.1的属性，它将通过一个错误进行访问，因为它需要一个字符串。

让我再添加一些方括号表示法的用例。如果您想访问一个属性，例如对象中的x-proxy，那么-将被错误解释。它们也是一些其他情况，如空格、点等，其中点操作我不会帮你的。另外，如果你在变量中有键，那么访问对象中键的值的唯一方法是使用括号表示法。希望你能获得更多的上下文。

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

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

对于数组

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

当-

属性名为number

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

点表示法失败的示例

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "Dot notation is always preferable. If you are using some "smarter" IDE or text editor, it will show undefined names from that object. 
Use brackets notation only when you have the name with like dashes or something similar invalid. And also if the name is stored in a variable.
Both foo.bar
 and foo["bar"]
 access a property on foo but not necessarily the same property. The difference is in how bar
 is interpreted. When using a dot, the word after the dot is the literal name of the property. When using square brackets, the expression between the brackets is evaluated to get the property name. Whereas foo.bar fetches the
property of value named “bar”
  , foo["bar"]
 tries to evaluate the expression "bar"
 and uses the result, converted to a string, as the property name
Dot Notation’s Limitation
if we take this oject :
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'
};

json={
值：：4，
“帮助”：2，
您好:32,，
数据+：2，
点不
最好的办法是进行定期检查。如果您使用的是更智能的IDE或文本编辑器，它将显示该对象中未定义的名称。
仅当名称带有类似破折号或类似无效符号时，才使用括号表示法。而且如果名称存储在变量中。foo.bar和foo[bar]都访问foo上的属性，但不一定是同一个属性。区别在于如何解释条形图。使用点时，点后的单词是属性的文字名称。使用方括号时，对括号之间的表达式求值以获取属性名称。而foo.bar获取
属性名为“bar”，foo[bar]尝试计算表达式栏并使用转换为字符串的结果作为属性名
点表示法的局限性
如果我们接受这个项目：
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

使用变量访问变量：
在上面的例子中，两者都很好，但是如果我有一个两个单词的关键字，比如
因此，当使用点表示法时，键名不能包含空格、连字符或以数字开头。点表示法并不适用于所有情况。代码示例和摘要的措辞看起来非常熟悉。没有必要重新发明轮子，是吗？引用它作为参考。点符号对我来说更快至少在我的机器上用Chrome44测试你的浏览器括号符号是faster@chenghuayang当你想访问一个对象的属性，而该对象的键存储在一个变量中时，你不能使用点符号，这并不是对你最初问题的回答，因为到目前为止你已经有了很多很好的解释，但就速度而言，也没有什么值得一提的区别：。上述测试最多只能为两个键提供2%的余量，它们是并驾齐驱的。另请参见，此问题/答案也可用于UTF-8键。您能否详细说明array.length？你说用点表示法访问的属性是不计算的，所以在数组的情况下。长度不是给我们长度字符串而不是计算值吗？在这种情况下，数组中的项数是多少？数组中的元素存储在属性中，这让我感到困惑。您所说的存储在属性中是什么意思？什么是财产？在我的理解中，数组只是一堆没有属性的值。如果它们存储在属性中，为什么它不是属性：值/关联数组？这个答案特别有价值，因为它解释了两种符号之间的差异。这个答案很有帮助。谢谢。在chrome 2019上工作，而且在一些情况下，即使没有破折号，也不允许使用括号符号。例如，您可以编写Math.sqrt25，但不能编写Math['sqrt']25。由于计算的原因，括号表示法会变慢吗？
json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "Dot notation is always preferable. If you are using some "smarter" IDE or text editor, it will show undefined names from that object. 
Use brackets notation only when you have the name with like dashes or something similar invalid. And also if the name is stored in a variable.
Both foo.bar
 and foo["bar"]
 access a property on foo but not necessarily the same property. The difference is in how bar
 is interpreted. When using a dot, the word after the dot is the literal name of the property. When using square brackets, the expression between the brackets is evaluated to get the property name. Whereas foo.bar fetches the
property of value named “bar”
  , foo["bar"]
 tries to evaluate the expression "bar"
 and uses the result, converted to a string, as the property name
Dot Notation’s Limitation
if we take this oject :
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

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