JavaScript 中的浅拷贝手段及应用场景

在 JavaScript 中，浅拷贝（Shallow Copy）是指创建一个新对象，新对象的属性值是原对象属性值的引用。浅拷贝只复制对象的第一层属性，如果属性值是对象或数组，则复制的是引用，而不是实际的值。以下是几种常见的浅拷贝手段：

1. Object.assign()

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

const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);

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

注意：Object.assign() 只会拷贝源对象的自身可枚举属性，且是浅拷贝。

2. 展开运算符（Spread Operator）

展开运算符 ... 可以用于数组和对象的浅拷贝。

const original = { a: 1, b: { c: 2 } };
const copy = { ...original };

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

注意：展开运算符也是浅拷贝，只复制对象的第一层属性。

3. Array.prototype.slice()

对于数组，可以使用 slice() 方法进行浅拷贝。

const original = [1, 2, { a: 3 }];
const copy = original.slice();

console.log(copy); // [1, 2, { a: 3 }]

注意：slice() 方法返回一个新数组，但数组中的对象仍然是引用。

4. Array.prototype.concat()

concat() 方法也可以用于数组的浅拷贝。

const original = [1, 2, { a: 3 }];
const copy = original.concat();

console.log(copy); // [1, 2, { a: 3 }]

注意：concat() 方法返回一个新数组，但数组中的对象仍然是引用。

5. JSON.parse(JSON.stringify())

虽然 JSON.parse(JSON.stringify()) 可以实现深拷贝，但它有一些限制（如不能处理函数、undefined、Symbol 等），因此通常不推荐用于深拷贝。但对于浅拷贝来说，它也可以使用。

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));

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

注意：这种方法会丢失函数、undefined、Symbol 等特殊类型的值。

6. Lodash 的 clone 方法

Lodash 是一个流行的 JavaScript 工具库，它提供了 clone 方法用于浅拷贝。

const _ = require('lodash');

const original = { a: 1, b: { c: 2 } };
const copy = _.clone(original);

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

注意：_.clone 是浅拷贝，只复制对象的第一层属性。

总结

浅拷贝适用于只需要复制对象的第一层属性的场景。如果需要深拷贝（即递归复制所有嵌套对象），则需要使用其他方法，如递归实现、JSON.parse(JSON.stringify())（有局限性）、或使用 Lodash 的 cloneDeep 方法。

在实际开发中，选择哪种浅拷贝方法取决于具体的需求和上下文。