在前端开发中，拷贝对象往往是非常常见的操作。而在 ES6 之后的版本中，我们可以使用 Object.assign 函数来实现对象的合并和拷贝。在 ES10 中，Object.assign 函数的功能得到了进一步的改进和增强。在本文中，我们将详细介绍 ES10 中 Object.assign 函数的正确使用技巧，帮助开发者更好地理解和使用该函数。
Object.assign 函数简介
Object.assign 函数是一个用于合并和拷贝对象的函数。它接受一个或多个源对象和一个目标对象作为参数，并将源对象中的属性复制到目标对象中。如果有多个源对象，则它们按照参数列表中的顺序进行合并。如果属性名相同，则后面的属性会覆盖前面的属性。
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const result = Object.assign(target, source);
console.log(target); // { a: 1, b: 3, c: 4 }
console.log(result); // { a: 1, b: 3, c: 4 }在上面的示例中，我们定义了一个目标对象 target 和一个源对象 source，并将 source 对象合并到 target 对象中。我们可以看到，b 属性的值被 source 对象的 b 属性覆盖。
ES10 中 Object.assign 的改进
在 ES10 中，Object.assign 函数得到了进一步的改进和增强。最主要的改进是支持了对原始类型的拷贝。在 ES6 中，如果源对象是原始类型的话，Object.assign 函数会将其包装成一个对象。而在 ES10 中，我们可以直接拷贝原始类型的数据。
const target = { a: 1, b: 2 };
const source = "hello world";
const result = Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
console.log(result); // { a: 1, b: 2 }在上面的示例中，我们将一个字符串作为源对象传递给 Object.assign 函数。我们可以看到，源对象中的属性并没有被复制到目标对象中，而目标对象的属性仍然是原来的值。
另外，在 ES10 中，Object.assign 函数还增加了 Symbol 类型属性的拷贝支持。
Object.assign 函数正确使用技巧
虽然 Object.assign 函数很方便，但是我们在使用它的时候也需要注意一些细节和技巧。下面是一些使用技巧：
注意覆盖
当使用 Object.assign 函数进行对象合并时，如果源对象和目标对象中有相同属性的话，后面的属性会覆盖前面的属性。因此，在合并对象时要注意属性的覆盖情况，以免产生预料之外的结果。
const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { c: 5, d: 6 };
const result = Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 3, c: 5, d: 6 }
console.log(result); // { a: 1, b: 3, c: 5, d: 6 }在上面的示例中，我们将两个源对象合并到目标对象中。由于 source1 和 source2 中都有 c 属性，因此后面的 source2 中的 c 属性会覆盖前面的 source1 中的 c 属性。
使用空对象进行拷贝
为了避免源对象被修改，我们可以使用空对象作为目标对象来进行拷贝。
const source = { a: 1, b: 2 };
const result = Object.assign({}, source);
console.log(source); // { a: 1, b: 2 }
console.log(result); // { a: 1, b: 2 }在上面的示例中，我们使用空对象作为目标对象来进行拷贝。由于目标对象是空对象，并不影响源对象的值。另外，我们可以将不同的源对象拷贝到同一个目标对象中。
const source1 = { a: 1 };
const source2 = { b: 2 };
const result = Object.assign({}, source1, source2);
console.log(source1); // { a: 1 }
console.log(source2); // { b: 2 }
console.log(result); // { a: 1, b: 2 }使用展开运算符简化操作
在 ES6 中，我们可以使用展开运算符来简化对象的拷贝操作。
const source = { a: 1, b: 2 };
const result = { ...source };
console.log(source); // { a: 1, b: 2 }
console.log(result); // { a: 1, b: 2 }在上面的示例中，我们使用展开运算符来进行对象的拷贝。由于展开运算符会将一个对象拆分成它的各个属性，并将这些属性复制到新的对象中，因此可以方便地进行对象的拷贝。
总结
在 ES10 中，Object.assign 函数得到了进一步的改进和增强。我们可以使用它来进行对象的合并和拷贝。在使用它时，我们需要注意属性的覆盖情况、使用空对象作为目标对象来进行拷贝，以及使用展开运算符来简化操作等技巧。希望本文对大家能够更好地理解和使用 Object.assign 函数有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c566d968c7c53b076c709