在JavaScript编程中，我们常常需要复制数据，比如复制一个数组或对象。然而，这并不总是那么直接，因为JavaScript中的数据类型分为原始数据类型和复合数据类型，它们在复制时有着本质的不同。
原始数据类型和复合数据类型
JavaScript中的数据类型大致可以分为两种：
- 原始数据类型（Primitive Types）：包括Boolean, null, undefined, String, Number, BigInt, Symbol。
- 复合数据类型（Compound Types）：包括Object, Array, Function, Date, RegExp等。
原始数据类型在赋值或复制时，会创建一个原始值的副本。而复合数据类型在赋值或复制时，会创建一个指向内存地址的引用，而不是创建一个新的对象。
浅拷贝（Shallow Copy）
浅拷贝创建了一个新对象，并复制了原始对象的所有属性值到新对象。如果属性值是基础类型，复制的就是基础类型的值，如果属性值是复合数据类型，复制的就是内存地址，所以如果你改变了复制对象中的复合类型数据，原始对象也会改变。
这就解释了为什么当我们修改一个通过浅拷贝创建的新数组或对象中的元素（如果这个元素是一个对象或数组）时，原数组或对象中的对应元素也会被修改。
浅拷贝的例子：
let arr = [1, 2, { key: 3 }];
let arrCopy = arr.slice();
arrCopy[2].key = 4;
console.log(arr); // 输出：[1, 2, { key: 4 }]
在上面的例子中，arrCopy是对arr的浅拷贝。当我们修改arrCopy中的对象属性时，arr中的对应元素也被修改了。
另一个例子,例如，假设你有一个数组，其中包含一个对象：
let menuList = [{ key: '/test', label: '测试' }];
如果你进行浅拷贝并删除元素：
let filteredMenuList = [...menuList];
filteredMenuList.pop();
console.log(menuList); // 输出：[{ key: '/test', label: '测试' }]
你会看到原始数组menuList并没有被修改，因为你删除的是filteredMenuList的元素，而不是menuList的元素。
然而，如果你修改filteredMenuList中元素的属性：
filteredMenuList[0].label = '新标签';
console.log(menuList); // 输出：[{ key: '/test', label: '新标签' }]
你会看到原始数组menuList被修改了，因为你修改的是filteredMenuList中元素的属性，而这个元素是原始数组menuList中元素的引用。
在这个例子中，filteredMenuList是对menuList的浅拷贝。当我们修改filteredMenuList中的对象属性时，menuList中的对应元素也被修改了。这就是因为浅拷贝只复制了对对象的引用，而没有复制对象本身。
深拷贝（Deep Copy）
深拷贝会复制每一层的数据，包括嵌套的对象或数组。这意味着，原始数据和复制数据之间，不存在任何引用关系。
深拷贝的例子：
let arr = [1, 2, { key: 3 }];
let arrCopy = JSON.parse(JSON.stringify(arr));
arrCopy[2].key = 4;
console.log(arr); // 输出：[1, 2, { key: 3 }]
在上面的例子中，我们使用JSON.parse(JSON.stringify(arr))进行了深拷贝。当我们修改arrCopy中的对象属性时，arr中的对应元素并没有被修改。
需要注意，JSON.parse(JSON.stringify(obj))是一种简单的深拷贝实现，但它有一些局限性，比如不能复制函数、RegExp对象、Date对象、undefined、Symbol等。对于更复杂的深拷贝需求，我们可能需要使用更复杂的解决方案，比如使用第三方库lodash的_.cloneDeep方法。
结论
在JavaScript中，理解浅拷贝和深拷贝是非常重要的，它们在数据处理和操作时起着关键的作用。使用时必须清楚它们的区别，以避免因误用浅拷贝或深拷贝而引发的问题。
