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

javascript的concat方法和扩展运算符都用于合并数组，但扩展运算符更灵活。1. concat是数组方法，返回新数组且不修改原数组，适合明确构建不可变数据或老旧环境兼容；2. 扩展运算符语法简洁直观，可混合元素并创建浅拷贝，适用于复杂构建场景；3. 两者均为浅拷贝，处理引用类型时需额外实现深拷贝逻辑。

JavaScript的concat方法用于将一个或多个数组或值连接起来，生成一个新的数组，而不会修改原始数组。扩展运算符（...）则提供了一种更灵活、更简洁的语法来解构数组，并将其元素“展开”到新的数组字面量中，同样能实现合并数组的效果，但其应用场景和表达力更为广泛。

解决方案

concat 方法是数组原型上的一个方法，它接受任意数量的参数，这些参数可以是数组也可以是单个值。它会把这些参数按顺序添加到调用它的数组的末尾，并返回一个全新的数组。这个过程是“非破坏性”的，也就是说，原始数组不会被改变。

举个例子：

立即学习“Java免费学习笔记（深入）”；

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

// 合并两个数组
const mergedArr1 = arr1.concat(arr2);
console.log(mergedArr1); // [1, 2, 3, 4]
console.log(arr1);      // [1, 2] (原始数组未变)

// 合并多个数组
const mergedArr2 = arr1.concat(arr2, arr3);
console.log(mergedArr2); // [1, 2, 3, 4, 5, 6]

// 合并数组和单个值
const mergedArr3 = arr1.concat(7, arr2, 8);
console.log(mergedArr3); // [1, 2, 7, 3, 4, 8]

可以看到，concat 的行为非常直接和可预测。它就像一个数组的“拼接机”，你给它什么，它就按顺序给你拼接到一起，然后吐出一个全新的结果。

concat 方法的实际应用场景有哪些？

我个人觉得，concat 方法在那些需要明确地、一步一步地构建新数组，并且特别强调不修改原有数据的场景下，依然有它的用武之地。比如，你可能正在处理一个数据流，每一步都需要基于前一步的数据生成新的不可变状态。

想象一下，你有一个基础的用户列表，然后从不同的数据源获取了一些新的用户增量。如果你想把这些增量安全地加到现有列表后面，同时确保原始列表保持不变，concat 就是一个很自然的选择。它提供了一种非常清晰的意图表达：我就是要把这些东西“连起来”。

const initialUsers = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const newSignups = [{ id: 3, name: 'Charlie' }];
const importedUsers = [{ id: 4, name: 'David' }];

// 安全地合并所有用户，不影响原始列表
const allUsers = initialUsers.concat(newSignups, importedUsers);
console.log(allUsers);
/*
[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'David' }
]
*/
console.log(initialUsers); // [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] (未变)

在一些老旧的项目或者对浏览器兼容性有严格要求的环境中，concat 也可能是一个更稳妥的选择，因为它是一个非常成熟且广泛支持的ES5方法。虽然现在ES6及以上特性已经很普及了，但了解它的历史和适用性还是挺重要的。

扩展运算符在数组合并中的优势体现在哪里？

说实话，自从ES6引入了扩展运算符（spread syntax），它在数组合并方面几乎成了我的首选。它的优势主要体现在简洁性、可读性和惊人的灵活性上。

扩展运算符允许你在一个数组字面量内部“展开”另一个可迭代对象（比如数组）的所有元素。这就像是把一个数组的“内容”直接倒进了另一个数组的“容器”里。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

2

查看详情

const arrA = [10, 20];
const arrB = [30, 40];

// 使用扩展运算符合并
const mergedWithSpread = [...arrA, ...arrB];
console.log(mergedWithSpread); // [10, 20, 30, 40]

是不是看起来比 concat 更直观？它不仅仅是合并，更是一种“组装”的能力。你可以随意在合并的同时插入新的元素，或者与其他操作符结合使用：

const baseItems = ['apple', 'banana'];
const extraItems = ['orange', 'grape'];

// 合并并添加新元素
const allFruits = [...baseItems, 'kiwi', ...extraItems, 'mango'];
console.log(allFruits); // ["apple", "banana", "kiwi", "orange", "grape", "mango"]

// 快速创建数组的浅拷贝
const copyOfBaseItems = [...baseItems];
console.log(copyOfBaseItems); // ["apple", "banana"]
console.log(copyOfBaseItems === baseItems); // false (是新数组)

这种语法上的灵活性让代码变得更加富有表现力，也更容易理解。它把合并数组的操作融入到更广阔的数组字面量构建场景中，使得开发者可以更自由地构造所需的数据结构。我个人觉得，当你需要进行复杂的数组构建，或者需要将数组元素与其他单个元素混合时，扩展运算符的表达力是 concat 无法比拟的。

concat 和扩展运算符在性能和深浅拷贝上有什么不同？

在性能方面，对于大多数日常应用场景，concat 和扩展运算符之间的性能差异通常可以忽略不计。JavaScript 引擎在不断优化，对于小型到中等规模的数组操作，这些微小的差异几乎不会对用户体验产生任何影响。

不过，如果非要抠细节，在某些特定的极端场景下，比如处理极其庞大的数组，或者在性能敏感的循环中频繁操作，可能会发现一些细微的差异。例如，concat 在链式调用时可能会创建多个中间数组，而扩展运算符在某些情况下可能更直接。但请记住，这通常是微观优化，在实际开发中，代码的可读性和维护性往往比这点性能差异更重要。

真正需要我们关注的是它们在“拷贝”行为上的共同点：两者都执行的是浅拷贝。

这意味着什么呢？当你的数组中包含的是基本类型（如数字、字符串、布尔值）时，浅拷贝就是完全复制了这些值。但当数组中包含的是对象（包括数组、函数等引用类型）时，concat 和扩展运算符都只会复制这些对象的引用，而不是创建这些对象本身的全新副本。

看个例子就明白了：

const originalObjects = [{ id: 1, value: 'A' }, { id: 2, value: 'B' }];

// 使用 concat 合并（或复制）
const copiedByConcat = originalObjects.concat(); // 或者 originalObjects.concat([])
console.log(copiedByConcat[0] === originalObjects[0]); // true

// 使用扩展运算符合并（或复制）
const copiedBySpread = [...originalObjects];
console.log(copiedBySpread[0] === originalObjects[0]); // true

// 修改复制后的数组中的对象
copiedBySpread[0].value = 'Changed A';

console.log(originalObjects[0].value); // "Changed A"
// 原始数组中的对象也被修改了！因为它们指向的是同一个对象。

这告诉我们一个重要的点：如果你需要一个完全独立于原始数据的新数组，并且数组内部也包含引用类型的数据，那么仅仅使用 concat 或扩展运算符是不够的。你需要进行“深拷贝”。深拷贝通常需要额外的库（如 Lodash 的 cloneDeep）或者自己实现递归复制逻辑（比如通过 JSON.parse(JSON.stringify(array)) 这种简单粗暴但有局限性的方式）。

所以，在选择 concat 还是扩展运算符时，我个人更倾向于扩展运算符，因为它在语法上更现代、更灵活。但无论是哪种，都要牢记它们都是浅拷贝，这在处理复杂数据结构时是一个非常关键的考量点。

以上就是JavaScript的concat方法怎么合并数组？和扩展运算符有什么区别？的详细内容，更多请关注php中文网其它相关文章！