发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

深入理解JavaScript对象

悠然古琴弹君子心

2

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
显示全部楼层
前言

在 JavaScript 中，对象是一种非常常见的数据类型，几乎每个程序员都会在日常工作中频繁地使用对象。在本篇文章中，我们将深入了解 JavaScript 对象的一些基本概念和一些高级概念，这些概念对于我们正确理解对象在 JavaScript 中的行为非常重要。
对象的基本概念

在 JavaScript 中，对象是由键值对组成的集合。键是一个字符串或者 Symbol 类型的值，值可以是任何类型的数据，包括其他对象。对象是一种动态数据结构，可以通过添加、删除或修改属性来改变对象的状态。以下是 JavaScript 中定义对象的一些基本语法：
  1. const myObj = {
  2.   key1: 'value1',
  3.   key2: 'value2',
  4.   key3: 'value3',
  5. };
复制代码
在这个对象中，每一个键都有一个相应的值。可以使用点操作符或方括号操作符来访问对象的属性：
  1. console.log(myObj.key1); // 输出 'value1'
  2. console.log(myObj['key2']); // 输出 'value2'
复制代码
可以通过以下方式向对象添加新的属性：
  1. myObj.newKey = 'newValue';
  2. console.log(myObj.newKey); // 输出 'newValue'
复制代码
对象也可以作为函数的参数和返回值：
  1. function createObj() {
  2.   return { key1: 'value1', key2: 'value2', key3: 'value3' };
  3. }
  5. const obj = createObj();
  6. console.log(obj.key1); // 输出 'value1'
复制代码
对象的高级概念-原型

在 JavaScript 中，对象之间可以有一种原型关系，即一个对象可以继承另一个对象的属性和方法。每一个对象都有一个原型对象，它是另一个对象的引用，可以通过 Object.getPrototypeOf(obj) 来访问。
在 JavaScript 中，有两种方式来创建一个新对象：

  • 使用对象字面量 {} 或者 new Object() 来创建一个空对象。
  • 使用构造函数来创建一个对象。
构造函数可以使用 new 关键字来调用，它会创建一个新的对象并把这个对象的原型设置为构造函数的 prototype 属性。
在后一种方式中，可以通过构造函数的 prototype 属性来为新对象添加方法和属性。新创建的对象会继承构造函数的原型，因此可以访问这些方法和属性。以下是一个简单的例子：
  1. function MyObj() {
  2.   this.name = 'My Object';
  3. }
  5. MyObj.prototype.getName = function () {
  6.   return this.name;
  7. };
  9. const obj = new MyObj();
  10. console.log(obj.getName()); // 输出 'My Object'
复制代码
this

在 JavaScript 中，this 关键字指的是当前正在执行的函数的上下文对象。在对象中，this 指向该对象本身。例如：
  1. const myObj = {
  2.   name: 'My Object',
  3.   getName: function () {
  4.     return this.name;
  5.   },
  6. };
  8. console.log(myObj.getName()); // 输出 'My Object'
复制代码
JS对象的创建和访问

在JS中，对象是一种复合值，包含了无数个属性（key-value pairs），它可以是字符串、数字、布尔值、数组或者其他对象等等。对象是JS中最重要的数据结构之一。
对象的创建

对象字面量

最常见的创建对象的方法是使用对象字面量。对象字面量是一个由若干键值对组成的对象。这种方式创建的对象可以直接使用{}来表示，也可以使用一个变量来存储这个对象。
  1. const person = { name: 'Alice', age: 18, gender: 'female' };
复制代码
对象字面量创建的对象可以直接在定义时添加属性，也可以后期添加。
  1. const person = {};
  2. person.name = 'Alice';
  3. person.age = 18;
  4. person.gender = 'female';
复制代码
Object构造函数

除了对象字面量之外，还可以使用Object构造函数来创建对象。可以使用new关键字和Object构造函数创建一个空对象，或者将一个现有对象作为参数传递给Object构造函数来创建一个与该对象相同的新对象。
  1. const emptyObj = new Object();
  2. const person = new Object({ name: 'Alice', age: 18, gender: 'female' });
复制代码
工厂函数

