了解 ES7 中的 Array.prototype.flat 和 Array.prototype.flatMap 方法-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，数组是一种非常常用的数据类型。ES6 在数组的处理上新增了一些方法，如 Array.from、Array.of、Array.find、Array.findIndex、Array.fill 等。而在 ES7 中，新增了 Array.prototype.flat 和 Array.prototype.flatMap 两个方法，本文将详细介绍这两个方法的用法和指导意义。

Array.prototype.flat

Array.prototype.flat 方法用于将嵌套的数组“压平”，即将多维数组转换为一维数组。它的语法如下：

arr.flat([depth])

其中 depth 表示要递归压平的深度，默认值为 1，即只压平一层。如果需要完全压平，则可以设置为 Infinity。下面是一些示例：

// javascriptcn.com 代码示例
let arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

let arr2 = [1, 2, [3, [4, 5]]];
arr2.flat(); // [1, 2, 3, [4, 5]]

let arr3 = [1, 2, [3, [4, 5]]];
arr3.flat(2); // [1, 2, 3, 4, 5]

let arr4 = [1, 2, [3, [4, [5, 6]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6]

需要注意的是，flat 方法会将数组中的空位删除，例如：

let arr5 = [1, 2, , 4, 5];
arr5.flat(); // [1, 2, 4, 5]

Array.prototype.flatMap

Array.prototype.flatMap 方法是 map 和 flat 两个方法的结合体。它的作用是先对数组中的每个元素执行一个函数，然后将返回的结果“压平”成一个新数组。它的语法如下：

arr.flatMap(callback)

其中 callback 是一个函数，它接收三个参数：当前元素、当前索引和原数组。下面是一些示例：

let arr1 = [1, 2, 3];
arr1.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

let arr2 = ['Hello', 'world', '!'];
arr2.flatMap(x => x.split('')); // ['H', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd', '!']

需要注意的是，flatMap 方法只能“压平”一层，如果想要完全压平，则需要结合使用 flatMap 和 flat 方法，例如：

let arr3 = [[1, 2], [3, 4], [5, 6]];
arr3.flatMap(x => x).flat(); // [1, 2, 3, 4, 5, 6]

指导意义

Array.prototype.flat 和 Array.prototype.flatMap 方法的出现，使得 JavaScript 中数组的处理更加方便和灵活。在实际开发中，我们可以使用这两个方法来简化代码，提高开发效率。需要注意的是，这两个方法是 ES7 中新增的，如果需要在低版本浏览器中使用，需要使用 polyfill 或者自己手动实现。

总结

本文介绍了 ES7 中的 Array.prototype.flat 和 Array.prototype.flatMap 两个方法的用法和指导意义。Array.prototype.flat 方法用于将嵌套的数组“压平”，Array.prototype.flatMap 方法则是 map 和 flat 两个方法的结合体。在实际开发中，我们可以使用这两个方法来简化代码，提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65706abad2f5e1655d91fc12