深浅拷贝区别与应用

Posted 2022-06-04 wangmj518

javascript的数据类型分为基本数据类型和引用数据类型，对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。

浅拷贝

浅拷贝的意思就是只复制引用，而未复制真正的值

const originArray = [1,2,3,4,5];
const originObj = a:'a',b:'b',c:[1,2,3],d:dd:'dd';

const cloneArray = originArray;
const cloneObj = originObj;

console.log(cloneArray); // [1,2,3,4,5]
console.log(originObj); // a:'a',b:'b',c:Array[3],d:dd:'dd'

cloneArray.push(6);
cloneObj.a = aa:'aa';

console.log(cloneArray); // [1,2,3,4,5,6]
console.log(originArray); // [1,2,3,4,5,6]

console.log(cloneObj); // a:aa:'aa',b:'b',c:Array[3],d:dd:'dd'
console.log(originArray); // a:aa:'aa',b:'b',c:Array[3],d:dd:'dd'

解析： 上面的代码是最简单的利用 = 赋值操作符实现了一个浅拷贝，可以很清楚的看到，随着 cloneArray 和 cloneObj 改变，originArray 和 originObj 也随着发生了变化。

深拷贝

深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。

只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。

目前实现深拷贝的方法不多，主要是两种：

1. 利用 JSON 对象中的 parse 和 stringify
2. 利用递归来实现每一层都重新创建对象并赋值

JSON.parse(JSON.stringify)

JSON.stringify 是将一个 JavaScript 值转成一个 JSON 字符串。JSON.parse 是将一个 JSON 字符串转成一个 JavaScript 值或对象。很好理解吧，就是 JavaScript 值和 JSON 字符串的相互转换。

const originArray = [1,2,3,4,5];
const cloneArray = JSON.parse(JSON.stringify(originArray));
console.log(cloneArray === originArray); // false

const originObj = a:'a',b:'b',c:[1,2,3],d:dd:'dd';
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj === originObj); // false

cloneObj.a = 'aa';
cloneObj.c = [1,1,1];
cloneObj.d.dd = 'doubled';

console.log(cloneObj); // a:'aa',b:'b',c:[1,1,1],d:dd:'doubled';
console.log(originObj); // a:'a',b:'b',c:[1,2,3],d:dd:'dd';

但是对于某种具有函数的对象就不合适用：

const originObj = 
  name:'axuebin',
  sayHello:function()
    console.log('Hello World');
  

console.log(originObj); // name: "axuebin", sayHello: ƒ
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // name: "axuebin"

发现在 cloneObj 中，有属性丢失了。。。那是为什么呢？undefined、function、symbol 会在转换过程中被忽略。。。

明白了吧，就是说如果对象中含有一个函数时（很常见），就不能用这个方法进行深拷贝。

递归的方法

function deepClone(source)
  const targetObj = source.constructor === Array ? [] : ; // 判断复制的目标是数组还是对象
  for(let keys in source) // 遍历目标
    if(source.hasOwnProperty(keys))
      if(source[keys] && typeof source[keys] === 'object') // 如果值是对象，就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : ;
        targetObj[keys] = deepClone(source[keys]);
      else // 如果不是，就直接赋值
        targetObj[keys] = source[keys];
      
     
  
  return targetObj;

实验一下：

const originObj = a:'a',b:'b',c:[1,2,3],d:dd:'dd';
const cloneObj = deepClone(originObj);
console.log(cloneObj === originObj); // false

cloneObj.a = 'aa';
cloneObj.c = [1,1,1];
cloneObj.d.dd = 'doubled';

console.log(cloneObj); // a:'aa',b:'b',c:[1,1,1],d:dd:'doubled';
console.log(originObj); // a:'a',b:'b',c:[1,2,3],d:dd:'dd';

const originObj = 
  name:'axuebin',
  sayHello:function()
    console.log('Hello World');
  

console.log(originObj); // name: "axuebin", sayHello: ƒ
const cloneObj = deepClone(originObj);
console.log(cloneObj); // name: "axuebin", sayHello: ƒ

额外的拷贝方法

1. concat
2. slice
3. Object.assign()
4. ... 展开运算符

等都是 首层进行的深拷贝。

我们自己实现下这类实现方法：

function shallowClone(source) 
  const targetObj = source.constructor === Array ? [] : ; // 判断复制的目标是数组还是对象
  for (let keys in source)  // 遍历目标
    if (source.hasOwnProperty(keys)) 
      targetObj[keys] = source[keys];
    
  
  return targetObj;