属性访问器

有两种方法可以设置、更改和访问对象的属性:点表示法方括号表示法

点表示法

如之前的示例所示,点表示法在对象和要访问的属性键之间使用句点 (.)

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 对象的属性,因此尝试访问 myObj.myMissingProp 会导致 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'

因此,最佳实践是在指定属性键时尽可能遵循标识符规则。如果对于给定的键来说不可能做到这一点,那么另一种方括号表示法语法允许您设置和访问不遵循标识符规则的基于字符串的对象键。

方括号表示法

方括号表示法使用一组方括号 ([]),其中包含一个值,该值评估表示属性键的字符串(或 Symbol)。

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