在js中,直接通过赋值操作拷贝数组,会导致新旧数组互相影响。
这是因为数组、对象等数据属于引用类型(Reference Type)数据。对引用类型数据进行赋值操作时,实际上拷贝的是其内存地址的引用(即指向堆内存中对应数据的地址指针),而不是其本身的值。直接赋值后,新旧变量存储着同一个地址指针,指向同一块内存空间。
const arr = [1,2,3];
const arr_copy = arr1;
arr_copy[1] = 2024; // arr_copy和arr都变成[2024,2,3]
如需实现真正的独立拷贝,避免新旧数组互相影响,需要创建新数组并一一复制旧数组的元素。
当拷贝顶层元素都是基本类型,没有引用类型的数组时,则只需要浅拷贝(Shadow Copy),使新旧数组的顶层元素独立即可。
浅拷贝数组
- 展开运算符
const arr_copy1 = [...arr];
- Array.from()
const arr_copy2 = Array.from(arr);
- Array.prototype.slice()
const arr_copy3 = arr.slice();
如果要拷贝类数组对象,由于它不是由 Array构造函数创建的,所以没有Array.prototype的slice方法,要用call借用。
const arrayLike = { 0: "a", 1: "b", length: 2 };
const arr_copy3 = Array.prototype.slice.call(arrayLike);
- Array.prototype.concat()
const arr_copy4 = arr.concat();
- Object.assign()
const arr_copy5 = Object.assign([], arr);
- Array.prototype.reudce()
const arr_copy6 = arr.reduce((prev, curr) => {
prev.push(curr);
}, []);
- for / forEach / for…of 遍历
const arr_copy7 = [];
for (const value of arr) {
arr_copy7.push(value);
}
// 或
for (const [idx, value] of arr.entries()) {
arr_copy7[idx] = value;
}
- lodash.clone()
const _ = require('lodash');
const arr_copy4 = _.clone(arr);
浅拷贝对象
- 展开运算符
const obj_copy1 = {...obj};
- Object.assign()
是用于 合并对象 或 浅拷贝对象 的方法。
const obj_copy2 = Object.assign({}, obj);
- for…in遍历
const obj_copy3 = {};
for (const key in obj) {
if (obj.hasProperty(key)) { // 检查是否是对象自身的属性,过滤原型链上的属性
obj_copy3[key] = obj[key];
}
}
- Object.keys()
const obj_copy4 = {};
Object.keys(obj).map(key => {
obj_copy4[key] = obj[key];
});
- lodash.clone()
const _ = require('lodash');
const obj_copy5 = _.clone(obj);
- Object.create + Object.getPrototypeOf
const obj_copy6 = Object.create(Object.getPrototypeOf(obj));
Object.assign(obj_copy6, obj);
深拷贝数组or对象
若数组包含嵌套对象或数组,内层引用仍需深拷贝(Deep Copy),否则会导致新旧数组的内存元素互相影响。
const arr = [[1,2,3],[4,5,6]];
const arr_copy = [...arr];
arr_copy[0][0] = 2024; // arr_copy和arr都变成[[2024,2,3],[4,5,6]]
深拷贝数组的方法有以下几种:
- JSON.stringify + JSON.parse
缺点:
无法拷贝 function、undefined、Symbol、循环引用等。
会丢失对象的原型链。
遇到循环引用会抛出错误。
const arr_copy1 = JSON.parse(JSON.stringify(arr));
- 递归手动实现深拷贝
灵活可控,支持复杂类型,可自行处理循环引用,面试常考。
const deepClone = (obj, cache = new WeakMap()) => {
if (obj === null || typeof obj === 'object') return obj;
if (cache.has(obj)) return cache.get(obj); // 直接返回缓存
if (obj instanceof Date) return new Date(obj.valueOf());
if (obj instanceof Regex) return new Regex(obj);
const copy = Array.isArray(obj) ? [] : {};
cache.set(obj, copy); //缓存当前对象
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = deepClone(obj[key]);
}
}
return copy;
};
const arr_copy3 = deepClone(arr);
解释:
设置cache是为了避免遇到循环引用抛出错误。
遇到RegExp对象不直接返回原对象,而是返回新实例,是为了避免直接赋值引用类型数据,出现浅拷贝问题。
new Date(obj)
等同于new Date(obj.valueOf())
,都是获取原日期的时间戳并用该时间戳创建一个新 Date 对象。
const regExp = /abc/g;
const regExp_copy1 = regExp;
const regExp_copy2 = new RegExp(regExp);
regExp.source = "changed";
console.log(regExp_copy1.source); // 拷贝对象也被影响
console.log(regExp_copy2.source); // 拷贝对象没有被影响
- lodash.cloneDeep()
稳定可靠,适合用于生产环境。
const _ = require('lodash');
const arr_copy2 = _.cloneDeep(arr);
- structuredClone
原生支持,性能好,但兼容性有限,仅用于现代浏览器环境。
const arr_copy4 = structuredClone(arr);
深拷贝对象的方法与深拷贝数组相同。