正文

轻松学会JS对象属性引用：简单案例+实用技巧解析

/0 浏览量
0330

在JavaScript中，对象是存储数据的一种方式，它允许你将数据存储在键值对的形式中。理解如何引用对象的属性是JavaScript编程的基础。下面，我将通过一些简单案例和实用技巧来帮助你轻松学会JS对象属性引用。

一、对象属性引用的基本方法

在JavaScript中，有几种方法可以引用对象的属性：

  1. 使用点号（.）语法。
  2. 使用方括号（[]）语法。

1. 点号语法

点号语法是最常用的引用属性的方法。假设我们有一个对象person，它有两个属性：name和age，我们可以这样引用它们：

let person = {
    name: 'Alice',
    age: 25
};

console.log(person.name); // 输出：Alice
console.log(person.age); // 输出：25

2. 方括号语法

方括号语法在属性名是动态计算或包含特殊字符时很有用。例如，如果你有一个属性名是一个变量：

let key = 'name';
console.log(person[key]); // 输出：Alice

同样，如果属性名包含空格或特殊字符：

let person = {
    'first name': 'Alice',
    'last name': 'Johnson'
};

console.log(person['first name']); // 输出：Alice
console.log(person['last name']); // 输出：Johnson

二、属性引用的技巧

1. 访问不存在的属性

当尝试访问一个不存在的属性时，使用点号语法会返回undefined，而使用方括号语法则会返回undefined或null，取决于浏览器。

console.log(person.gender); // 使用点号语法，输出：undefined
console.log(person['gender']); // 使用方括号语法，输出：undefined 或 null

2. 动态属性名

方括号语法允许你通过字符串表达式动态设置或读取属性名。

let key = 'age';
person[key] = 26; // 设置属性值
console.log(person[key]); // 读取属性值，输出：26

3. 删除属性

使用delete操作符可以删除对象的属性。

delete person.name;
console.log(person.name); // 输出：undefined

三、简单案例

让我们通过一个简单案例来巩固所学知识。假设我们要创建一个表示学生信息的对象，包括学生的姓名、年龄和成绩。

let student = {
    name: 'Bob',
    age: 20,
    score: {
        math: 90,
        science: 85,
        literature: 95
    }
};

// 引用属性
console.log(student.name); // 输出：Bob
console.log(student['score'].math); // 输出：90

// 设置属性
student.age = 21;
student['score'].science = 88;

// 删除属性
delete student.name;

console.log(student); // 输出：{ age: 21, score: { math: 90, science: 88, literature: 95 } }

通过这个案例，你可以看到如何使用点号语法和方括号语法来引用和修改对象的属性。

希望这篇文章能够帮助你轻松学会JS对象属性引用。记住，多练习是提高的关键。

-- 展开阅读全文 --