网站的整合网络设计专业有前途吗
在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);
深拷贝对象的方法与深拷贝数组相同。