ECMAScript 2019 引入了许多新的特性和功能，其中一个值得关注的特性是 Object.assign() 函数。该函数可以用于将一个或多个源对象的属性拷贝到一个目标对象中。在前端开发中，我们经常需要在一个对象上添加、修改或删除属性。使用 Object.assign() 函数可以使这个过程变得更加简单和优雅。
Object.assign() 函数的基本用法
Object.assign() 函数接收一个目标对象和一个或多个源对象，将源对象的属性融合到目标对象中，然后返回一个新的目标对象。如果目标对象中已经存在相同名称的属性，则后面的源对象会覆盖前面的源对象。
下面是 Object.assign() 函数的基本用法：
----- ------ - - -- -- -- - -- ----- ------ - - -- -- -- - -- ----- ------ - --------------------- -------- -------------------- -- - -- -- -- -- -- - - -------------------- -- - -- -- -- -- -- - -
在上面的示例中，我们创建了两个对象，target 和 source。然后将 source 的属性拷贝到 target 中，并返回一个新的目标对象。在这个过程中，source 中的 b 属性覆盖了 target 中的 b 属性。
实现对象的属性拷贝
在前端开发中，我们通常需要从一个对象中提取一些属性，然后创建一个新的对象。使用 Object.assign() 函数可以很容易地实现这个功能。
下面是一个示例代码：
----- ------ - - -- -- -- -- -- - -- ----- --------- - - -- --------- -- -------- -- ----------------------- -- - -- -- -- - -
在上面的示例中，我们创建了一个对象 source，它包含三个属性。然后创建了一个对象 extracted，从 source 中提取了两个属性。使用 Object.assign() 函数可以更简单地实现这个过程：
----- ------ - - -- -- -- -- -- - -- ----- --------- - ----------------- ------- - -- ---------- -- --------- --- ----------------------- -- - -- - -
在上面的示例中，我们创建了一个新的空对象，将 source 和一个自定义的对象合并起来（该对象的 b 和 c 属性均为 undefined）。结果是一个只包含 a 属性的新对象 extracted。
深拷贝和浅拷贝
使用 Object.assign() 函数进行属性拷贝时需要注意，该函数只能进行浅拷贝。在浅拷贝中，如果源对象的属性值是对象或数组，那么目标对象中对应属性的值将是源对象中该属性的引用。这就意味着，如果修改了源对象中的该属性，那么目标对象中对应属性的值也会发生变化。
下面是一个示例代码：
----- ------ - - -- - -- - - -- ----- ------ - ----------------- -------- -------------------- -- - -- - -- - - - ---------- - -- -------------------- -- - -- - -- - - -
在上面的示例中，我们创建了一个对象 source，它包含一个属性 a，a 的值是一个对象。然后使用 Object.assign() 函数将 source 的属性拷贝到一个新的对象 target 中，并打印出 target 的值。接着将源对象 source 中 a 对应的属性值修改为 2，并再次打印出 target 的值。可以看到，在源对象中修改了 a.b 的值后，目标对象 target 中对应的属性值也发生了变化。
如果需要进行深拷贝，可以使用 JSON.parse() 和 JSON.stringify() 函数实现。这种方法的缺点是，它只适用于纯数据对象，不能拷贝函数或原型链上的属性。
下面是一个示例代码：
----- ------ - - -- - -- - - -- ----- ------ - ----------------------------------- -------------------- -- - -- - -- - - - ---------- - -- -------------------- -- - -- - -- - - -
在上面的示例中，我们使用 JSON.parse() 和 JSON.stringify() 函数将 source 深拷贝到 target 中。可以看到，在源对象中修改了 a.b 的值后，目标对象 target 中对应的属性值没有发生变化。
总结
使用 Object.assign() 函数可以使对象的属性拷贝变得更加简单和优雅。该函数不仅可以实现属性的复制，还可以用于创建新的对象。使用 Object.assign() 函数需要注意浅拷贝的问题，如果需要进行深拷贝，可以使用 JSON.parse() 和 JSON.stringify() 函数。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651e4f1d95b1f8cacd5f83f3