网站设计简单吗wordpress函数教程

在js中，直接通过赋值操作拷贝数组，会导致新旧数组互相影响。
这是因为数组、对象等数据属于引用类型（Reference Type）数据。对引用类型数据进行赋值操作时，实际上拷贝的是其内存地址的引用（即指向堆内存中对应数据的地址指针），而不是其本身的值。直接赋值后，新旧变量存储着同一个地址指针，指向同一块内存空间。

const arr = [1,2,3];
const arr_copy = arr1;
arr_copy[1] = 2024; // arr_copy和arr都变成[2024,2,3]

如需实现真正的独立拷贝，避免新旧数组互相影响，需要创建新数组并一一复制旧数组的元素。
当拷贝顶层元素都是基本类型，没有引用类型的数组时，则只需要浅拷贝（Shadow Copy），使新旧数组的顶层元素独立即可。

浅拷贝数组

1. 展开运算符

const arr_copy1 = [...arr];

2. Array.from()

const arr_copy2 = Array.from(arr);

3. 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);

4. Array.prototype.concat()

const arr_copy4 = arr.concat();

5. Object.assign()

const arr_copy5 = Object.assign([], arr);

6. Array.prototype.reudce()

const arr_copy6 = arr.reduce((prev, curr) => {prev.push(curr);
}, []);

7. 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;
}

4. lodash.clone()

const _ = require('lodash');
const arr_copy4 = _.clone(arr);

浅拷贝对象

1. 展开运算符

const obj_copy1 = {...obj};

2. Object.assign()
   是用于 合并对象 或 浅拷贝对象 的方法。

const obj_copy2 = Object.assign({}, obj);

3. for…in遍历

const obj_copy3 = {};
for (const key in obj) {if (obj.hasProperty(key)) { // 检查是否是对象自身的属性，过滤原型链上的属性obj_copy3[key] = obj[key];}
}

4. Object.keys()

const obj_copy4 = {};
Object.keys(obj).map(key => {obj_copy4[key] = obj[key];
});

5. lodash.clone()

const _ = require('lodash');
const obj_copy5 = _.clone(obj);

6. 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]]

深拷贝数组的方法有以下几种：

1. JSON.stringify + JSON.parse
   缺点：
   无法拷贝 function、undefined、Symbol、循环引用等。
   会丢失对象的原型链。
   遇到循环引用会抛出错误。

const arr_copy1 = JSON.parse(JSON.stringify(arr));

2. 递归手动实现深拷贝
   灵活可控，支持复杂类型，可自行处理循环引用，面试常考。

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); // 拷贝对象没有被影响

3. lodash.cloneDeep()
   稳定可靠，适合用于生产环境。

const _ = require('lodash');
const arr_copy2 = _.cloneDeep(arr);

4. structuredClone
   原生支持，性能好，但兼容性有限，仅用于现代浏览器环境。

const arr_copy4 = structuredClone(arr);

深拷贝对象的方法与深拷贝数组相同。