属性访问器

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

点表示法

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

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." }