JavaScript的concat方法怎么合并数组？和扩展运算符有什么区别？

JavaScript的concat方法通过调用数组的concat实例方法合并数组，返回新数组且不修改原数组；扩展运算符（...）通过解构数组元素到新数组字面量中实现合并，语法更简洁灵活。两者均为浅拷贝，但扩展运算符在混合元素和复杂构建场景中更具优势。

• 方法定义：concat是数组原型上的方法，接受任意数量的参数（数组或单个值），按顺序将参数内容拼接到调用数组末尾，返回新数组，不修改原数组。const arr1 = [1, 2];const arr2 = [3, 4];const mergedArr = arr1.concat(arr2); // [1, 2, 3, 4]console.log(arr1); // [1, 2]（原数组未变）
• 参数灵活性：可合并多个数组、单个值或混合类型。const arr3 = [5, 6];const mergedMulti = arr1.concat(arr2, arr3, 7); // [1, 2, 3, 4, 5, 6, 7]
• 应用场景：

  不可变数据构建：如数据流处理中逐步生成新数组，确保原始数据不被修改。const initialUsers = [{ id: 1 }];const newUsers = [{ id: 2 }];const allUsers = initialUsers.concat(newUsers); // 新数组

  兼容性需求：在老旧项目或需支持ES5的环境中更稳妥。

• 语法定义：通过...解构数组元素到新数组字面量中，实现合并或浅拷贝。const arrA = [10, 20];const arrB = [30, 40];const mergedSpread = [...arrA, ...arrB]; // [10, 20, 30, 40]
• 灵活性优势：

  混合元素插入：可在合并时插入其他元素或结合其他操作符。const base = ['a', 'b'];const mergedWithExtra = [...base, 'c', ...['d']]; // ['a', 'b', 'c', 'd']

  浅拷贝：快速创建数组副本，语法简洁。const copy = [...base]; // 新数组，与原数组无关

• 应用场景：

  复杂数组构建：需混合元素、解构赋值或函数参数传递时更直观。

  现代开发环境：ES6+环境中首选，代码可读性更高。

• 语法与可读性：

  concat需显式调用方法，参数列表较长时可能冗余。

  扩展运算符直接嵌入数组字面量，更符合现代代码风格。

• 功能扩展性：

  concat仅支持顺序拼接，无法插入中间元素。

  扩展运算符可自由组合元素、解构赋值或与其他操作符（如map、filter）结合。

• 性能差异：

  日常场景中性能差异可忽略，但极端情况下（如超大数组或高频调用），扩展运算符可能更高效（避免中间数组创建）。

• 拷贝行为：

  两者均为浅拷贝，处理引用类型（如对象、数组）时需额外深拷贝。const original = [{ id: 1 }];const copiedConcat = original.concat();const copiedSpread = [...original];copiedSpread[0].id = 2;console.log(original[0].id); // 2（原数组被修改）

• 优先扩展运算符：现代项目、需混合元素或复杂构建时，其语法简洁性和灵活性更优。
• 选择concat：需兼容ES5环境、明确强调不可变数据或链式调用时更直观。
• 深拷贝需求：无论选择哪种方式，处理引用类型时需通过JSON.parse(JSON.stringify(array))或库（如Lodash的cloneDeep）实现深拷贝。