js深浅拷贝

深浅拷贝解析

最新推荐文章于 2024-10-08 15:22:40 发布

原创最新推荐文章于 2024-10-08 15:22:40 发布 · 4.4k 阅读

1 ·

CC 4.0 BY-SA版权

原创文章，禁止任何形式转载！

文章标签：

#javascript #html5 #node.js

本文详细解释了JavaScript中深拷贝和浅拷贝的概念，包括它们的区别、产生原因及实现方式。介绍了通过循环复制、slice()、concat()、Object.assign()和展开运算符实现浅拷贝的方法，以及使用JSON.parse(JSON.stringify())和递归实现深拷贝的技巧。

1. 是什么

假设B复制了A，当修改A时，看B是否会发生变化：

如果B也跟着变了，说明这是浅拷贝。墙头草，你变我也变。

如果B没变，那就是深拷贝。

2. 产生的原因

JS存在基本类型和引用类型。

基本类型指的是简单的数据段。我们复制他的时候，会创建新值，并把它放在一个新的变量的内存地址。
基本类型：Number Boolean String undefined null
复制：
引用类型指的是一个对象，并且我们对对象的操作都只是在操作它的引用而已。
引用类型：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];
        
      }
    }
  }
  return result;
}

补充：
浅拷贝：es6中有两种新方法
方法1：

` let [...spread]= [12, 5, 8, 130, 44];

方法2：

Array.from(array)//创建一个新数组