工厂函数是一个返回对象的函数。它们通过抽象化对象的创建和初始化来降低重复代码的量。当需要创建多个类似的对象时，可以使用工厂函数来代替每个对象都写一遍相同的代码。
  1. function createPerson(name, age, gender) {
  2.   return { name, age, gender };
  3. }
  5. const person1 = createPerson('Alice', 18, 'female');
  6. const person2 = createPerson('Bob', 20, 'male');
复制代码
构造函数

构造函数是一种特殊的函数，用于创建并初始化一个由该类型定义的对象。当我们使用new关键字创建对象时，实际上是在调用构造函数。
  1. function Person(name, age, gender) {
  2.   this.name = name;
  3.   this.age = age;
  4.   this.gender = gender;
  5. }
  7. const person1 = new Person('Alice', 18, 'female');
  8. const person2 = new Person('Bob', 20, 'male');
复制代码
class

ES6引入了class语法，让JS的面向对象编程更加直观和易于理解。使用class创建对象的语法如下：
  1. class Person {
  2.   constructor(name, age, gender) {
  3.     this.name = name;
  4.     this.age = age;
  5.     this.gender = gender;
  6.   }
  7. }
  9. const person1 = new Person('Alice', 18, 'female');
  10. const person2 = new Person('Bob', 20, 'male');
复制代码
访问对象的属性

访问 JS 对象的属性和方法通常有两种方式：点语法和方括号语法。
使用点语法，可以通过对象名称后面跟随一个句点，然后是属性名，来访问对象的属性和方法，例如：
  1. const obj = {
  2.   name: 'Alice',
  3.   age: 25,
  4.   sayHello() {
  5.     console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  6.   }
  7. };
  9. console.log(obj.name); // 输出 'Alice'
  10. console.log(obj.age); // 输出 25
  11. obj.sayHello(); // 输出 'Hello, my name is Alice and I am 25 years old.'
复制代码
使用方括号语法，可以通过对象名称后面跟随一个方括号，里面是属性名或者变量名，来访问对象的属性和方法，例如：
  1. const obj = {
  2.   name: 'Alice',
  3.   age: 25,
  4.   sayHello() {
  5.     console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  6.   }
  7. };
  9. console.log(obj['name']); // 输出 'Alice'
  10. console.log(obj['age']); // 输出 25
  11. obj['sayHello'](); // 输出 'Hello, my name is Alice and I am 25 years old.'
复制代码
使用方括号语法时，可以在方括号中使用表达式，例如：
  1. const obj = {
  2.   name: 'Alice',
  3.   age: 25,
  4.   sayHello() {
  5.     console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  6.   }
  7. };
  9. const propName = 'name';
  10. console.log(obj[propName]); // 输出 'Alice'
  12. const method = 'sayHello';
  13. obj[method](); // 输出 'Hello, my name is Alice and I am 25 years old.'
复制代码
需要注意的是，在方括号语法中，属性名或者变量名必须用引号括起来，否则会被解释为变量名。另外，在使用方括号语法访问对象的属性和方法时，可以使用变量名，这个变量名可以在运行时决定。
总的来说，访问 JS 对象的属性和方法是非常简单的，但是需要注意使用点语法和方括号语法的区别，以及在使用方括号语法时需要注意属性名或者变量名的引号问题。
对象的遍历

遍历对象是很常见的操作。对象的遍历可以使用 for-in 循环，也可以使用 Object.keys() 方法遍历对象的键名。
  1. const obj = { name: 'Tom', age: 18, gender: 'male' };
  3. // 使用 for-in 循环遍历对象
  4. for (let key in obj) {
  5.   console.log(key, obj[key]);
  6. }
  8. // 使用 Object.keys() 方法遍历对象的键名
  9. Object.keys(obj).forEach(key => {
  10.   console.log(key, obj[key]);
  11. });
复制代码
对象常用的三个方法

Object.keys(), Object.values(), 和 Object.entries() 都是用于操作对象的方法。

  • Object.keys(obj)：返回一个由给定对象的所有可枚举自身属性的属性名组成的数组。
  • Object.values(obj)：返回一个给定对象的所有可枚举自身属性的属性值组成的数组。
  • Object.entries(obj)：返回一个给定对象自身可枚举属性的键值对数组。
