concat 详解：不止是字符串合并 – wiki基地

---

concat 详解：不止是字符串合并

在编程世界中，concat 是一个随处可见、功能看似简单的函数名。许多初学者可能最早接触它是在字符串操作中，用于将两个或多个字符串连接起来。然而，concat 的能力远不止于此。在许多语言中，尤其是在 JavaScript 等动态语言中，concat 也是处理数组的重要工具，并且其行为有着独特的特性，理解这些特性对于写出健壮、高效的代码至关重要。

本文将带您深入了解 concat，从最常见的字符串合并开始，逐步扩展到它在数组中的应用，探讨其核心行为、性能考量以及与其他类似操作的比较，揭示 concat 更广泛的用途和深层含义。

1. concat：初识于字符串的连接

我们从 concat 最常见的应用场景开始：字符串的合并。在许多编程语言（如 JavaScript、Java、Python 等，尽管具体语法可能不同）中，字符串类型提供了用于连接的方法或操作符。

在 JavaScript 中，字符串对象有一个内置的 concat() 方法：

“`javascript
const str1 = “Hello”;
const str2 = “World”;
const str3 = “!”;

// 使用 concat 合并字符串
const result1 = str1.concat(” “, str2, str3);
console.log(result1); // 输出: “Hello World!”

// concat 可以接受多个参数
const result2 = “abc”.concat(“def”, “ghi”);
console.log(result2); // 输出: “abcdefghi”
“`

这个例子展示了 String.prototype.concat() 的基本用法：它将调用方法的字符串与作为参数传递进来的一个或多个字符串连接起来，并返回一个 新的 字符串。

关键点：字符串的不可变性

理解字符串的 concat 方法，就必须理解字符串的不可变性（Immutability）。在绝大多数编程语言中，字符串是不可变的数据类型。这意味着一旦一个字符串被创建，它的内容就不能被改变。任何看似修改字符串的操作，实际上都是创建了一个新的字符串。

concat 方法正是这一原则的体现。str1.concat(" ", str2, str3) 并不会修改 str1、str2 或 str3。它计算出合并后的新内容 “Hello World!”，然后创建一个全新的字符串对象来存储这个结果，并返回这个新字符串的引用。原始字符串 str1、str2、str3 在内存中保持不变。

字符串连接的替代方案

尽管 concat 可以用于字符串连接，但在许多语言中，更常用、更简洁的方式是使用加号 + 操作符或模板字面量（在 JavaScript 中）。

“`javascript
const str1 = “Hello”;
const str2 = “World”;
const str3 = “!”;

// 使用 + 操作符
const resultPlus = str1 + ” ” + str2 + str3;
console.log(resultPlus); // 输出: “Hello World!”

// 使用模板字面量 (ES6+)
const resultTemplate = ${str1} ${str2}${str3};
console.log(resultTemplate); // 输出: “Hello World!”
“`

在 JavaScript 中，+ 操作符和模板字面量通常比 concat() 方法更受欢迎，因为它们更简洁、更易读。现代 JavaScript 引擎对 + 操作符在字符串连接方面的性能也进行了高度优化。在大多数情况下，使用 + 或模板字面量是更推荐的字符串连接方式。那么，concat 的真正威力体现在哪里呢？答案是数组。

2. concat：在数组中大显身手

concat 在数组操作中的作用远比在字符串中重要和常见。它用于合并两个或多个数组，或者向一个数组中添加元素，并始终返回一个 新的 数组。

在 JavaScript 中，数组对象提供 Array.prototype.concat() 方法：

“`javascript
const arr1 = [1, 2];
const arr2 = [3, 4];

// 合并两个数组
const newArray1 = arr1.concat(arr2);
console.log(newArray1); // 输出: [1, 2, 3, 4]

// 检查原始数组，它们没有被改变
console.log(arr1); // 输出: [1, 2]
console.log(arr2); // 输出: [3, 4]
“`

这展示了 Array.prototype.concat() 的核心行为：它将调用方法的数组与作为参数传递进来的数组或值连接起来，并返回一个 全新的 数组。原始数组 arr1 和 arr2 保持不变。

2.1 合并多个数组

concat 方法可以接受任意数量的参数，每个参数都可以是一个数组或其他值。

“`javascript
const arrA = [1, 2];
const arrB = [3, 4];
const arrC = [5, 6];

// 合并多个数组
const mergedArray = arrA.concat(arrB, arrC);
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]
“`

在这个例子中，arrA.concat(arrB, arrC) 将 arrB 和 arrC 的元素依次追加到 arrA 的元素后面，创建一个包含所有元素的新数组。

2.2 合并数组与非数组值

concat 方法不仅可以合并数组，还可以将非数组值作为参数。当参数是非数组值时，这些值会被简单地作为新数组的元素追加到末尾。

