JavaScript数组扁平化技巧与flat用法

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JavaScript数组扁平化详解与flat方法使用》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

本文旨在深入探讨JavaScript中数组扁平化的常见误区及正确实现方法。我们将剖析`Array.prototype.concat()`不修改原数组的特性，并介绍两种有效的扁平化策略：利用扩展运算符配合`push()`方法，以及更现代、简洁的`Array.prototype.flat()`方法，帮助开发者高效处理嵌套数组。

1. 理解 Array.prototype.concat() 的核心机制

在JavaScript中，Array.prototype.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
        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]

在上述代码中，当遇到 Array.isArray(arr[i]) 为真时，执行 newarr.concat(arr[i])。尽管 concat() 操作确实生成了一个包含 newarr 现有元素和 arr[i] 中所有元素的新数组，但这个新数组并没有被赋回给 newarr 变量。因此，newarr 保持不变，导致嵌套数组的元素未能被添加到结果中。

2. 使用扩展运算符 (...) 解决扁平化问题

要正确地将一个数组的元素添加到另一个数组中，同时避免创建不必要的中间数组，可以使用扩展运算符 (...) 配合 Array.prototype.push() 方法。

扩展运算符允许一个可迭代对象（如数组）在期望有多个参数的地方展开。当与 push() 结合使用时，它能将一个数组的所有元素作为独立的参数推入另一个数组。

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])) {
        // 正确用法：使用扩展运算符将内部数组的元素逐个推入 newarr
        newarr.push(...arr[i]); 
      } 
    }
    return newarr;
  }
};

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

通过 newarr.push(...arr[i])，arr[i]（例如 [2, 4, 9]）中的所有元素 2, 4, 9 会被作为独立的参数传递给 push 方法，从而有效地将它们添加到 newarr 中。

3. Array.prototype.flat()：更简洁的现代方法

ES2019 引入了 Array.prototype.flat() 方法，它提供了一种更简洁、更声明式的方式来扁平化数组。此方法会创建一个新数组，其中所有子数组的元素都递归地连接到该新数组中，直到指定深度。

flat() 方法接受一个可选参数 depth，表示要扁平化的层数。默认值为 1，即只扁平化一层。

const flat = function (arr, n) {
    if (n === 0) {
        return arr;
    } else if (n === 1) {
        let newarr = [];
        for (let i = 0; i < arr.length; i++) {
            // 对于非数组元素，直接推入；对于数组元素，先用 Array.of 包装再 flat
            // 或者更直接地，如果 arr[i] 是数组，就 flat 展开，否则直接推入
            if (Array.isArray(arr[i])) {
                newarr.push(...arr[i].flat(n)); // 使用 flat(n) 扁平化到指定深度
            } else {
                newarr.push(arr[i]);
            }
        }
        return newarr;
    }
    // 如果 n > 1，可以递归调用 flat 方法或者直接使用 arr.flat(n)
    // 对于本教程的 n=1 场景，上述逻辑已足够
};

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

对于仅扁平化一层的场景，Array.prototype.flat() 的使用可以进一步简化函数体。

一个更优雅的实现，直接利用 flat(1)：

const flatSingleLevel = function(arr) {
  return arr.flat(1);
};

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

如果我们需要在循环中处理每个元素，并确保无论元素是单个值还是数组，都能正确添加到结果数组，可以结合 Array.of() 和 flat()：

const flatWithFlatMethod = function (arr, n) {
    if (n === 0) {
        return arr;
    } else if (n === 1) {
        let newarr = [];
        for (let i = 0; i < arr.length; i++) {
            // 将每个元素包装成数组，然后扁平化。
            // 如果 arr[i] 本身是数组，Array.of(arr[i]) 会得到 [[...]]，再 flat(1) 得到 [...]
            // 如果 arr[i] 是非数组，Array.of(arr[i]) 会得到 [value]，再 flat(1) 得到 [value]
            newarr.push(...Array.of(arr[i]).flat(1));             
        }
        return newarr;
    }
    // 对于 n > 1 的情况，直接使用 arr.flat(n) 是最简洁的
    // return arr.flat(n);
};

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

4. 总结与最佳实践

• Array.prototype.concat() 的陷阱： 记住 concat() 方法返回一个新数组，它不会修改原数组。如果你想将 concat() 的结果应用到现有数组变量，必须显式地进行赋值操作，例如 newarr = newarr.concat(arr[i])。然而，这种方式在循环中可能效率不高，因为它会不断创建新的数组对象。
• 扩展运算符 (...) 与 push()： 当需要将一个数组的所有元素添加到另一个数组的末尾时，newarr.push(...otherArray) 是一个高效且直观的解决方案。它避免了创建中间数组，直接修改了 newarr。
• Array.prototype.flat() 的优势： 对于数组扁平化任务，flat() 方法是现代 JavaScript 中最推荐的选择。它简洁、易读，并且能够处理多层嵌套，通过 depth 参数可以精确控制扁平化的深度。在支持 ES2019 及更高版本的环境中，应优先考虑使用此方法。
• 选择合适的工具： 根据你的具体需求和目标运行环境，选择最合适的数组操作方法。对于简单的单层扁平化，flat(1) 是最佳实践。对于更复杂的自定义扁平化逻辑，结合 push 和扩展运算符可以提供更大的灵活性。

今天关于《JavaScript数组扁平化技巧与flat用法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！