开始

本篇文章是2023暑期青训营打卡笔记的第六篇!本文是js基础知识复习.

选择js对象作为文章内容的起因是写vue项目时,ref对象数据类型不知道怎么拷贝才能使用父组件数据,以及怎么进行深拷贝.感觉作为js的重要组成部分,对对象不能这么不熟练,遂决定写此文章.

在编写项目的过程中,我发现自己的基础相当的不牢固,很多东西都是用到了才去查询.之前觉得这样也没事,反正互联网就在手边,随时能够进行搜索.但是在项目开发的过程中,我发现基础不牢固的后果就是编写代码效率低下.比如,因为知识不牢固,开发到一半发现使用数据类型错误;比如搜索延误时间;定位问题速度慢;回头修改逻辑次数增加等等.

在知识体系薄弱的情况下进行开发,实在是越写越难受.所以本篇文章作为复习,再次学习一下js的对象基础.

对象是什么

对象是一种引用类型,不属于js的基础数据类型.它存储于调用栈中,变量上存储对象的地址.

对象的基础使用

增删查改

创建一个对象

//构造器形式
const obj = new Object()
//声明变量形式
const obj2 = {}

增加/更新属性

obj2.name = 'noe'
obj2['age'] = 24

删除属性

delete obj2.name

访问属性

console.log(obj2['age'])
console.log(obj2.age)

遍历对象属性

item返回对象的值

for(let item in obj2) console.log(item)

获取所有key

const obj = { a: 1, b: 2, c: 3 }; 
const keys = Object.keys(obj); 
console.log(keys); // 输出: ['a', 'b', 'c']

其他常用方法

查询对象中是否存在某个值

for (let key in person) { console.log(key + ': ' + person[key]); }

获取对象属性的数量

const count = Object.keys(person).length;

对象的合并,分解

对象属性值的分解,用到es6的解构赋值

const { name ,age} = obj2;

对象的合并,注意assign方法是浅拷贝

const obj3 = { a: 1, b: 2 };
const obj4 = { b: 3, c: 4 };
const merged = Object.assign({}, obj3, obj4);
console.log(merged); // 输出: { a: 1, b: 3, c: 4 }

深拷贝与浅拷贝

深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是在复制对象或数据结构时使用的两种不同的拷贝方式。

浅拷贝是指创建一个新对象或数据结构，并将原始对象或数据结构的引用复制到新对象中。这意味着新对象和原始对象共享同一个引用，对其中一个对象所做的更改会影响到另一个对象。

深拷贝是指创建一个新对象或数据结构，并递归地复制原始对象或数据结构中的所有属性和元素。这样，即使原始对象或数据结构中有嵌套的对象或数组，也能够保持独立性，新对象和原始对象之间没有任何引用关系。

在js中,进行浅拷贝的方法有

使用 Object.assign() 方法进行浅拷贝。
使用扩展运算符 ... 进行浅拷贝。
使用数组的 slice() 方法进行浅拷贝。

在js中,进行深拷贝的方法有

使用递归和循环来手动复制对象的所有属性和嵌套对象。
使用第三方库，如 Lodash 的 cloneDeep() 方法，进行深拷贝。
JSON.parse(JSON.stringify(obj))

我最后在vue项目中使用JSON.parse(JSON.stringify(obj))进行深拷贝,没有再发生编辑数据时旧数据变动的情况了

但是proxy和vue的ref,reactive,还有object原型等知识我目前还不理解,等待下次更新...

js基础之对象 | 青训营

开始