“`javascript
const initialArray = [1, 2];

// 合并数组和单个值
const arrayWithValues = initialArray.concat(3, [4, 5], 6);
console.log(arrayWithValues); // 输出: [1, 2, 3, 4, 5, 6]

// concat 不会递归展开嵌套数组中的数组
const nestedArray = [7, [8, 9]];
const combined = arrayWithValues.concat(nestedArray);
console.log(combined); // 输出: [1, 2, 3, 4, 5, 6, 7, [8, 9]]
// 注意：[8, 9] 是作为单个元素被添加进去的，而不是展开成 8 和 9
“`

这个例子非常重要。它说明 concat 在处理数组参数时会展开一级（将其中的元素取出），但在处理非数组参数（包括嵌套的数组作为一个整体值时）只是简单地将其作为元素添加。如果你想要完全展平一个多维数组，concat 结合 apply 或使用 flat() 方法是更常见的做法，但仅使用 concat 本身无法实现深度展平。

2.3 concat 的核心特性：不可变性 (Non-Mutation)

正如字符串的 concat 不会修改原始字符串一样，数组的 concat 也 绝对不会 修改原始数组。这是 concat 方法最重要的特性之一，也是它与其他一些数组修改方法（如 push、pop、splice 等）的根本区别。

“`javascript
const originalArray = [10, 20];
const anotherArray = [30, 40];

const result = originalArray.concat(anotherArray);

console.log(result); // 输出: [10, 20, 30, 40]
console.log(originalArray); // 输出: [10, 20] – 原始数组未改变
console.log(anotherArray); // 输出: [30, 40] – 原始数组未改变
“`

这种不可变的行为在很多场景下都是非常有益的：

• 函数式编程风格： 在函数式编程中，强调无副作用（Side-effect free）的纯函数。concat 返回新数组而不修改原数组，完美契合这一理念。
• 状态管理： 在 React、Vue、Redux 等现代前端框架和库中，尤其是在进行状态管理时，保持数据的不可变性是推荐的做法。使用 concat 可以很容易地创建新状态而避免直接修改旧状态，简化状态追踪和调试。
• 避免意外修改： 在函数之间传递数组时，如果使用会修改原数组的方法，调用者可能会意外地发现他们的数据被改变了。使用 concat 则能保证传递给函数的数组不会在函数内部被修改。

因此，当你需要一个包含现有数组元素和新元素的 新 数组，并且不希望改变原始数组时，concat 是一个非常合适的选择。

3. concat 的性能考量

任何创建新数据结构的操作都会涉及到内存分配和数据复制，这自然会带来一定的性能开销。concat 方法也不例外。

• 内存分配： 每次调用 concat 都会创建一个新的数组（或字符串）。新数组的大小是所有参与合并的数组/字符串的总大小。对于大型数组或频繁的 concat 操作，这可能会导致较高的内存使用和垃圾回收压力。
• 数据复制： concat 需要将原始数组/字符串以及参数中的数组/字符串的元素复制到新创建的数据结构中。复制大量数据需要时间和计算资源。

相较于修改原数组的方法（如 push、splice），concat 由于创建了新数组，理论上会有更高的开销。例如，向一个数组末尾添加元素：

“`javascript
let arr = [1, 2, 3];

// 使用 concat (创建新数组)
arr = arr.concat(4); // 新数组 [1, 2, 3, 4] 被创建，旧数组 [1, 2, 3] 可能被回收

// 使用 push (修改原数组)
let arrPush = [1, 2, 3];
arrPush.push(4); // arrPush 变为 [1, 2, 3, 4]，没有创建新的数组对象
“`

如果性能是关键因素，并且允许修改原始数组，那么 push 或 splice 通常会比 concat 更高效，因为它们避免了新数组的创建和数据的完全复制。

然而，现代 JavaScript 引擎在优化 concat 方面做得很好，尤其是在合并少量数组时。对于多数应用场景，concat 的性能开销通常是可以接受的，并且其带来的不可变性、代码清晰度等优势往往更重要。

与字符串 + 操作符的比较

在字符串连接方面，如前所述，+ 操作符通常是首选。虽然从概念上讲 + 也创建新字符串，但 JavaScript 引擎对连续的 + 操作有特殊的优化，可能比多次调用 concat 更有效率。

4. concat 的替代方案

理解了 concat 的工作原理和特性后，我们也应该了解实现类似功能的其他方法，以便在不同场景下做出最佳选择。

4.1 字符串连接的替代方案 (已提及)

