《现代Javascript高级教程》JavaScript对象

妖狐艹你老母 2023-10-13 10:21 60阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">点击在线阅读，体验更好</a></th> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">链接</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代JavaScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">深入浅出Dart</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代TypeScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
 </tbody> 
</table>

## JavaScript对象 ##

### 引言 ###

在 JavaScript 中，对象是一种非常重要的数据类型，它允许我们以键值对的形式组织和存储数据。对象提供了丰富的属性和方法，使得我们能够创建、操作和管理复杂的数据结构。本文将详细介绍 JavaScript 对象的属性和常用 API，并提供一个模拟实现对象的示例。同时，还将探讨对象的应用场景和一些相关的参考资料。

### 1. 对象属性 ###

JavaScript 对象的属性是以键值对的形式存储的。对象属性可以是任意类型的值，包括基本数据类型（如字符串、数字、布尔值）和其他对象。

#### a. 访问属性 ####

我们可以使用点符号或方括号来访问对象的属性。例如：

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

#### b. 修改属性 ####

可以通过赋值运算符来修改对象的属性值。例如：

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

#### c. 删除属性 ####

可以使用 `delete` 关键字来删除对象的属性。例如：

delete person.age;
    console.log(person.age); // 输出: undefined

#### d. 动态添加属性 ####

JavaScript 对象是动态的，意味着我们可以在运行时动态添加新的属性。例如：

person.address = '123 Main Street';
    console.log(person.address); // 输出: 123 Main Street

#### e. 属性枚举 ####

JavaScript 对象的属性默认可枚举，即可以通过 `for...in` 循环遍历对象的属性。可以使用 `Object.defineProperty()` 方法来定义不可枚举的属性。例如：

在上面的示例中，我们使用 `Object.defineProperty()` 定义了一个不可枚举的 `color` 属性，因此在 `for...in` 循环中不会被遍历到。

#### f. 属性描述符 ####

每个属性都有一个与之关联的属性描述符，描述了属性的各种特性。可以使用 `Object.getOwnPropertyDescriptor()` 方法获取属性的描述符。例如：

const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
    console.log(descriptor);
    // 输出: { value: 'John', writable: true, enumerable: true, configurable: true }

在上面的示例中，我们获取了 `person` 对象的 `name` 属性的描述符。

### 2. 对象 API ###

JavaScript 对象提供了许多常用的 API，用于操作和管理对象的属性和行为。

#### a. Object.keys() ####

`Object.keys()` 方法返回一个包含对象

所有可枚举属性的数组。

const person = {
        
      name: 'John',
      age: 25,
    };
    
    const keys = Object.keys(person);
    console.log(keys); // 输出: ['name', 'age']

#### b. Object.values() ####

`Object.values()` 方法返回一个包含对象所有可枚举属性值的数组。

const person = {
        
      name: 'John',
      age: 25,
    };
    
    const values = Object.values(person);
    console.log(values); // 输出: ['John', 25]

#### c. Object.entries() ####

`Object.entries()` 方法返回一个包含对象所有可枚举属性键值对的数组。

const person = {
        
      name: 'John',
      age: 25,
    };
    
    const entries = Object.entries(person);
    console.log(entries);
    // 输出: [['name', 'John'], ['age', 25]]

#### d. Object.assign() ####

`Object.assign()` 方法用于将一个或多个源对象的属性复制到目标对象中。

#### e. Object.freeze() ####

`Object.freeze()` 方法冻结一个对象，使其属性不可修改。

const person = {
        
      name: 'John',
    };
    
    Object.freeze(person);
    
    person.age = 25; // 操作无效，没有修改属性的权限
    
    console.log(person); // 输出: { name: 'John' }

### 3. 实现对象 API ###

下面是一个简单的示例，展示了如何模拟实现几个常用的对象 API：`Object.keys()`、`Object.values()` 和 `Object.entries()`。

// 模拟实现 Object.keys()
    function getKeys(obj) {
        
      const keys = [];
      for (let key in obj) {
        
        if (obj.hasOwnProperty(key)) {
        
          keys.push(key);
        }
      }
      return keys;
    }
    
    // 模拟实现 Object.values()
    function getValues(obj) {
        
      const values = [];
      for (let key in obj) {
        
        if (obj.hasOwnProperty(key)) {
        
          values.push(obj[key]);
        }
      }
      return values;
    }
    
    // 模拟实现 Object.entries()
    function getEntries(obj) {
        
      const entries = [];
      for (let key in obj) {
        
        if (obj.hasOwnProperty(key)) {
        
          entries.push([key, obj[key]]);
        }
      }
      return entries;
    }
    
    const person = {
        
      name: 'John',
      age: 25,
    };
    
    console.log(getKeys(person)); // 输出: ['name', 'age']
    console.log(getValues(person)); // 输出: ['John', 25]
    console.log(getEntries(person)); // 输出: [['name', 'John'], ['age', 25]]

在上面的示例中，我们使用自定义函数 `getKeys()`、`getValues()` 和 `getEntries()` 来模拟实现了 `Object.keys()`、`Object.values()` 和 `Object.entries()` 的功能。

### 4. 应用场景 ###

JavaScript 对象在前端开发中有广泛的应用场景，包括但不限于以下几个方面：

*  **数据存储和操作**：对象允许我们以键值对的形式存储和

操作数据，非常适合表示复杂的数据结构。

*  **面向对象编程**：对象是面向对象编程的核心概念，允许我们创建和管理对象的行为和属性。
 *  **DOM 操作**：在前端开发中，我们经常需要操作网页的 DOM 元素，使用对象可以更方便地访问和操作 DOM。
 *  **数据交互和传输**：在与后端进行数据交互时，常常使用对象来传输和接收数据，例如通过 AJAX 请求返回的 JSON 数据。

### 5. 参考资料 ###

*  [MDN Web Docs - Working with objects][]
 *  [MDN Web Docs - Object][]

[MDN Web Docs - Working with objects]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
[MDN Web Docs - Object]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object