感谢您关注 Google I/O 大会！观看点播内容。
web.dev
资源
JavaScript
属性访问器
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
您可以通过以下两种方式设置、更改和访问对象属性：点表示法和括号表示法。
点表示法
如前面的一些示例所示，点表示法在.
对象和属性键：
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." }
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2024-03-31。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC)：2024-03-31。"],[],[]]