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