本文旨在深入探讨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() 方法。
立即学习“Java免费学习笔记（深入）”；
扩展运算符允许一个可迭代对象（如数组）在期望有多个参数的地方展开。当与 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 和扩展运算符可以提供更大的灵活性。
