Object.assign() 是 ECMAScript 2018 (ES8) 引入的一个方法,它可以将一个或多个源对象的所有可枚举属性浅拷贝到目标对象中,并返回目标对象。在前端开发中,Object.assign() 常用于对象拷贝和合并,特别是在 Redux 编程中更为常见。
在本文中,我将介绍 Object.assign() 的基础使用和高级技巧,包括对象拷贝、对象合并、过滤不需要的属性、保留对象型属性、深拷贝等。
基础使用
Object.assign() 方法接收一个或多个源对象和目标对象,用于将所有可枚举属性从源对象复制到目标对象。它的基本语法是:
Object.assign(target, ...sources)
其中,第一个参数 target
是目标对象,剩下的参数是源对象。如果目标对象中已经有相同属性,则后面的源对象会覆盖前面的源对象。示例代码如下:
const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const result = Object.assign(target, source); console.log(result); // { a: 1, b: 4, c: 5 }
代码中,source 对象的 b 属性覆盖了 target 对象的 b 属性,最终 result 对象中的 b 属性值为 4。
同时,Object.assign() 方法也支持在多个源对象中合并属性:
const target = { a: 1, b: 2 }; const source1 = { b: 4, c: 5 }; const source2 = { c: 3, d: 6 }; const result = Object.assign(target, source1, source2); console.log(result); // { a: 1, b: 4, c: 3, d: 6 }
代码中,source1 和 source2 的属性都被合并到了 target 对象中。
过滤不需要的属性
如果源对象中有不需要的属性,我们可以使用解构赋值来过滤它们:
const source = { a: 1, b: 2, c: 3 }; const {a, ...rest} = source; const target = rest; console.log(target); // { b: 2, c: 3 }
代码中,{ a, ...rest } = source
可以读取 source 对象的 a 属性,并将其他属性存到 rest 对象中。因此,最后的 target 对象只包含 source 对象中除 a 属性外的其他属性。
保留对象型属性
在合并对象时,我们可能只需要合并源对象中的对象型属性,而不包括原始值属性。此时,可以将 Object.assign() 与 typeof 运算符配合使用。
const target = { a: 1, b: { c: 2 } }; const source = { b: { d: 3 } }; const result = Object.assign(target, ...Object.keys(source).filter(key => typeof source[key] === 'object').map(key => ({ [key]: source[key] }))); console.log(result); // { a: 1, b: { c: 2, d: 3 } }
代码中,将源对象中的对象型属性过滤出来,然后通过 map() 函数将其转换为键值对数组,最后使用 Object.assign() 合并到目标对象中。因为 Object.assign() 方法仅能复制对象型属性的引用,所以源对象和目标对象中的对象型属性指向同一地址。
深拷贝
如果需要复制对象型属性的值而非引用,可以使用 JSON.stringify() 和 JSON.parse() 方法实现深拷贝。
const target = { a: 1, b: { c: 2 } }; const source = { b: { d: 3 } }; const result = Object.assign(target, ...Object.keys(source).filter(key => typeof source[key] === 'object').map(key => ({ [key]: JSON.parse(JSON.stringify(source[key])) }))); console.log(result); // { a: 1, b: { c: 2, d: 3 } }
代码中,使用 JSON.stringify() 方法将源对象中的对象型属性转换为字符串,然后使用 JSON.parse() 方法将其转换为对象型属性的值,从而实现深拷贝。
在使用深拷贝时需要注意,如果源对象中含有 Date、RegExp 等非对象型属性,则需要单独处理。同时,深拷贝涉及序列化和反序列化两个过程,性能相对较低。
总结
在本文中,我们介绍了 Object.assign() 方法的基本使用和高级技巧,包括对象拷贝、对象合并、过滤不需要的属性、保留对象型属性、深拷贝等。通过学习 Object.assign() 方法,可以提高编程效率,减少代码量,更好地应对前端开发中的各类实际问题。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64cdf7f4b5eee0b5255ec1a7