微搭低代码入门09对象

1 什么是对象

在JavaScript中，对象（Object）是一种复合值，它将多个值（原始值或其他对象）组织在一起，并通过名字（属性名）来访问这些值。对象可以看作是一组键值对（key-value pairs），其中键是字符串（属性名），值可以是任何数据类型，包括函数。

在现实中，对象可以是任何具体或抽象的事物。比如，一个苹果、一张桌子或一只虫子，这些都可以通过JavaScript中的对象来表示。通过对象的属性，我们可以描述它们的特征；通过对象的方法，我们可以描述它们的行为。

如何定义一个苹果

一个苹果可以有颜色、大小、重量等属性，以及被吃掉这样的行为。在JavaScript中，可以这样定义一个苹果对象：

let apple = {color: "red",size: "medium",weight: 150, // 假设单位是克eat: function() {console.log("The apple is being eaten.");this.weight -= 50; // 吃掉一部分后重量减少}
};console.log(apple.color); // 输出: red
apple.eat();
console.log(apple.weight); // 输出: 100

2 对象的定义

对象可以通过多种方式定义，最常见的是使用对象字面量：

const person = {name: 'Alice',age: 25,greet: function() {console.log('Hello, ' + this.name);}
};

3 访问属性

访问对象的属性可以使用点运算符（.）或中括号（[]）。

点运算符

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

中括号

console.log(person['name']); // 输出: Alice
console.log(person['age']);  // 输出: 25

4 为什么使用中括号来访问属性

动态属性名：中括号允许使用变量作为属性名。

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

特殊字符：如果属性名包含特殊字符（如空格、连字符、数字开头等），必须使用中括号。

const obj = {'first-name': 'John','age 25': 'young'
};
console.log(obj['first-name']); // 输出: John
console.log(obj['age 25']);     // 输出: young

5 使用const定义对象后的操作

如果使用const定义了对象，虽然对象本身不能被重新赋值，但对象的属性可以被修改、添加或删除。

const person = {name: 'Alice',age: 25
};// 修改属性
person.name = 'Bob';
console.log(person.name); // 输出: Bob// 添加新属性
person.gender = 'female';
console.log(person.gender); // 输出: female// 删除属性
delete person.age;
console.log(person.age);    // 输出: undefined

6 对象方法的创建和调用

对象的方法（函数）可以通过对象字面量直接定义，如上例中的greet方法。

const person = {name: 'Alice',greet: function() {console.log('Hello, ' + this.name);}
};// 调用对象的方法
person.greet(); // 输出: Hello, Alice

也可以使用ES6的简写方法语法：

const person = {name: 'Alice',greet() {console.log('Hello, ' + this.name);}
};// 调用对象的方法
person.greet(); // 输出: Hello, Alice

7 访问嵌套对象

嵌套对象是指一个对象中包含另一个对象。要访问嵌套对象的属性，你需要通过链式访问的方式，即使用点号（.）或者方括号（[]）依次访问每一层的属性。

const person = {name: "Alice",address: {city: "New York",street: "5th Avenue",number: 100},hobbies: ["reading", "swimming"]
};// 访问嵌套对象的属性
console.log(person.name); // Alice
console.log(person.address.city); // New York
console.log(person.address["street"]); // 5th Avenue
console.log(person["hobbies"][1]); // swimming

8 使用 for…in 循环遍历对象的属性

for…in 循环用于遍历对象的可枚举属性（包括继承的可枚举属性）。在遍历过程中，每次循环的变量会被赋予对象的一个属性名。

const person = {name: "Alice",age: 30,city: "New York"
};// 使用 for...in 循环遍历对象的属性
for (let key in person) {console.log(key + ": " + person[key]);
}// 输出：
// name: Alice
// age: 30
// city: New York

9 遍历嵌套对象的属性

如果你需要遍历嵌套对象的属性，可以结合递归函数来实现。下面是一个示例，展示如何遍历一个嵌套对象的所有属性（包括嵌套层级的属性）。

const person = {name: "Alice",address: {city: "New York",street: "5th Avenue",number: 100},hobbies: ["reading", "swimming"]
};function traverseObject(obj) {for (let key in obj) {if (typeof obj[key] === 'object' && obj[key] !== null) {// 如果是对象且不为null，则递归遍历traverseObject(obj[key]);} else {// 否则直接输出属性名和值console.log(key + ": " + obj[key]);}}
}// 遍历嵌套对象
traverseObject(person);// 输出：
// name: Alice
// city: New York
// street: 5th Avenue
// number: 100
// 注意：hobbies是一个数组，这里不会被递归展开为单个元素，因为typeof hobbies是'object'，但在这个示例中我们直接输出了它