JavaScript 中如何访问和修改对象属性？

推荐答案

在 JavaScript 中，可以通过点号（.）或方括号（[]）来访问和修改对象的属性。

访问对象属性

// www.javascriptcn.com code example
const person = {
  name: "Alice",
  age: 25
};

// 使用点号访问属性
console.log(person.name); // 输出: Alice

// 使用方括号访问属性
console.log(person['age']); // 输出: 25

修改对象属性

// www.javascriptcn.com code example
const person = {
  name: "Alice",
  age: 25
};

// 使用点号修改属性
person.name = "Bob";
console.log(person.name); // 输出: Bob

// 使用方括号修改属性
person['age'] = 30;
console.log(person.age); // 输出: 30

本题详细解读

1. 访问对象属性

JavaScript 提供了两种方式来访问对象的属性：

• 点号（.）：适用于属性名是有效的标识符（即符合变量命名规则）的情况。
• 方括号（[]）：适用于属性名是动态的或不符合标识符命名规则的情况。

示例

// www.javascriptcn.com code example
const person = {
  name: "Alice",
  "favorite-color": "blue"
};

// 使用点号访问
console.log(person.name); // 输出: Alice

// 使用方括号访问
console.log(person['favorite-color']); // 输出: blue

2. 修改对象属性

修改对象属性的方式与访问类似，同样可以使用点号或方括号。

示例

// www.javascriptcn.com code example
const person = {
  name: "Alice",
  age: 25
};

// 使用点号修改
person.name = "Bob";
console.log(person.name); // 输出: Bob

// 使用方括号修改
person['age'] = 30;
console.log(person.age); // 输出: 30

3. 动态属性名

方括号语法在处理动态属性名时非常有用，特别是在属性名是变量或需要计算的情况下。

示例

// www.javascriptcn.com code example
const key = "age";
const person = {
  name: "Alice",
  age: 25
};

console.log(person[key]); // 输出: 25

person[key] = 30;
console.log(person.age); // 输出: 30

4. 注意事项

• 如果使用方括号访问属性，属性名必须是字符串或可以转换为字符串的值。
• 如果属性名是数字，方括号语法会自动将其转换为字符串。

示例

const obj = {
  1: "one",
  2: "two"
};

console.log(obj[1]); // 输出: one
console.log(obj['2']); // 输出: two

通过以上方式，可以灵活地访问和修改 JavaScript 对象的属性。