面试题：JavaScript中浅拷贝的实现方式及应用场景

Question

请描述JavaScript中至少两种浅拷贝的实现方式，并举例说明它们适用于哪些应用场景。例如，当你有一个包含基本类型和对象引用的数组，在只需要拷贝一层结构时，你会选择哪种浅拷贝方式，为什么？

Answer 1

1. Object.assign()

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

const source = { a: 1, b: { c: 2 } };
const target = {};
Object.assign(target, source);
console.log(target); 

• 适用场景：适用于对象的浅拷贝，当需要合并多个对象属性且只需浅拷贝时使用。比如在Vuex中，经常使用 Object.assign() 来合并状态对象。例如，有一个基础配置对象和一个用户自定义配置对象，只需要合并属性且不需要深层次拷贝对象属性，就可以使用 Object.assign()。

const baseConfig = { theme: 'default', fontSize: 14 };
const userConfig = { theme: 'dark' };
const finalConfig = Object.assign({}, baseConfig, userConfig);
console.log(finalConfig); 

2. 展开运算符（...）

• 实现方式：在对象和数组中都可以使用展开运算符进行浅拷贝。
• 对象浅拷贝：

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = {...obj1 };
console.log(obj2); 

• 数组浅拷贝：

const arr1 = [1, { value: 2 }];
const arr2 = [...arr1];
console.log(arr2); 

• 适用场景：在对象场景下，简洁地创建一个现有对象的浅拷贝副本，常用于函数参数传递时创建对象副本。在数组场景下，快速创建数组浅拷贝，比如在React中，当需要更新数组但又不想改变原数组时，使用展开运算符创建浅拷贝数组，然后对新数组进行操作。例如：

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];
console.log(newNumbers); 

对于包含基本类型和对象引用的数组，只拷贝一层结构

• 选择展开运算符（...）：因为它语法简洁明了，无论是在数组还是对象浅拷贝时都非常方便。在数组浅拷贝中，使用展开运算符可以直接创建一个新数组，新数组与原数组具有相同的一层结构，包含基本类型的元素会被直接复制，对象引用则是共享。例如上述 const arr1 = [1, { value: 2 }]; const arr2 = [...arr1]; 的例子，既满足了浅拷贝一层结构的需求，又书写简单。相比 Object.assign()，它更适合数组场景，Object.assign() 主要针对对象的合并与浅拷贝。