js深浅拷贝

![B复制A](https://img-blog.csdnimg.cn/20190303221517551.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW5neWFuYWY=,size_16,color_FFFFFF,t_70)

2. 引用类型指的是一个对象，并且我们对对象的操作都只是在操作它的引用而已。

   引用类型：object，array，function，error，date

复制：

深浅拷贝是针对引用类型的。

3. 实现浅拷贝

3.1 array和object通用–循环复制

var shallowCopy = function(obj) {

   // 判断obj的类型是否是object类型

    if (typeof obj !== 'object') return;

    var newObj = obj instanceof Array ? [] : {};

    // 遍历obj，并且判断是obj的属性才拷贝

    for (var key in obj) {

    // 不遍历原型链上的属性,只遍历自身属性

        if (obj.hasOwnProperty(key)) {

            newObj[key] = obj[key];

        }

    }

    return newObj;

}

var obj={

  name:'123',

  age:10,

}

var newObj=shallowCopy(obj);

obj.name='213';

console.log(newObj.name);

输出："123”  随之改变。

3.2 数组浅拷贝–slice()和contact()！！！

数组的数据类型是引用类型,在这种情况下是浅拷贝。

数组的数据类型是基本类型,在这种情况下是深拷贝。

浅拷贝：

var arr = [{old: 'old'}, ['old']];

var newArr1 = arr.concat();

var newArr2=arr.slice();



arr[0].old = 'new';



console.log(arr) // [{old: 'new'}, ['new']]

console.log(newArr1) // [{old: 'new'}, ['new']]

console.log(newArr2) // [{old: 'new'}, ['new']]

深拷贝：

var arr = ['old', 1, true, null, undefined];

var newArr1 = arr.concat();

var newArr2=arr.slice();



arr[0] = 'new';



console.log(arr) // [{old: 'new'}, ['new']]

console.log(newArr1) // [{old: 'old}, ['new']]

console.log(newArr2) // [{old: 'old'}, ['new']]

3.3 对象的浅拷贝–Object.assign ！！！

这里的Object.assign也是一个很奇怪的点，它既是深拷贝又是浅拷贝。一级属性-深拷贝，深层属性-浅拷贝

var obj = { a: 0 , b: { c: 0}}; 

var newObj = Object.assign({}, obj); 



obj.a = 1; 

obj.b.c = 3; 

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

console.log(newObj);	// { a: 0 , b: { c: 3}}; 

可以很清楚的发现一级深拷贝，二级浅拷贝。

3.4 对象的浅拷贝-- 展开运算符（…）！！！

这里的展开运算符（…）同样是一个很奇怪的点，它既是深拷贝又是浅拷贝。一级属性-深拷贝，深层属性-浅拷贝

var obj = { a: 0 , b: { c: 0}}; 

var newObj = {...obj}; 



obj.a = 1; 

obj.b.c = 3; 

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

console.log(newObj);	// { a: 0 , b: { c: 3}}; 

可以很清楚的发现一级深拷贝，二级浅拷贝。

4. 深拷贝

在浅拷贝中已经介绍而来几种深拷贝的方式。

4.1 JSON.parse(JSON.stringify())

数组和对象均可用

数组

var arr = [1, 3, {

    name: ' syl'

}];

var newArr = JSON.parse(JSON.stringify(arr));

arr[2].name = '123'; 

console.log(newArr[2]); /// 'syl ' 没有改变

对象

var obj={

	name:'syl',

}

var newObj=JSON.parse(JSON.stringify(obj));

obj.name="123";

console.log(newObj.name); //'syl'. 没有改变

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

var  arr = [1, 3, {

    name: ' syl'

},function(){}];

var newArr = JSON.parse(JSON.stringify(arr));



console.log(newArr[3]) // null ,没有输出函数。

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数

4.2 深拷贝通用–递归

function deepCopy(obj) {

  //是否是数组或对象

  if (typeof obj !== 'object') return; 

  

  var newObj = obj instanceof Array ? [] : {};

  

  for (var key in obj) {

  

    	// 不遍历原型链上的属性,只遍历自身属性

    if (obj.hasOwnProperty(key)) {

    

    	 // 如果值是对象，就递归一下

      if (obj[keys] && typeof obj[key ] === "object") {

       

        newObj[key] = obj[key] instanceof Array ?[] : {};

        // 如果是引用数据类型，会递归调用

        newObj[key] =  deepCopy(obj[key]);

      } else {

      

        // 如果不是，就直接赋值

        newObj = obj[keys];

        



### 总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)