关于前端:现代JavaScript高级教程JavaScript对象

JavaScript对象

引言

在 JavaScript 中，对象是一种十分重要的数据类型，它容许咱们以键值对的模式组织和存储数据。对象提供了丰盛的属性和办法，使得咱们可能创立、操作和治理简单的数据结构。本文将具体介绍 JavaScript 对象的属性和罕用 API，并提供一个模仿实现对象的示例。同时，还将探讨对象的利用场景和一些相干的参考资料。

1. 对象属性

JavaScript 对象的属性是以键值对的模式存储的。对象属性能够是任意类型的值，包含根本数据类型（如字符串、数字、布尔值）和其余对象。

拜访属性

咱们能够应用点符号或方括号来拜访对象的属性。例如：

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

批改属性

能够通过赋值运算符来批改对象的属性值。例如：

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

删除属性

能够应用 delete 关键字来删除对象的属性。例如：

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

动静增加属性

JavaScript 对象是动静的，意味着咱们能够在运行时动静增加新的属性。例如：

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

属性枚举

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

const car = {  brand: 'Toyota',  model: 'Camry',};Object.defineProperty(car, 'color', {  value: 'blue',  enumerable: false,});for (let key in car) {  console.log(key); // 输入: brand, model}

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

属性描述符

每个属性都有一个与之关联的属性描述符，形容了属性的各种个性。能够应用 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，用于操作和治理对象的属性和行为。

Object.keys()

Object.keys() 办法返回一个蕴含对象

所有可枚举属性的数组。

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

Object.values()

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

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

Object.entries()

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

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

Object.assign()

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

const target = {  name: 'John',};const source = {  age: 25,};Object.assign(target, source);console.log(target); // 输入: { name: 'John', age: 25 }

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