问题：JavaScript中使用forEach给数组push对象时，为什么修改原数组会影响新数组？

Question

在JavaScript中，使用`forEach`遍历数组并将对象`push`到新数组时，若修改原数组中的对象，新数组中的对应对象也会受到影响。这是因为在JavaScript中，对象（包括数组中的对象）是通过引用传递的，而非值传递。当你将对象从原数组`push`到新数组时，实际上是将对象的引用地址复制过去，而不是创建一个新的独立副本。因此，新数组中的对象与原数组中的对象指向同一块内存地址。一旦修改原数组中对象的属性，这种修改会反映在所有引用该对象的地方，包括新数组中的对象。要避免这种影响，需在`push`前对对象进行深拷贝，例如使用`JSON.parse(JSON.stringify(obj))`或通过扩展运算符、`Object.assign`等方法进行浅拷贝（视对象嵌套情况而定）。

Answer 1

JavaScript 中对象引用与数组操作的深度解析

在 JavaScript 中，数组操作是日常开发中常见的任务之一。尤其在使用 forEach 遍历数组并进行对象 push 操作时，开发者可能会遇到对象引用共享的问题。本文将从浅入深地解析这一现象，并提供多种解决方案。

1. 现象描述

当使用 forEach 遍历一个包含对象的数组，并将这些对象 push 到新数组中后，若修改原数组中的对象属性，新数组中的对象也会同步发生变化。

2. 核心原因分析

JavaScript 中的对象（包括数组内的对象）是以引用方式传递的，而不是值传递。这意味着当你将一个对象从一个数组复制到另一个数组时，你复制的是该对象在内存中的地址，而非其内容的副本。

3. 示例代码演示

    const originalArray = [{ name: 'Alice' }, { name: 'Bob' }];
    const newArray = [];

    originalArray.forEach(obj => {
      newArray.push(obj);
    });

    originalArray[0].name = 'Charlie';

    console.log(newArray[0].name); // 输出 "Charlie"
  

4. 引用机制图解

      graph TD
        A[originalArray] --> B[obj1]
        A --> C[obj2]
        D[newArray] --> B
        D --> C
    

5. 解决方案概览

为避免对象引用带来的副作用，需要对对象进行拷贝操作。常见的方法包括：

• 使用 JSON.parse(JSON.stringify(obj)) 进行深拷贝
• 使用扩展运算符 {...obj} 进行浅拷贝
• 使用 Object.assign({}, obj) 进行浅拷贝
• 使用第三方库如 Lodash 的 cloneDeep 方法

6. 拷贝方式对比

方法	是否深拷贝	适用场景	缺点
JSON.parse(JSON.stringify(obj))	是	对象无函数、undefined、Symbol等	不支持函数、日期等复杂类型
{...obj}	否	对象嵌套不深	仅浅拷贝，深层引用仍共享
Object.assign({}, obj)	否	兼容性要求较高时	仅浅拷贝，性能略低

7. 实际应用建议

在开发中应根据对象结构的复杂程度选择合适的拷贝方式：

• 若对象结构简单且不含函数或特殊类型，可使用 JSON 方法
• 若对象只有一层属性，使用扩展运算符或 Object.assign 更为高效
• 若对象嵌套复杂，建议使用成熟的深拷贝库，如 lodash 或自定义递归拷贝函数

8. 延伸思考：函数式编程中的不可变性

在现代前端开发中，尤其是在 React 等框架中，推崇“不可变数据”（Immutability）理念。避免直接修改原数组或对象，而是通过拷贝生成新的数据结构，有助于提升程序的可预测性和性能优化。