ES8 的 Object.assign() 方法使用教程:对象拷贝和合并

阅读时长 5 分钟读完

Object.assign() 是 ECMAScript 2018 (ES8) 引入的一个方法,它可以将一个或多个源对象的所有可枚举属性浅拷贝到目标对象中,并返回目标对象。在前端开发中,Object.assign() 常用于对象拷贝和合并,特别是在 Redux 编程中更为常见。

在本文中,我将介绍 Object.assign() 的基础使用和高级技巧,包括对象拷贝、对象合并、过滤不需要的属性、保留对象型属性、深拷贝等。

基础使用

Object.assign() 方法接收一个或多个源对象和目标对象,用于将所有可枚举属性从源对象复制到目标对象。它的基本语法是:

其中,第一个参数 target 是目标对象,剩下的参数是源对象。如果目标对象中已经有相同属性,则后面的源对象会覆盖前面的源对象。示例代码如下:

代码中,source 对象的 b 属性覆盖了 target 对象的 b 属性,最终 result 对象中的 b 属性值为 4。

同时,Object.assign() 方法也支持在多个源对象中合并属性:

代码中,source1 和 source2 的属性都被合并到了 target 对象中。

过滤不需要的属性

如果源对象中有不需要的属性,我们可以使用解构赋值来过滤它们:

代码中,{ a, ...rest } = source 可以读取 source 对象的 a 属性,并将其他属性存到 rest 对象中。因此,最后的 target 对象只包含 source 对象中除 a 属性外的其他属性。

保留对象型属性

在合并对象时,我们可能只需要合并源对象中的对象型属性,而不包括原始值属性。此时,可以将 Object.assign() 与 typeof 运算符配合使用。

代码中,将源对象中的对象型属性过滤出来,然后通过 map() 函数将其转换为键值对数组,最后使用 Object.assign() 合并到目标对象中。因为 Object.assign() 方法仅能复制对象型属性的引用,所以源对象和目标对象中的对象型属性指向同一地址。

深拷贝

如果需要复制对象型属性的值而非引用,可以使用 JSON.stringify() 和 JSON.parse() 方法实现深拷贝。

代码中,使用 JSON.stringify() 方法将源对象中的对象型属性转换为字符串,然后使用 JSON.parse() 方法将其转换为对象型属性的值,从而实现深拷贝。

在使用深拷贝时需要注意,如果源对象中含有 Date、RegExp 等非对象型属性,则需要单独处理。同时,深拷贝涉及序列化和反序列化两个过程,性能相对较低。

总结

在本文中,我们介绍了 Object.assign() 方法的基本使用和高级技巧,包括对象拷贝、对象合并、过滤不需要的属性、保留对象型属性、深拷贝等。通过学习 Object.assign() 方法,可以提高编程效率,减少代码量,更好地应对前端开发中的各类实际问题。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64cdf7f4b5eee0b5255ec1a7

纠错
反馈