• + 操作符： 最常用的字符串连接方式。
• 模板字面量 (Template Literals): 使用反引号 ` 和 ${} 语法，尤其适合构建包含变量的复杂字符串。

4.2 数组合并/添加元素的替代方案

• 展开语法 (Spread Syntax) ...： 这是 ES6 引入的强大特性，可以用于展开数组或对象。在数组操作中，它是 concat 的一个非常流行且强大的替代品。

  “`javascript
  const arr1 = [1, 2];
  const arr2 = [3, 4];

  // 使用展开语法合并数组
  const newArraySpread = […arr1, …arr2]; // 输出: [1, 2, 3, 4]

  // 合并多个数组和值
  const moreArraySpread = […arr1, 5, …arr2, 6]; // 输出: [1, 2, 5, 3, 4, 6]
  “`

  展开语法同样创建并返回一个新数组，不修改原数组，因此也具备不可变性。它的语法通常比 concat 更简洁、更灵活，可以直接在数组字面量内部进行合并和插入值，使得代码更易读。在需要合并多个数组或在合并时插入单个值时，展开语法往往是比 concat 更好的选择。

• push() / unshift() 结合展开语法： 如果你可以接受修改原始数组，可以使用 push() (向末尾添加) 或 unshift() (向开头添加)。结合展开语法，可以方便地将另一个数组的元素添加到现有数组中。

  “`javascript
  const arrToModify = [1, 2];
  const elementsToAdd = [3, 4];

  // 修改原数组
  arrToModify.push(…elementsToAdd); // arrToModify 变为 [1, 2, 3, 4]

  const anotherArrToModify = [3, 4];
  const elementsToPrepend = [1, 2];
  anotherArrToModify.unshift(…elementsToPrepend); // anotherArrToModify 变为 [1, 4, 3, 4] (注意 unshift 的行为，这里应该是 [1, 2, 3, 4])
  // 修正：unshift(…[1, 2]) 会将 1 和 2 作为独立元素添加到开头
  console.log(anotherArrToModify); // 输出: [1, 2, 3, 4]
  ``
这种方法修改了原始数组arrToModify和anotherArrToModify`。它不具备不可变性。

• splice()： splice() 方法非常灵活，可以用于在数组的任意位置添加、删除或替换元素。它会修改原始数组。

  “`javascript
  const arrSplice = [1, 5];
  const elementsToInsert = [2, 3, 4];

  // 在索引 1 的位置，删除 0 个元素，并插入 elementsToInsert 的所有元素
  arrSplice.splice(1, 0, …elementsToInsert);
  console.log(arrSplice); // 输出: [1, 2, 3, 4, 5]
  ``splice` 也修改原始数组，并且语法相对复杂，不适合简单的首尾合并。

• reduce()： 虽然不是直接替代 concat，但在某些需要处理嵌套数组并展平的场景下，可以使用 reduce 来实现累加合并的效果。但这通常比 concat 或展开语法复杂得多。

  “`javascript
  const nestedArrays = [[1, 2], [3, 4], [5, 6]];

  // 使用 reduce 和 concat 展平并合并
  const flattenedArray = nestedArrays.reduce((acc, currentArray) => acc.concat(currentArray), []);
  console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5, 6]
  “`

5. 何时使用 concat？

尽管有多种替代方案，concat 依然有其适用场景：

1. 简单合并少量数组并需要新数组： 当你需要合并两个或少数几个数组，并且要求不修改原始数组时，concat 是一个清晰且意图明确的选择。虽然展开语法也可以，但 arr1.concat(arr2) 的可读性也很高。
2. 向数组末尾添加单个或多个元素（创建新数组）： arr.concat(element1, element2, ...) 也是一个简洁的方式，可以用来创建原数组加上这些新元素的副本。
3. 兼容性要求： concat 是 ECMAScript 3 就引入的方法，具有非常广泛的浏览器和环境支持。在不需要考虑 ES6+ 特性（如展开语法）的旧环境或特殊场景下，concat 是可靠的选择。
4. 代码风格偏好： 有些开发者或团队可能因为历史原因或个人偏好更喜欢使用 concat。

总的来说，在现代 JavaScript 开发中，处理数组合并或添加元素时，展开语法 ... 因为其简洁性和灵活性，在需要创建新数组（非修改原数组）的场景下越来越受欢迎，甚至在很多情况下可以取代 concat。然而，concat 依然是一个有效且易于理解的工具，尤其是在不需要展开语法复杂性或需要考虑旧环境兼容性时。

6. 总结

concat 是一个看似简单但功能多样的函数/方法。它不仅仅用于字符串的合并，更在数组操作中扮演着重要角色。理解 concat 的关键在于把握其核心特性：它总是创建一个新的数据结构（字符串或数组），而不会修改原始数据结构。 这种不可变性使得 concat 在需要保持数据纯净性、易于状态管理或避免副作用的场景下成为一个有价值的工具。

尽管字符串连接方面有更常用的 + 和模板字面量，数组合并方面有了更灵活的展开语法 ...，但 concat 依然因其明确的意图、广泛的兼容性和在简单合并场景下的直观性而占有一席之地。

掌握 concat 以及其替代方案（如展开语法、push 等）各自的特点、优缺点和适用场景，能够帮助开发者根据具体需求，写出更清晰、更高效、更健壮的代码。concat 的故事告诉我们，即使是看似简单的函数，深入理解其行为和背后的原理，也能为我们的编程实践带来更深刻的洞察。下次当你需要合并列表时，不妨多想一步：是需要一个新列表，还是可以修改原列表？是合并数组还是仅仅添加元素？理解了这些，就能更好地选择包括 concat 在内的合适工具。

---