深入理解JavaScript对象属性访问：点操作符与方括号操作符-js教程-PHP中文网

深入理解JavaScript对象属性访问：点操作符与方括号操作符

霞舞

发布： 2025-10-16 10:04:02

原创

918人浏览过

深入理解javascript对象属性访问：点操作符与方括号操作符

本文深入探讨JavaScript中访问对象属性的两种核心方式：点操作符（`.`）和方括号操作符（`[]`）。我们将阐明它们各自的适用场景、语法差异，并通过实际代码示例，特别是动态属性访问的场景，帮助开发者避免常见错误，确保在处理对象数据时能够灵活且准确地获取所需属性值。

在JavaScript中，对象是核心的数据结构之一，而访问其属性是日常开发中不可或缺的操作。JavaScript提供了两种主要的语法来访问对象的属性：点操作符（.）和方括号操作符（[]）。理解这两种方式的区别及其适用场景，对于编写健壮和灵活的代码至关重要。

1. 点操作符（.）

点操作符是最常见的属性访问方式，其语法简洁明了。

语法：object.propertyName

立即学习“Java免费学习笔记（深入）”；

适用场景： 当属性名是一个已知的、合法的JavaScript标识符（即不包含特殊字符、空格，且不是保留字）时，通常使用点操作符。这种方式通常用于静态属性访问，即在编写代码时属性名就已经确定。

示例：

造点AI

夸克 · 造点AI

325

查看详情

const product = {
  name: 'TV LCD',
  price: 100
};

console.log(product.name);  // 输出: TV LCD
console.log(product.price); // 输出: 100

登录后复制

2. 方括号操作符（[]）

方括号操作符提供了更大的灵活性，它允许我们使用变量或包含特殊字符的字符串作为属性名。

语法：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的值。这正是动态属性访问所需要的行为。