浅谈JS使用[ ]来访问对象属性

下面是详细讲解“浅谈JS使用[ ]来访问对象属性”的完整攻略。

什么是对象属性？

在 JavaScript 中，对象属性指的是对象中保存数据的一个部分。对象的属性可以存储任何类型的数据，包括字符串、数字、布尔值、对象等等。

比如下面这个简单的对象：

const myObj = {
  name: "Tom",
  age: 18
};

它有两个属性，分别是 name 和 age，分别对应字符串 "Tom" 和数字 18。我们可以通过“点号”语法或“中括号”语法来访问这些属性。

使用“点号”语法访问属性

使用“点号”语法访问属性非常简单，只需要写对象名，紧跟着一个“点号”，然后再写属性名即可。比如：

console.log(myObj.name); // 输出 "Tom"
console.log(myObj.age); // 输出 18

使用“中括号”语法访问属性

和“点号”语法不同，使用“中括号”语法访问属性需要将属性名放在一对方括号内，比如：

console.log(myObj["name"]); // 输出 "Tom"
console.log(myObj["age"]); // 输出 18

这种方式可以动态地获取属性的值，比如：

const myKey = "name";
console.log(myObj[myKey]); // 输出 "Tom"

使用中括号访问的优势

使用“中括号”语法访问对象属性并没有“点号”语法访问那么方便，但是它有其优势。特别是当要访问的属性名比较复杂，不能直接使用“点号”语法时，使用“中括号”语法就会比较方便。

比如，如果要访问以下对象的 "first name" 属性，使用“点号”语法就不行了：

const myObj2 = {
  "first name": "Tom",
  "last name": "Smith"
};

这时就只能使用“中括号”语法了：

console.log(myObj2["first name"]); // 输出 "Tom"

在一些动态的场景中，我们可能需要从用户输入等数据来源获取相应的属性名，这时也需要使用中括号语法来动态获取属性。

总结

这就是浅谈 JS 使用“中括号”来访问对象属性的完整攻略。虽然“点号”语法访问属性更为常见和方便，但在一些复杂或动态的场景中，使用“中括号”语法就能发挥它的特性。希望这篇文章能帮助你更好地理解和使用 JavaScript 对象的属性访问方式。