前端深浅拷贝各有哪些方法,优缺点

文章目录

一、深拷贝
- - 1. JSON.parse(JSON.strigify(Str))
  - 2. lodash.deepclone
  - 3. structuredClone
二、浅拷贝
总结

深浅拷贝主要是针对于引用类型而言的

一、深拷贝

1. JSON.parse(JSON.strigify(Str))

   序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 ).传输（例如 如果请求的Content-Type 是 application/x-www-form-urlencoded，则前端这边需要使用qs.stringify(data)来序列化参数再传给后端，否则后端接受不到；

JSON.stringify()

该方法用于将一个字转换为JSON字符串，该字符串符合JSON格式，并且可以被JSON.parse()方法还原。

对于原始类型的字符串，转换结果会带双引号
如果要转换的对象的属性是undefined，函数或xml对象，该属性会被JSON.stringify（）过滤
如果要转换的数组中有undefined和函数，他们都会转换为null
正则对象会被转换成空对象
会忽略对象的不可遍历的属性
JSON.stringify()方法还可以接受一个数组，作为第二个参数，指定参数对象的哪些属性需要转成字符串，第二个参数还可以是一个函数，用来更改JSON.stringify()的返回值。
JSON.stringify()还可以接受第三个参数，用于增加返回的 JSON 字符串的可读性。比如加入‘\t’
如果参数对象有自定义的toJSON()方法，那么JSON.stringify()会使用这个方法的返回值作为参数，而忽略原对象的其他属性。

JSON.parse()

JSON.parse()方法用于将 JSON 字符串转换成对应的值。
如果传入的字符串不是有效的 JSON 格式，JSON.parse()方法将报错。
JSON.parse()方法可以接受一个处理函数，作为第二个参数，用法与JSON.stringify()方法类似

2. lodash.deepclone

引入lodash 工具库，调用 deepclone 进行深拷贝

3. structuredClone

const original = { name: "MDN" };
original.itself = original;// Clone it
const clone = structuredClone(original);

二、浅拷贝

let arr = [{name:'bruce'},1,2,3]let newArr = arr.slice()
// 由于数组内部属性值为引用对象，因此使用slice和concat对对象数组的拷贝，整个拷贝还是浅拷贝，
// 拷贝之后数组各个值的指针还是指向相同的存储地址。let newArr2 = [...arr]Object.assign()