面试官：（(1)

let name = 'iyongbao';
let name2 = name;

name2 = 'zhangsan';

console.log(name); // iyongbao
console.log(name2); // zhangsan

举例二

let obj = { name: 'iyongbao' };
let obj2 = obj;

obj2.name = 'zhangsan';

console.log(obj); // {name: "zhangsan"}
console.log(obj2); // {name: "zhangsan"}

上线的案例都是‘拷贝’，从中我们可以看到，引用类型的赋值会影响到原数据，这其实就是浅拷贝。

二、探究深浅拷贝

对于深浅拷贝，勇宝给出自己的理解：

浅拷贝：对于浅拷贝也就是基本数据类型，拷贝后的值无论怎么变化都不会影响到原数据；而对于引用类型来说，有的人认为浅拷贝是会拷贝对象的第一层值，也就是说对象通过浅拷贝当我们修改新复制对象的一层属性时，原数据不会发生改变。

深拷贝：无限层级拷贝。在深拷贝中，修改基本数据类型和引用数据类型都不会影响原有的数据类型。

// 浅拷贝
let obj = { a: 1, b: { c: 2 } };

let obj2 = { ...obj };

obj2.a = 3;
obj2.b.c = 4;

console.log(obj); // {a:1, b: { c: 4 }}
console.log(obj2); // {a: 3, b: { c: 4 }}

结论：通过上边的案例，我们可以看出...（拓展运算符）是一个浅拷贝。

// 深拷贝
let obj = { a: 1, b: { c: 2 } };

let obj2 = JSON.parse(JSON.stringify(obj));

obj2.a = 3;
obj2.b.c = 4;

console.log(obj); // {a:1, b: { c: 2 }}
console.log(obj2); // {a: 3, b: { c: 4 }}

关于JSON.stringify大家可以看一看我的另一篇文章：你不知道的JSON.stringify神操

三、浅拷贝方法

3.1 直接赋值

let obj = {
    name: 'iyongbao',
    age: 26
}

let obj2 = obj;
obj2.name = "zhangsan";

console.log(obj); // {name: "zhangsan", age: 26}
console.log(obj2); // {name: "zhangsan", age: 26}

3.2 Object.assign

let obj = {
    name: 'iyongbao',
    score: {
        vue: 98
    }
}

let obj2 = Object.assign({}, obj);

obj2.name = "zhangsan";
obj2.score.vue = 60;

console.log(obj); // {name: "iyongbao", score: { vue: 60 }}
console.log(obj2); // {name: "zhangsan", score: { vue: 60 }}

注意：使用Object.assign的第一层是深拷贝。

3.3 扩展运算符

let obj = {
    name: 'iyongbao',
    score: {
        vue: 98
    }
}

let obj2 = { ...obj };

obj2.name = "zhangsan";
obj2.score.vue = 60;

console.log(obj); // {name: "iyongbao", score: { vue: 60 }}
console.log(obj2); // {name: "zhangsan", score: { vue: 60 }}

注意：扩展运算符和Object.assign的效果一样。

3.4 slice和concat

slice是截取数组，concat是拼接数组。

let obj = ['iyongbao', score: { vue: 98 }]

let obj2 = obj.slice();
let obj3 = obj.concat();

obj[0] = "zhangsan";
obj[1].vue = 60;

console.log(obj); // {name: "zhangsan", score: { vue: 60 }}
console.log(obj2); // {name: "iyongbao", score: { vue: 60 }}
console.log(obj3); // {name: "iyongbao", score: { vue: 60 }}

四、深拷贝方法

4.1 JSON.parse(JSON.stringify(待拷贝对象))

这里使用的还挺多的。

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-KFPgn7G9-1714773873529)]

[外链图片转存中…(img-inZYWJdC-1714773873531)]