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

一、简介

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

基本数据类型：
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,