使用flat()和flatMap()在VanillaJavaScript中展平数组

来自菜鸟教程
跳转至:导航、​搜索

LodashUnderscore.js 这样的库已经为我们提供了一些实用工具来帮助我们扁平化数组。 由于 ECMAScript 标准的不断发展,我们现在将获得直接在 vanilla JavaScript 中执行此操作的方法,而无需外部实用程序函数。

如果您最近一直关注互联网,您可能已经看到,这些扁平化数组的新方法引起了不小的轰动。 现在在 #Smooshgate 上为人所知,它的要点是 Array.prototype.flatten() 正在被 MooTools 进行猴子补丁,某些网站仍在使用它,所以在某些时候出现了一个建议 -最多将方法命名为 smoosh 而不是 flatten 作为一个笑话,以避免破坏一些仍然依赖 MooTools 的网站。 很多人都认真对待了 smoosh 建议,并且为此丢失了相当多的按键。

现在这个小争议已经尘埃落定,最终的决定是使用 flatflatMap 作为两个方法名称来帮助在 JavaScript 中扁平化数组。

现在让我们来看看它们。

Array.prototype.flat()

顾名思义,Array 原型上可用的 flat() 方法返回一个新数组,它是调用它的数组的扁平化版本。 如果没有传入参数,则假定深度为 1。 否则,如果一个数字作为第一个参数传入,它将用作展平数组的最大深度。

这是一个简单的例子:

const animals = [['🐕', '🐶'], ['😺', '🐈']];

const flatAnimals = animals.flat();
// same as: const flatAnimals = animals.flat(1);

console.log(flatAnimals);

// ['🐕', '🐶', '😺', '🐈']

并注意当数组的总深度大于 flat 方法的最大深度时会发生什么:

const animals = [['🐕', '🐶'], ['😺', '🐈', ['😿',['🦁'], '😻']]];

const flatAnimals = animals.flat(2);

console.log(flatAnimals);
// ['🐕', '🐶', '😺', '🐈', '😿',['🦁'], '😻']

如果要展平任意深度的数组,可以使用 Infinity

const animals = [['🐕', '🐶'], ['😺', '🐈', ['😿',['🦁'], '😻']]];

const flatAnimals = animals.flat(Infinity);

console.log(flatAnimals);
// ['🐕', '🐶', '😺', '🐈', '😿', '🦁', '😻']

Array.prototype.flatMap()

Array 原型上可用的 flatMap() 方法与使用 map() 方法后跟默认深度的 flat() 方法具有相同的效果1。 换句话说,flatMap() 将每个值映射到一个新值,然后将生成的数组展平到最大深度 1。

这是一个例子:

const animals = ['🐕', '🐈', '🐑', '🐮'];
const noises = ['woof', 'meow', 'baa', 'mooo'];

const mappedOnly = animals.map((animal, index) => [animal, noises[index]]);
const mappedAndFlatten = animals.flatMap((animal, index) => [animal, noises[index]]);

console.log(mappedOnly);
// [['🐕', 'woof'], ['🐈', 'meow'], ['🐑', 'baa'], ['🐮', 'mooo']

console.log(mappedAndFlatten);
// ['🐕', 'woof', '🐈', 'meow', '🐑', 'baa', '🐮', 'mooo']

传入 flatMap() 的回调函数需要与可以传入传统 map() 方法的参数相同的参数,第一个是当前值,第二个是数组中当前值的索引,第三个是被映射的完整数组。

浏览器支持

支持已经相当不错了,最新版本的浏览器支持这两种方法。 例如,Chrome 69+、Firefox 62+ 和 Safari 12+ 支持这些方法。 在撰写本文时,目前不支持任何版本的 Internet Explorer 或 Edge。

如果你想现在开始使用它并支持所有浏览器,你总是可以使用官方的 polyfill/shim 来支持 flatflatMap