JavaScript对象拷贝与Object.assign用法实例分析

在JavaScript编程中，对象拷贝是一项非常重要的任务，因为我们经常需要在代码中使用对象，但由于JavaScript对象的引用特性，往往原始对象会被误修改或者无意间影响其他部分代码，这时候需要做对象拷贝，保持数据的安全完整性。JavaScript的标准库提供了多种深复制或浅复制对象的拷贝方法，其中最常用的就是Object.assign（用于复制一个或多个对象的公共属性）。

本文主要介绍 JavaScript 对象拷贝的概念及步骤、Object.assign的用法及实例分析。

JavaScript对象拷贝的概念及步骤

在进行对象拷贝之前，需要明确JavaScript数据类型的特性。JS中，复杂数据类型是由对象、数组、函数多种类型组合而成的，基本数据类型包括：字符串、数字、布尔值、Undefined、Null。其中，基本数据类型直接存储在栈内存中，不涉及引用的传递，而复杂数据类型则存储在堆内存中。在JS中，往往通过对象的引用来访问和操作对象，如果直接操作一个引用类型的对象，往往会把它修改成一个不期望的结果。为了解决这个问题，我们需要进行复制对象并拷贝到新的地址中，而不是直接引用。JavaScript 对象拷贝就是将一个对象从位置 A 复制到位置 B，同时两个位置存储的数据具有相同的值和属性。

对象拷贝的步骤如下：

1. 创建一个新的对象，即目标对象（destination object）。
2. 遍历源对象（source object）的属性，然后复制属性值到目标对象中。
3. 如果源对象的属性是一个对象，则递归地调用对象拷贝方法。

Object.assign方法

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

简单示例：

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let obj3 = { c: 3 };

let obj4 = Object.assign({}, obj1, obj2, obj3); // 将 obj1, obj2, obj3 的属性拷贝到 obj4 中

console.log(obj4); // { a: 1, b: 2, c: 3 }

Object.assign() 方法会遍历所有对象并把它们中的所有可枚举属性拷贝给目标对象，并返回目标对象。注意，Object.assign() 会将每个源对象的可枚举和可继承属性（包括 Symbol 类型的属性值）拷贝到目标对象中。源对象的 引用类型 属性会在 目标对象 中存储一个指向该属性存储位置的引用，而不是递归复制引用值中的属性。

Object.assign用法实例分析

实例一：拷贝单个对象

下面是一个拷贝单个对象的例子，基于原始数据，简单转换一个元素，不影响原始数据。

let obj1 = { a: 1 };
let obj2 = Object.assign({}, obj1);
obj2.a = 2;

console.log(obj1); // { a: 1 }
console.log(obj2); // { a: 2 } 

在这个例子中，我们拷贝了obj1到新的对象obj2，修改obj2的属性不会影响原始数据obj1。

实例二：拷贝多个对象

我们也可以拷贝多个对象，并把它们的属性都拷贝到目标对象中。

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let obj3 = { c: 3 };

let obj4 = Object.assign({}, obj1, obj2, obj3); // 将 obj1, obj2, obj3 的属性拷贝到 obj4 中

console.log(obj4); // { a: 1, b: 2, c: 3 }

在这个例子中，我们将 obj1, obj2 和 obj3 的属性拷贝进了 obj4中。如果有相同的属性，后面的会覆盖前面的属性，因此最后 obj4中，a的值为1，b的值为2，c的值为3。

总结

本文介绍了JavaScript对象拷贝的概念及步骤和Object.assign的用法及实例分析。

对象拷贝是一项非常重要的任务，可以通过对象拷贝来防止原始对象被误修改或多次引用，保持数据的安全完整性。

Object.assign() 方法是浅复制的，即只会拷贝每个源对象的一级属性，不会进行递归复制引用类型中的属性。通过这种方法，可以轻松地将多个对象拷贝到一个新的目标对象中，并在这个过程中对目标对象中的属性进行更改。