JavaScript数组扁平化深度解析：理解concat行为与高效实现

本教程深入探讨javascript数组扁平化过程中的常见误区，特别是`array.prototype.concat()`方法在不重新赋值时为何无法实现预期效果。我们将详细解释`concat`的非原地修改特性，并提供两种高效且现代的解决方案：利用es6的展开运算符（spread operator）将元素推入新数组，以及使用内置的`array.prototype.flat()`方法，通过具体代码示例演示如何正确地扁平化嵌套数组。

理解Array.prototype.concat()的非原地修改特性

在JavaScript中，Array.prototype.concat()方法用于合并两个或多个数组。然而，一个常见的误解是它会修改原数组。实际上，concat()方法返回一个包含原数组及所有额外数组或元素的新数组，而不会对调用它的原数组进行任何修改。

考虑以下代码示例，其中我们尝试在一个自定义的数组扁平化函数中使用concat()：

const flat = function(arr, n) {
  if (n === 0) {
    return arr;
  } else if (n === 1) {
    let newarr = [];
    for (let i = 0; i < arr.length; i++) {
      if (Number.isInteger(arr[i])) {
        newarr.push(arr[i]);
      } else if (Array.isArray(arr[i])) {
        // 问题所在：concat 返回新数组，但这里没有捕获其返回值
        newarr.concat(arr[i]); 
      } 
    }
    return newarr;
  }
};

console.log(flat([2, 4, [2, 4, 9], 1, 6], 1)); // 预期输出: [2, 4, 2, 4, 9, 1, 6]
// 实际输出: [2, 4, 1, 6]

在上述代码中，当arr[i]是一个数组（例如[2, 4, 9]）时，newarr.concat(arr[i])会创建一个新的数组，其中包含了newarr的当前内容以及arr[i]的元素。然而，这个新创建的数组并没有被赋值给任何变量，特别是没有赋值回newarr。因此，newarr保持不变，导致嵌套数组的元素没有被添加到最终结果中。

要正确使用concat()，您需要将其返回值重新赋值给一个变量：

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

// 示例：正确使用 concat
newarr = newarr.concat(arr[i]); 

虽然这种方法能够解决问题，但对于将一个数组的元素逐个添加到另一个数组的场景，还有更简洁、更符合现代JavaScript实践的方式。

解决方案一：使用展开运算符（Spread Operator）

ES6引入的展开运算符（...）提供了一种将可迭代对象（如数组）的元素在需要多个参数或多个元素的地方展开的强大机制。在数组扁平化场景中，我们可以利用它将嵌套数组的元素直接“展开”并推入目标数组。

BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

871

查看详情

将上述自定义flat函数中的问题行替换为使用展开运算符，可以有效地解决问题：

const flatWithSpread = function(arr, n) {
  if (n === 0) {
    return arr;
  } else if (n === 1) {
    let newarr = [];
    for (let i = 0; i < arr.length; i++) {
      if (Number.isInteger(arr[i])) {
        newarr.push(arr[i]);
      } else if (Array.isArray(arr[i])) {
        // 使用展开运算符将 arr[i] 的元素推入 newarr
        newarr.push(...arr[i]); 
      } 
    }
    return newarr;
  }
};

console.log(flatWithSpread([2, 4, [2, 4, 9], 1, 6], 1)); 
// 输出: [2, 4, 2, 4, 9, 1, 6]

在这个改进版本中，当arr[i]是[2, 4, 9]时，newarr.push(...arr[i])等同于newarr.push(2, 4, 9)，从而将所有嵌套数组的元素作为独立的参数推入newarr，实现了预期的扁平化效果。

解决方案二：利用Array.prototype.flat()方法

对于数组扁平化这一特定需求，JavaScript原生提供了Array.prototype.flat()方法，它能够以更简洁、更声明式的方式实现数组扁平化。flat()方法接受一个可选参数depth，指定要扁平化的层数，默认为1。

虽然原始问题中可能存在不使用flat()的限制，但在实际开发中，它通常是处理数组扁平化的首选方法。我们可以将自定义的flat函数调整为利用flat()：

const flatWithBuiltInFlat = function (arr, n) {
    if (n === 0) {
        return arr;
    } else if (n === 1) {
        let newarr = [];
        for (let i = 0; i < arr.length; i++) {
            // 对于每个元素，将其包装成数组（如果不是），然后扁平化，再展开推入
            // 这样可以统一处理整数和数组元素
            newarr.push(...Array.of(arr[i]).flat());             
        }
        return newarr;
    }
    // 对于 n > 1 的情况，可以进一步扩展，例如直接返回 arr.flat(n)
    // 这里仅处理 n=1 的情况以符合原函数逻辑
};

console.log(flatWithBuiltInFlat([2, 4, [2, 4, 9], 1, 6], 1)); 
// 输出: [2, 4, 2, 4, 9, 1, 6]

在这个实现中，Array.of(arr[i]).flat()是一个巧妙的用法：

• 如果arr[i]是数字（如2），Array.of(2)会创建[2]。然后[2].flat()仍然是[2]。
• 如果arr[i]是数组（如[2, 4, 9]），Array.of([2, 4, 9])会创建[[2, 4, 9]]。然后[[2, 4, 9]].flat()会扁平化为[2, 4, 9]。 通过这种方式，newarr.push(...)总是接收一个扁平化后的元素列表，无论是单个数字还是嵌套数组的元素，从而实现了统一处理。

总结与最佳实践

• Array.prototype.concat()的非原地修改特性：始终记住concat()方法返回一个新数组，如果您希望保留合并后的结果，必须将其返回值赋给一个变量。
• 展开运算符（...）：在需要将一个数组的元素“拆开”并添加到另一个数组或作为函数参数时，展开运算符是极其强大且简洁的工具。它是实现浅层扁平化的一个优秀选择。
• Array.prototype.flat()：对于任何程度的数组扁平化需求，flat()方法是现代JavaScript中最推荐的解决方案。它语义清晰，性能良好，并且可以处理任意深度的扁平化。在支持ES2019及更高版本的环境中，应优先考虑使用此方法。
• 兼容性：Array.prototype.flat()是ES2019引入的特性。如果您的目标环境不支持，则需要使用Babel等工具进行转译，或者采用基于循环和展开运算符的实现。

通过理解这些核心概念和方法，您可以更有效地处理JavaScript中的数组扁平化任务，编写出更健壮、更易读的代码。

以上就是JavaScript数组扁平化深度解析：理解concat行为与高效实现的详细内容，更多请关注php中文网其它相关文章！