下面我们举个例子来说明这三个方法的使用:
  1. const person = {
  2.   firstName: 'John',
  3.   lastName: 'Doe',
  4.   age: 30,
  5.   email: 'john.doe@example.com'
  6. };
  8. // Object.keys()
  9. const keys = Object.keys(person);
  10. console.log(keys); // ['firstName', 'lastName', 'age', 'email']
  12. // Object.values()
  13. const values = Object.values(person);
  14. console.log(values); // ['John', 'Doe', 30, 'john.doe@example.com']
  16. // Object.entries()
  17. const entries = Object.entries(person);
  18. console.log(entries); // [['firstName', 'John'], ['lastName', 'Doe'], ['age', 30], ['email', 'john.doe@example.com']]
复制代码
通过这三个方法，我们可以方便地操作对象，快速获取对象的属性、属性值以及属性和属性值的键值对。
小技巧可以通过Object.entries()方便的将对象转为Map类型。
对象的拷贝

在 JavaScript 中，对象的赋值是浅拷贝，即只会拷贝对象的引用。如果需要实现对象的深拷贝，则需要使用一些特殊的方法。
浅拷贝

浅拷贝只是将对象的引用拷贝给了另一个对象，因此在修改原对象时，拷贝对象也会发生变化。
  1. const obj1 = { name: 'Tom', age: 18 };
  2. const obj2 = obj1;
  4. obj1.age = 20;
  6. console.log(obj1); // { name: 'Tom', age: 20 }
  7. console.log(obj2); // { name: 'Tom', age: 20 }
复制代码
Object.assign()

该方法可以将多个对象合并为一个对象，实现浅拷贝。
  1. const obj1 = { name: 'Tom', age: 18 };
  2. const obj2 = { gender: 'male' };
  3. const obj3 = Object.assign({}, obj1, obj2);
  5. console.log(obj3); // { name: 'Tom', age: 18, gender: 'male' }
复制代码
深拷贝

使用深拷贝创建的对象，对其进行操作不会影响原有对象。实现对象的深拷贝需要使用一些特殊的方法。常见的深拷贝方法有 JSON.parse(JSON.stringify()) 和递归拷贝两种方法。
JSON.parse(JSON.stringify())

JSON.parse(JSON.stringify()) 方法可以实现深拷贝，但是只能处理对象中的原始类型，不能处理函数、正则表达式等类型。
  1. const obj1 = { name: 'Tom', age: 18, hobbies: ['reading', 'music'] };
  2. const obj2 = JSON.parse(JSON.stringify(obj1));
  4. obj1.hobbies.push('travel');
  6. console.log(obj1); // { name: 'Tom', age: 18, hobbies: [ 'reading', 'music', 'travel' ] }
  7. console.log(obj2); // { name: 'Tom', age: 18, hobbies: [ 'reading', 'music' ] }
复制代码
递归拷贝

递归拷贝可以处理任何类型的数据，包括函数、正则表达式等。在拷贝对象时，需要递归遍历对象的属性，并将属性值进行拷贝。
  1. function deepClone(obj) {
  2.   // 判断是否为对象或数组
  3.   if (typeof obj !== 'object' || obj === null) {
  4.     return obj;
  5.   }
  7.   // 判断是数组还是对象
  8.   const newObj = Array.isArray(obj) ? [] : {};
  10.   // 遍历对象或数组
  11.   for (let key in obj) {
  12.     if (Object.prototype.hasOwnProperty.call(obj, key)) {
  13.       newObj[key] = deepCopy(obj[key]);
  14.     }
  15.   }
复制代码
还可用第三方库Lodash实现深浅拷贝。
总结

在 JavaScript 中，对象是由键值对组成的集合，每个键值对就是对象的一个属性，属性名是键，属性值可以是任何数据类型，包括基本类型、对象类型和函数类型等。对象可以通过字面量、构造函数以及 Object.create() 方法创建，也可以通过 Object.defineProperty() 方法定义属性的 getter 和 setter。
JavaScript 的对象具有动态性，可以随时添加或删除属性，也可以改变属性的值。通过使用“点”或“中括号”语法可以访问和修改对象的属性值。此外，可以使用 Object.keys()、Object.values()、Object.entries() 等方法来遍历对象的属性，也可以使用 for...in 和 for...of 循环遍历对象属性。

来源:https://www.cnblogs.com/pglin/p/17140678.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: 立即执行函数在前端国际化方案中的应用

下一篇: 使用VS code将本地的项目推送到gitee的方法（图例）

发表于 2023-2-21 18:46:18

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4