JS（七）avaScript中的对象

01 什么是对象

在JavaScript中，对象是一种复合数据类型，用于存储键值对。对象可以包含多个属性（键值对），每个属性都有一个名称（键）和一个值。
这些值可以是基本数据类型（如字符串、数字、布尔值）、其他对象，或者函数。
对象是 JavaScript 中最重要的数据类型之一，几乎所有的东西都是对象，包括数组、函数、日期，甚至是原始数据类型的包装对象（例如字符串、数字和布尔值）。
对象提供了一种灵活的方式来组织和管理数据，使得开发者能够以更加直观和结构化的方式处理复杂的数据结构。

JavaScript 对象具有以下特点：

属性和方法：对象由属性和方法组成，属性是键值对中的键，方法是键值对中的函数值。
动态性：对象的属性和方法可以随时添加、修改或删除。
无序性：对象的属性没有固定的顺序。
引用类型：对象是引用类型的实例，可以通过引用来传递和操作。
原型继承：JavaScript 中的对象可以通过原型链来继承属性和方法。

以下是一个简单的 JavaScript 对象示例：

// 创建一个空对象
var person = {};// 添加属性
person.name = "John";
person.age = 30;
person.gender = "male";// 添加方法
person.sayHello = function() {console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
};// 调用方法
person.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.

02 为什么使用对象

组织数据：对象提供了一种组织和存储数据的方式，可以将相关的数据属性组合在一起，形成一个逻辑上的单元。
抽象复杂性：对象允许将复杂的数据结构抽象为一个单一的实体，使得代码更易于理解和维护。
封装：对象可以封装属性和方法，通过公开接口暴露特定的功能，隐藏实现细节，从而提高代码的模块化和可重用性。
可扩展性：对象的属性和方法可以随时添加、修改或删除，使得代码更具灵活性和可扩展性。
代码重用：通过创建对象模板（例如构造函数或类），可以实现代码的重用，多个对象可以共享相同的属性和方法。
传递和返回复杂值：对象可以作为参数传递给函数，也可以作为函数的返回值，从而实现对复杂值的传递和返回。
面向对象编程：JavaScript 是一种面向对象的语言，对象是面向对象编程的基本单位，使用对象可以更轻松地实现面向对象编程的思想和模式。
JSON 数据交换：JavaScript 对象符合 JSON（JavaScript Object Notation）格式，因此在 Web 开发中经常用于数据交换和通信。

03 创建对象

1.对象字面量

使用对象字面量的方式可以直接创建一个对象，并指定其属性和方法。

