一、简介

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

基本数据类型： String、Number、Boolean、Null、Undefined、Symbol。基本数据类型是直接存储在栈中的数据。

引用数据类型： Array、Object。引用数据类型存储的是该对象在栈中引用，真实的数据存储在内存中。

由于基本数据类型是直接存储的，所以如果我们对基本数据类型进行拷贝，然后修改新数据后，不会影响到原数据。 而当你对引用数据类型进行拷贝，然后修改新数据后，它就会影响到原数据。

二、浅拷贝、深拷贝与赋值的区别

赋值：引用地址的拷贝。修改赋值后的数据，不管是基本数据类型还是引用数据类型，都会影响到原数据。
浅拷贝：一层拷贝。在浅拷贝中，修改基本数据类型不会影响原有数据的基本数据类型，修改引用数据类型会影响原有的数据类型。
深拷贝：无限层级拷贝。在深拷贝中，修改基本数据类型和引用数据类型都不会影响原有的数据类型。

	和原数据是否指向同一对象	原数据为基本数据类型	原数据包含子对象
赋值	是	改变【会】使原数据一同改变	改变【会】使原数据一同改变
浅拷贝	否	改变【不会】使原数据一同改变	改变【会】使原数据一同改变
深拷贝	否	改变【不会】使原数据一同改变	改变【不会】使原数据一同改变

三、浅拷贝

1、手写浅拷贝

const arr1 = [1, 2, ['jsliang', 'JavaScriptLiang'], 4];

const shallowClone = (arr) => {
  const dst = [];
  for (let prop in arr) {
    if (arr.hasOwnProperty(prop)) {
        dst[prop] = arr[prop];
    }
  }
  return dst;
}

const arr2 = shallowClone(arr1);
arr2[2].push('LiangJunrong');
arr2[3] = 5;

console.log(arr1);
// [ 1, 2, [ 'jsliang', 'JavaScriptLiang', 'LiangJunrong' ], 4 ]
console.log(arr2);
// [ 1, 2, [ 'jsliang', 'JavaScriptLiang', 'LiangJunrong' ], 5 ]

可以看到，这里我们修改引用数据类型里面的引用数据类型的时候，还是会影响到原数据，但是如果我们修改里面的基本数据类型的时候，就不会影响到原数据了。

主要思路：

for...in：遍历 Object 对象 arr1，将可枚举值列举出来。
hasOwnProperty()：检查该枚举值是否属于该对象 arr1，如果是继承过来的就去掉，如果是自身的则进行拷贝。

2、Object.assign()实现浅拷贝

Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

但是需要注意的是，Object.assgin() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

const obj1 = {
  username: 'LiangJunrong',
  skill: {
    play: ['basketball', 'computer game'],
    read: 'book',
  },
  girlfriend: ['1 号备胎', '2 号备胎', '3 号备胎'],
};
const obj2 = Object.assign({}, obj1);
obj2.username = 'jsliang'; // 修改基本类型
obj2.skill.read = 'computer book'; // 修改二层基本类型
obj2.skill.play = ['footboll']; // 修改二层引用类型
obj2.girlfriend = ['之前的都是瞎吹的！'];
console.log(obj1);
// { username: 'LiangJunrong',
//   skill: { play: [ 'footboll' ], read: 'computer book' },
//   girlfriend: [ '1 号备胎', '2 号备胎', '3 号备胎' ] }
console.log(obj2);
// { username: 'jsliang',
//   skill: { play: [ 'footboll' ], read: 'computer book' },
//   girlfriend: [ '之前的都是瞎吹的！' ] }

3、Array.prototype.concat()

concat()是数组的一个内置方法，用户合并两个或者多个数组。这个方法不会改变现有数组，而是返回一个新数组。

const arr1 = [
  1,
  {
    username: 'jsliang',
  },
];

let arr2 = arr1.concat();
arr2[0] = 2;
arr2[1].username = 'LiangJunrong';
console.log(arr1);
// [ 1, { username: 'LiangJunrong' } ]
console.log(arr2);
// [ 2, { username: 'LiangJunrong' } ]

4、Array.prototype.slice()

slice()也是数组的一个内置方法，该方法会返回一个新的对象。 slice() 不会改变原数组。

const arr1 = [
  1,
  {
    username: 'jsliang',
  },
];

let arr2 = arr1.slice();
arr2[0] = 2;
arr2[1].username = 'LiangJunrong';
console.log(arr1);
// [ 1, { username: 'LiangJunrong' } ]
console.log(arr2);
// [ 2, { username: 'LiangJunrong' } ]

5、…obj 展开运算符

这边我们也可以尝试下使用 const obj2 = {…obj1} 的形式进行浅拷贝。

/**
 * @name ...obj拷贝数组
 */
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // like arr.slice()
arr2.push(4); 

console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3, 4 ]

/**
 * @name ...obj拷贝对象
 */
const obj1 = {
  name: 'jsliang',
  arr1: ['1', '2', '3'],
  obj: {
    name: 'JavaScriptLiang',
    arr2: ['4', '5', '6'],
  },
};
const obj2 = {...obj1};
obj2.name = 'LiangJunrong';
obj2.arr1 = ['null'];
obj2.obj.name = 'jsliang';
obj2.obj.arr2 = ['null'];

console.log(obj1);
// { name: 'jsliang',
//   arr1: [ '1', '2', '3' ],
//   obj: { name: 'jsliang', arr2: [ 'null' ] } }
console.log(obj2);
// { name: 'LiangJunrong',
//   arr1: [ 'null' ],
//   obj: { name: 'jsliang', arr2: [ 'null' ] } }

四、手写深拷贝

未完待续。。。。。。。

参考：https://juejin.cn/post/6844903968586334221

JavaScript中的浅拷贝与深拷贝和手写浅拷贝