属性访问器

您可以通过以下两种方式设置、更改和访问对象属性:点表示法和括号表示法。

如前面的一些示例所示,点表示法在. 对象和属性键:

const myObj = {
   
"myProp": "String value."
};

myObj
.myProp;
> "String value."

您可以使用点分表示法来访问、更改或创建新的属性: 赋值运算符

const myObj = {};

myObj
.myProp = "String value.";

myObj
;
> Object { myProp: "String value." }

通过使用点表示法链接属性键,您可以访问 本身即为对象的属性的对象:

const myObj = {
   
"myProp": {
           
"childProp" : true
   
}
};

myObj
.myProp.childProp;
> true;

但是,当链中指定的键可能 都会导致错误。在以下示例中,myMissingProp 不是 属性,因此尝试访问 myObj.myMissingPropmyObj 结果为 undefined。然后尝试访问 undefined 上的属性,就像 它是一个对象,会导致错误:

const myObj = {
   
"myProp": {
           
"childProp" : true
   
}
};

> myObj.myMissingProp
> undefined

myObj
.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined

为了解决这个问题,ES2020 引入了一个“可选链运算符”(?.) 安全地访问对象的嵌套属性。

const myObj = {
   
"myProp": {
           
"childProp" : true
   
}
};

myObj
.myMissingProp?.childProp;
> undefined

使用点表示法访问的键不像字符串一样用引号引起来 都有哪些区别。这意味着,您可以使用点表示法来仅访问属性键 是有效的标识符

const myObj = {
   
"1": true,
   
"key with spaces": true
};

myObj
.1;
> Uncaught SyntaxError: unexpected token: numeric literal

myObj
.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'

因此,最佳做法是遵循标识符规则 。如果无法对 对于给定的键,可以使用备用括号表示法语法设置和访问 不遵循标识符规则的基于字符串的对象键。

括号表示法

括号表示法使用一对括号 ([]),其中包含用于计算 一个字符串(或符号),表示 属性键。

const myObj = {
   
"myProp": "String value."
};

myObj
["myProp"];
> "String value."

此语法相当宽松,可能也足够宽松 令人感到困惑,因为方括号中的值将作为字符串字面量进行求值 无论其数据类型如何。例如,这里的布尔值 false 和 数值 10 用于访问与字符串相关联的属性 文本键 "false""10"

const myObj = {
   
"false": 25,
   
"10" : true,
   
"key with spaces": true
};

myObj
[false];
> 25

myObj
[10];
> true

myObj
["key with spaces"];
> true

此语法的优势在于其灵活性,让您可以使用 动态创建的字符串来访问属性。以下示例使用 随机数,用于选择对象的三个属性之一:

const colors = {
   
"color1" : "red",
   
"color2" : "blue",
   
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );

colors
[ "color" + randomNumber ];
> "blue"

与点分表示法一样,您可以使用括号表示法来访问和创建新的 属性使用赋值运算符:

const myObj = {};

myObj
[ "myProp" ] = "String value.";

myObj
;
> Object { myProp: "String value." }