在 JavaScript 开发中，数组扁平化（flatten）是一项非常基础且重要的操作。扁平化可能涉及到将多维数组转化为一维数组，或者将一个数组中的嵌套数组展开成一个新的数组。在 ECMAScript 2020 中，引入了一些新的扁平化方法，本文将详细讲解它们的用法和效果，并为读者带来一些学习和指导意义。
什么是数组扁平化？
在 JavaScript 中，数组扁平化是指将多维数组合并成一维数组的操作。下面是一些扁平化前后的数组示例：
const arr1 = [1, 2, [3, 4]]; const arr2 = [1, [2, [3, 4]]]; const arr3 = [1, [2, [3, [4]]]]; flatten(arr1); // [1, 2, 3, 4] flatten(arr2); // [1, 2, 3, 4] flatten(arr3); // [1, 2, 3, 4]
数组扁平化在实际开发中非常常见，特别是在处理数据的时候。
ES2020 中的数组扁平化方法
在 ECMAScript 2020 中，有三种新的数组扁平化方法，它们分别是：
Array.prototype.flat()Array.prototype.flatMap()Array.prototype.at()
下面我们会逐一对它们进行讲解。
Array.prototype.flat()
Array.prototype.flat() 方法用于将多维数组扁平化成一维数组。这个方法接受一个可选参数，可以指定扁平化的深度。默认深度为 1。
下面是一个简单的示例：
const arr = [[1, 2], [3, 4]]; const flattened = arr.flat(); console.log(flattened); // [1, 2, 3, 4]
可以看到，在上面的代码中，arr.flat() 扁平化了 arr 数组并返回一个新的一维数组 flattened。
我们也可以指定深度参数：
const arr = [[1], 2, [3, 4]]; arr.flat(1); // [1, 2, 3, 4] arr.flat(2); // [1, 2, 3, 4]
在上面的例子中，第一个 flat 方法使用了默认的深度 1，第二个 flat 方法使用了深度 2。
需要注意的是，flat() 返回一个新的一维数组，并不会修改原数组。
Array.prototype.flatMap()
Array.prototype.flatMap() 方法其实是 map 和 flat 两个方法的结合，它将每个元素先进行映射，然后再将结果扁平化成一个新的数组。
下面是一些 examples：
const arr = [1, 2, 3]; const mapped = arr.map((x) => [x * 2]); console.log(mapped); // [[2], [4], [6]] const flattened = arr.flatMap((x) => [x * 2]); console.log(flattened); // [2, 4, 6]
在上面的代码中，flatMap() 先将每个元素 [1, 2, 3] 都进行了乘 2 的操作，得到了一个嵌套的数组 [[2], [4], [6]]，然后使用 flat() 方法将其扁平化成了一个一维数组 [2, 4, 6]。
同样的，flatMap() 方法也可以接受深度参数，用法和 flat() 方法一致。
Array.prototype.at()
Array.prototype.at() 是 ECMAScript 2020 中最后一个新增的数组方法。它允许我们基于数组索引访问数组中的元素，可以说是一个更加安全的访问方式，不会产生异常。
它不同于常用的索引访问方式，常用的索引访问方式访问不存在的索引时，将返回 undefined：
const arr = [1, 2, 3]; console.log(arr[4]); // undefined
但是，使用 Array.prototype.at() 访问不存在的索引时，将会抛出一个 RangeError：
const arr = [1, 2, 3]; console.log(arr.at(4)); // 抛出 RangeError 错误
同样的，at() 方法也可以设定负数索引。例如：
const arr = [1, 2, 3]; const lastItem = arr.at(-1); // 3
需要注意的是，如果使用了不是数字类型的索引，at() 也会抛出 TypeError 错误。
总结
ECMAScript 2020 中新增了三个数组扁平化方法：
Array.prototype.flat()用于将多维数组扁平化成一维数组。Array.prototype.flatMap()用于将数组的每个元素做映射，然后将结果扁平化成新的一维数组。Array.prototype.at()允许我们基于数组索引访问数组中的元素，避免了访问不存在索引的异常。
当然，这些方法不仅仅只是扁平化，了解它们的原理和用法对于我们在日常开发，特别是处理数据的时候会非常有用。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461ea44968c7c53b033fd0a