var person = {name: "John",age: 30,sayHello: function() {console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");}
};
console.log(person)// 输出: {name: 'John', age: 30, sayHello: ƒ}

2.使用构造函数

使用构造函数可以创建一个对象模板，并通过new关键字实例化对象。

function Person(name, age) {this.name = name;this.age = age;this.sayHello = function() {console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");};
}var person1 = new Person("John", 30);// 输出: Person {name: 'John', age: 30, sayHello: ƒ}
var person2 = new Person("Alice", 25);// 输出: Person {name: 'Alice', age: 25, sayHello: ƒ}console.log(person1);
console.log(person2);

3.使用Object.create()方法

使用Object.create()方法可以创建一个新对象，并指定其原型对象。

var personProto = {sayHello: function() {console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");}
};var person = Object.create(personProto);
person.name = "John";
person.age = 30;
person.sayHello()// 输出: Hello, my name is John and I'm 30 years old.
console.log(person);// 输出: {name: 'John', age: 30}

4.使用类（ES6及以后版本）

使用类的方式可以更方便地定义对象模板，并创建对象实例。

class Person {constructor(name, age) {this.name = name;this.age = age;}sayHello() {console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");}
}var person = new Person("John", 30);
person.sayHello()// 输出: Hello, my name is John and I'm 30 years old.
console.log(person);// 输出: {name: 'John', age: 30}

04 访问属性/方法

1.点符号 (.) 访问：

使用点符号可以直接访问对象的属性和方法，语法为：对象名.属性名 或 对象名.方法名()。

var person = {name: "John",age: 30,sayHello: function() {console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");}
};console.log(person.name); // 输出: John
person.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.

2.方括号 ([]) 访问：

使用方括号可以动态地访问对象的属性和方法，语法为：对象名["属性名"] 或 对象名["方法名"]()。

var person = {name: "John",age: 30,sayHello: function() {console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");}
};console.log(person.name); // 输出: John
person.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.var propertyName = "name";
console.log(person[propertyName]); // 输出: Johnvar methodName = "sayHello";
person[methodName](); // 输出: Hello, my name is John and I'm 30 years old.console.log(person);// 输出: name: 'John', age: 30, sayHello: ƒ}

注意：

通常情况下，使用点符号更为常见和直观，但是方括号语法可以使用变量来动态访问对象的属性和方法，这在某些情况下非常有用。
如果属性或方法名中包含特殊字符或者以数字开头，就必须使用方括号访问，例如：对象名["my-property"] 或 对象名["123method"]()。

05 修改属性

1.直接赋值：

可以直接使用赋值操作符（=）来修改对象的属性值。

javascriptCopy Codevar person = {name: "John",age: 30
};// 修改属性值
person.name = "Alice";
person.age = 25;console.log(person.name); // 输出: Alice
console.log(person.age); // 输出: 25

2.使用对象的方法：

有时候，对象可能会提供一些方法来修改属性值，例如 set 方法。

var person = {_name: "John",_age: 30,setName: function(newName) {this._name = newName;},setAge: function(newAge) {this._age = newAge;}
};// 使用对象的方法修改属性值
person.setName("Alice");
person.setAge(25);console.log(person._name); // 输出: Alice
console.log(person._age); // 输出: 25

06 遍历对象

1.for…in 循环：

使用 for...in 循环可以遍历对象的可枚举属性（包括自身属性和继承属性）。

var person = {name: "John",age: 30,gender: "male"
};for (var key in person) {console.log(key + ": " + person[key]);
}
//  输出:name: John
//  age: 30
//  gender: male

在使用 for...in 循环时，可能会遍历到对象继承的属性，因此需要使用 hasOwnProperty() 方法来判断属性是否为对象自身的属性。

2.Object.keys() 方法：

使用 Object.keys() 方法可以获取对象自身可枚举属性组成的数组，然后可以对数组进行遍历操作。

var person = {name: "John",age: 30,gender: "male"
};Object.keys(person).forEach(function(key) {console.log(key + ": " + person[key]);
});
//  输出:name: John
//  age: 30
//  gender: male

3.Object.getOwnPropertyNames() 方法：

使用 Object.getOwnPropertyNames() 方法可以获取对象自身所有属性（包括不可枚举属性），然后可以对数组进行遍历操作。

var person = {name: "John",age: 30,gender: "male"
};Object.getOwnPropertyNames(person).forEach(function(key) {console.log(key + ": " + person[key]);
});
//  输出:name: John
//  age: 30
//  gender: male

4.方法2与方法3的区别

1.Object.getOwnPropertyNames() 方法：

获取对象自身所有属性（包括不可枚举属性），以数组形式返回。
返回的数组包含对象自身的所有属性，不仅仅是可枚举的属性。
不会获取继承的属性，只返回对象自身的属性。
可以用于获取对象的所有属性，包括不可枚举的属性。

var obj = {a: 1,b: 2
};Object.defineProperty(obj, 'c', {value: 3,enumerable: false // 设置属性 c 为不可枚举
});console.log(Object.getOwnPropertyNames(obj)); // 输出: ["a", "b", "c"]

2.Object.keys() 方法：

获取对象自身可枚举属性的键名，以数组形式返回。
只返回对象自身的可枚举属性，不包括不可枚举的属性和继承的属性。
通常用于获取对象的可枚举属性，比较适合用于遍历对象的键值对。

var obj = {a: 1,b: 2
};Object.defineProperty(obj, 'c', {value: 3,enumerable: false // 设置属性 c 为不可枚举
});console.log(Object.keys(obj)); // 输出: ["a", "b"]