使用括号(`[]`)和点(`.`)表示法之间的区别

IT技术 javascript syntax
2021-02-03 12:59:15

使用[].访问数组或对象属性的真正区别是什么使用哪一种?

另外为什么.运营商不允许使用 index 属性?

4个回答

访问成员.称为点符号访问它们[]称为括号符号

点符号仅适用于作为有效标识符名称 [spec] 的属性名称,因此基本上任何名称也是有效的变量名称(有效标识符,另请参阅哪些字符对 JavaScript 变量名称有效?)和任何保留关键字[规格] .

括号表示法需要一个计算结果为字符串(或可以强制为字符串)的表达式,因此您可以使用任何字符序列作为属性 name字符串可以包含的内容没有限制。

例子:

obj.foo;  // valid
obj.else  // valid, reserved keywords are valid identifier names
obj.42    // invalid, identifier names cannot start with numbers
obj.3foo  // invalid,                ""
obj.foo-bar // invalid, `-` is not allowed in identifier names

obj[42]   // valid, 42 will be coerced to "42"
obj["--"] // valid, any character sequence is allowed
obj[bar]  // valid, will evaluate the variable `bar` and 
          // use its value as property name

使用括号表示法:

  • 当属性名称包含在变量中时,例如obj[foo].
  • 属性名称包含标识符中不允许的字符,例如以数字开头,或包含空格或破折号 ( -),例如obj["my property"]

使用点表示法:在所有其他情况下。

但有一个关于保留关键字警告虽然规范允许将它们用作属性名称并使用点符号,但并非所有浏览器或工具都尊重这一点(尤其是较旧的 IE 版本)。因此,我认为最好的解决方案是避免对属性名称使用保留关键字,或者如果不能,则使用括号表示法。


†:这也是您只能使用括号表示法访问数组元素的原因。标识符不能以数字开头,因此不能只由数字组成。

我已经在答案中提供了一个链接。单击“标识符名称”。
2021-03-25 12:59:15
2021-03-29 12:59:15
正如你所说的标识符名称不能以数字开头,还有什么其他规则,你能说明一下或提供任何链接吗?
2021-04-05 12:59:15

.当您知道属性名称时应该使用

var object = {};
object.property = 'whatever';

,[]当属性名称包含在变量中时使用

var object = {};
var property = 'another-property';
object[property] = 'whatever';

由于@DCoder 添加了某些对象属性,因此在不使用[]表示法的情况下无法访问它们,因为它们的名称破坏了语法。例如,名为classdefault或 data-prop-value 的属性

@FelixKling:不幸的是,我在 IE 8 中遇到了相反的情况。
2021-03-22 12:59:15
@DCoder:可以使用点符号访问保留关键字。
2021-03-27 12:59:15
@DCoder:好的,让我们根据规范说这是可能的...无论如何我对 IE 的期望不高;) 就我个人而言,我避免为属性名称使用保留关键字。
2021-03-29 12:59:15
一些例子会使这个答案非常好:)
2021-04-01 12:59:15
此外,某些对象属性在不使用[]符号的情况下无法访问,因为它们的名称破坏了语法。例如性质命名classdefaultdata-prop-value
2021-04-01 12:59:15

还有为什么没有。运算符允许索引属性?我真的想要充分的理由。谢谢你。

好吧,如果可能的话,请考虑:

var a = 0.5;

您是指数字0.5还是访问数字5元素?看:

Number.prototype[5] = 3;

0[5] //3
0.5 // 0.5

如果你允许语法0.5等于0[5],那么你怎么知道你的意思?

然而,可以直接将数字与对象字面量一起使用:

var a = {
    0: 3,
    1: 5
};

点运算符和索引(括号表示法)运算符都用于访问对象的属性。通常使用点运算符访问速度相当快,因为​​通过窗口访问变量要慢得多。但是如果变量中有特殊字符,则不能使用点运算符,因为它会出错。对于这种情况,我们需要使用索引运算符并将变量名作为字符串格式传递,这意味着双引号下,否则会给出未定义的错误。例如-

var abc = {
    font-size : "12px"
} 
Using dot operator - abc.font-size;           //it will give error (Incorrect)
Using index operator - abc["font-size"];      //12px (Correct)