【校招VIP】前端JS之深拷贝和浅拷贝- 校招VIP

考点介绍：

js中的浅拷贝和深拷贝，只是针对复杂数据类型(Objcet，Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础上再生成一份的作用。但是根据新生成的对象能否影响到原对象可以分为浅拷贝和深拷贝。

本期分享的前端JS之深拷贝和浅拷贝，分为试题、文章以及视频三部分。

答案详情解析和文章内容可扫下方二维码或链接即可查看！

一、考点题目

1、实现浅拷贝的方法？

解答：（1）for···in只循环第一层

// 只复制第一层的浅拷贝
function simpleCopy(obj1) {
var obj2 = Array.isArray(obj1) ? [] : {};
for (let i in obj1) {
obj2[i] = obj1[i];
}
return obj2;
}
var obj1 = {
a: 1,
b: 2,
c: {
d: 3
}
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

（2）Object.assign方法

var obj = {
a: 1,
b: 2
}
var obj1 = Object.assign(obj);
obj1.a = 3;
console.log(obj.a) // 3

（3）直接用=赋值

let a=[0,1,2,3,4],
b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);

2、实现深拷贝的方法？

解答：（1）采用递归去拷贝所有层级属性
（2）通过JSON对象来实现深拷贝
（3）通过jQuery的extend方法实现深拷贝
（4）lodash函数库实现深拷贝
（5）Reflect法
（6）手动实现深拷贝
（7）如果对象的value是基本类型的话，也可以用Object.assign来实现深拷贝，但是要把它赋值给一个空对象
（8）用slice实现对数组的深拷贝
（9）用concat实现对数组的深拷贝
（10）直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。
（11）使用扩展运算符实现深拷贝

3、说一下深浅拷贝基础（数据类型）。

解答：1.基础数据类型（值传递）

//基本数据类型的拷贝（复制copy） 深拷贝和浅拷贝

//前提：需要理解 值传递 地址传递 基本数据类型 值传递 number string boolean null undefined Sysmbol bigInt
// Number
a = 1.1;b = a;b = 2; console.log(a,b)
// String
a = 'hello';b = a;b = 3; console.log(a,b)
// Boolean
a = false;b = a;b = 'sss'; console.log(a,b)
// Undefined
a = undefined;b = a;b = false; console.log(a,b)
// Null
a = null;b = a;b = undefined; console.log(a,b)

2.复杂数据类型（地址传递）

//复杂数据类型（object） 的拷贝 地址传递 注意 常用的复杂数据类型包括：{} 、[] 、function(){} 、Date 、RegExp 、null（这个比较特殊）等

//1、我们依然用一的简单赋值（=）来进行一遍操作（赋值）
// 经过实践我们会发现：
// 1、当类型为{}、[]的时候，改变b的值，a也会跟着一起变化。
// 2、当类型为Date、function、RegExp的时候，a保持不变。
//总结：
//我们发现{}或者[]时，简单的赋值操作并不能实现它们的拷贝，只是改了b的指向，使a和b都指向同一个引用，随意改变一个，都会影响另外一个的值。

{}
a = {name: 'abc'};b = a;b.name = 'sss';
console.log(a,b)
// []
a = ['a','b','c'];b = a;b[1] = 'd';
console.log(a,b)
// function
a = function(){ alert('aaa'); };b = a;b = function(){ alert('bbb'); };
console.log(a.toString(),b.toString())
// Date
a = new Date('2018-10-11 00:00:00');b = a;b = new Date('1970-01-01 00:00:00');
console.log(a,b)
// RegExp
a = new RegExp('abc');b = a;b = new RegExp('aaa');
console.log(a,b)

4、深拷贝与浅拷贝的区别。

解答：数据分为基本数据类型和引用数据类型。

基本数据类型：数据直接存储在栈中；

引用数据类型：存储在栈中的是对象的引用地址，真实的对象数据存放在堆内存中。

浅拷贝：对于基本数据类型：直接复制数据值；对于引用数据类型：只是复制了对象的引用地址，新旧对象指向同一个内存地址，修改其中一个对象的值，另一个对象的值也随之改变。

深拷贝：对于基本数据类型：直接复制数据值；对于引用数据类型：开辟新的内存空间，在新的内存空间里复制一个一模一样的对象，新老对象不共享内存，修改其中一个对象的值，不会影响另一个对象。

深拷贝相比于浅拷贝速度较慢并且花销较大。

（答案点击下方链接或者扫海报二维码查看哦）

二、考点文章

1、web前端：常用的js语法(一)

find()：返回通过测试的数组的第一个元素的值

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

2、web前端：常用的js语法(二)

map()：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map()方法按照原始数组元素顺序依次处理元素

map方法会给原数组中的每个元素都按顺序调用一次callback函数，callback每次执行后的返回值（包括undefined）组合起来形成一个新数组。callback函数只会在有值的索引上被调用，那些从来没被赋过值或者使用delete删除的索引则不会被调用。

使用map方法处理数组时，数组元素的范围是在callback方法第一次调用之前就已经确定了。在map方法执行的过程中，原数组中新增加的元素将不会被callback访问到，若已经存在的元素被改变或删除了，则他们传递到callback的值是map方法遍历到他们的那一刻的值，而被删除的元素将不会被访问到。

3、JS的基本语法

js 中的一个短语，js 解释器会将其计算出一个结果。程序中的常量是最简单的一类表达式。

（1）变量名也是一种简单的表达式，它的值就是赋值给变量的值。
（2）复杂表达式是由简单表达式组成的。

比如，数据访问表达式是由一个表示数组的表达式、左方括号、一个整数表达式和右方括号构成。它们所组成的新的表达式的运算结果是该数组的特定位置的元素值。

同样的，函数调用表达式由一个表示函数对象的表达式和0个或多个参数表达式构成。

将简单表达式组合成复杂表达式最常用的方法就是使用运算符（opetator）。

运算符按照特定的运算规则对操作数（通常是两个）进行运算，并计算出新值。

（扫下方海报二维码查看完整版）

三、考点视频

1、二叉树叶子结点数=度为2结点数+1

这是二叉树最常考的性质之一，是校招和考研笔试的考点。

性质有数学的定理一样，掌握了这种题就是送分题，没掌握花很长时间也得不了分

更多资讯可搜索校招VIP小程序查看哦!

移动端链接：https://m.naoffer.com/dTopic/detail/731

PC端链接：https://xiaozhao.vip/dTopic/detail/731