89 - 内置对象 - Object 对象 - 对象的合并与克隆

前端 - Javascript 《内置对象 - Object 对象 - 对象的合并与克隆》

在 JavaScript 开发中，对象的合并与克隆是非常常见的操作。合理运用这些操作，能够帮助我们更高效地处理数据，避免数据相互影响。本文将深入探讨 JavaScript 中对象的合并与克隆相关知识。

1. 为什么需要对象的合并与克隆

在实际开发里，我们常常会遇到这样的场景：

• 合并对象：将多个对象的属性合并成一个新对象，以便一次性处理多个来源的数据。例如，在配置项管理中，用户可能传入部分配置，我们需要将这些配置与默认配置合并。
• 克隆对象：避免直接操作原对象导致数据被意外修改。比如，在某些情况下我们需要对对象进行修改，但又不想影响原始数据。

2. 对象的合并

2.1 使用 Object.assign() 方法

Object.assign() 方法用于将一个或多个源对象的所有可枚举属性复制到目标对象，返回目标对象。

语法：

Object.assign(target,...sources)

• target：目标对象。
• sources：一个或多个源对象。

示例：

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
const result = Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 2, c: 3 }
console.log(result); // { a: 1, b: 2, c: 3 }

注意事项：

• Object.assign() 是浅拷贝，如果源对象的属性是引用类型，复制的只是引用，而不是对象本身。
• 它会覆盖目标对象中与源对象同名的属性。

2.2 使用扩展运算符（...）

扩展运算符可以用于对象的合并，代码更简洁。

示例：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const mergedObj = {...obj1,...obj2 };
console.log(mergedObj); // { a: 1, b: 2 }

对比 Object.assign() 和扩展运算符

3. 对象的克隆

3.1 浅克隆

浅克隆只复制对象的一层属性，如果属性是引用类型，复制的是引用。

使用 Object.assign() 实现浅克隆

const originalObj = { a: 1, b: { c: 2 } };
const clonedObj = Object.assign({}, originalObj);
console.log(clonedObj); // { a: 1, b: { c: 2 } }
// 修改引用类型属性
clonedObj.b.c = 3;
console.log(originalObj.b.c); // 3，原对象也被修改

使用扩展运算符实现浅克隆

const original = { x: 1, y: { z: 2 } };
const cloned = {...original };
console.log(cloned); // { x: 1, y: { z: 2 } }
// 修改引用类型属性
cloned.y.z = 4;
console.log(original.y.z); // 4，原对象也被修改

3.2 深克隆

深克隆会递归地复制对象的所有属性，包括引用类型的属性，确保新对象与原对象完全独立。

使用 JSON.parse(JSON.stringify()) 实现深克隆

const originalObj = { a: 1, b: { c: 2 } };
const clonedObj = JSON.parse(JSON.stringify(originalObj));
console.log(clonedObj); // { a: 1, b: { c: 2 } }
// 修改引用类型属性
clonedObj.b.c = 3;
console.log(originalObj.b.c); // 2，原对象未被修改

注意事项：

• JSON.parse(JSON.stringify()) 有局限性，它会忽略对象的函数、undefined、Symbol 等属性，并且不能处理循环引用。

自定义递归函数实现深克隆

function deepClone(obj) {
    if (typeof obj!== 'object' || obj === null) {
        return obj;
    }
    let clone = Array.isArray(obj)? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    return clone;
}
const original = { a: 1, b: { c: 2 } };
const cloned = deepClone(original);
console.log(cloned); // { a: 1, b: { c: 2 } }
// 修改引用类型属性
cloned.b.c = 3;
console.log(original.b.c); // 2，原对象未被修改

4. 总结

在 JavaScript 中，对象的合并与克隆是非常实用的操作。对于对象合并，Object.assign() 和扩展运算符都能满足基本需求；对于对象克隆，浅克隆可以使用 Object.assign() 或扩展运算符，而深克隆可以根据具体情况选择 JSON.parse(JSON.stringify()) 或自定义递归函数。在实际开发中，要根据数据的复杂程度和需求来选择合适的方法，以确保代码的正确性和性能。

希望通过本文的介绍，你能对 JavaScript 中对象的合并与克隆有更深入的理解和掌握。