本文深入探讨JavaScript中访问对象属性的两种核心方式：点操作符（`.`）和方括号操作符（`[]`）。我们将阐明它们各自的适用场景、语法差异，并通过实际代码示例，特别是动态属性访问的场景，帮助开发者避免常见错误，确保在处理对象数据时能够灵活且准确地获取所需属性值。
在JavaScript中，对象是核心的数据结构之一，而访问其属性是日常开发中不可或缺的操作。JavaScript提供了两种主要的语法来访问对象的属性：点操作符（.）和方括号操作符（[]）。理解这两种方式的区别及其适用场景，对于编写健壮和灵活的代码至关重要。
1. 点操作符（.）
点操作符是最常见的属性访问方式，其语法简洁明了。
语法：object.propertyName
立即学习“Java免费学习笔记（深入）”；
适用场景： 当属性名是一个已知的、合法的JavaScript标识符（即不包含特殊字符、空格，且不是保留字）时，通常使用点操作符。这种方式通常用于静态属性访问，即在编写代码时属性名就已经确定。
示例：
const product = {
name: 'TV LCD',
price: 100
};
console.log(product.name); // 输出: TV LCD
console.log(product.price); // 输出: 1002. 方括号操作符（[]）
方括号操作符提供了更大的灵活性，它允许我们使用变量或包含特殊字符的字符串作为属性名。
语法：object[propertyName] 这里的 propertyName 可以是一个字符串字面量，也可以是一个包含属性名字符串的变量。
适用场景：
- 动态属性访问： 当属性名在运行时才能确定，例如通过函数参数传递、用户输入或循环迭代获取时，必须使用方括号操作符。
- 属性名包含特殊字符或空格： 如果属性名不是一个合法的JavaScript标识符（例如 my-property 或 product name），则必须使用方括号操作符，并将属性名作为字符串字面量。
- 属性名是数字： 尽管对象属性通常是字符串，但当属性名是数字时，方括号操作符也是首选。
示例：
const product = {
name: 'TV LCD',
price: 100,
'product-code': 'XYZ123' // 包含特殊字符的属性名
};
let key = 'name';
console.log(product[key]); // 输出: TV LCD (动态访问)
key = 'price';
console.log(product[key]); // 输出: 100 (动态访问)
console.log(product['product-code']); // 输出: XYZ123 (访问特殊属性名)3. 避免动态属性访问中的常见错误
一个常见的误解是试图将点操作符用于动态属性访问。让我们通过一个具体的例子来阐明这一点。
考虑一个filter函数，旨在从对象数组中提取特定属性的值：
错误示例分析：
function filterIncorrect(array, prop) {
var result = array.map(x => {
// 这里的 x.name 始终尝试访问名为 "name" 的字面量属性
// 而 prop 变量的值是字符串 "name"
// 因此，x.name === prop 实际上是比较 "TV LCD" === "name"，结果为 false
if (x.name === prop) {
return x;
}
// 如果条件不满足，map 函数默认返回 undefined
});
return result;
}
const data = [{ name: 'TV LCD', price: 100 }, { name: 'PC', price: 500 }];
console.log(filterIncorrect(data, "name")); // 预期输出 [undefined, undefined]在这个filterIncorrect函数中，当prop参数传入"name"时，x.name === prop的判断逻辑实际上是x.name === "name"。然而，x.name的值在第一个对象中是"TV LCD"，在第二个对象中是"PC"。显然，"TV LCD"不等于"name"，"PC"也不等于"name"。因此，if条件始终为false，导致map回调函数没有明确的返回值，默认返回undefined，最终得到[undefined, undefined]的结果。
正确示例：利用方括号操作符实现动态属性访问
要正确地根据变量prop来访问对象的属性，我们必须使用方括号操作符。
function filterCorrect(array, prop) {
var result = array.map(x => {
// 使用方括号操作符 x[prop] 动态地访问属性
// 当 prop 为 "name" 时，它等同于 x["name"] 或 x.name
// 但关键在于，prop 的值是可变的，方括号允许我们根据其当前值来访问
return x[prop];
});
return result;
}
const data = [{ name: 'TV LCD', price: 100 }, { name: 'PC', price: 500 }];
console.log(filterCorrect(data, "name")); // 输出: [ 'TV LCD', 'PC' ]
console.log(filterCorrect(data, "price")); // 输出: [ 100, 500 ]在这个filterCorrect函数中，x[prop]能够正确地根据prop变量的值来获取对应的属性。如果prop是"name"，它会获取x.name的值；如果prop是"price"，它会获取x.price的值。这正是动态属性访问所需要的行为。
总结与注意事项
- 点操作符（.）： 适用于属性名已知且为合法标识符的静态访问。
- 方括号操作符（[]）： 适用于属性名动态变化（存储在变量中）、包含特殊字符或空格，以及数字属性名的情况。它是实现灵活、通用代码的关键。
在编写涉及对象属性访问的函数时，请务必根据属性名的确定性来选择合适的访问方式。理解并正确运用点操作符和方括号操作符，将显著提升您JavaScript代码的健壮性和可维护性。
