利用flat()和flatMap()扁平化数组

[yuxino]

在ES6之前,Lodash和Underscore.js实现了flat帮助我们扁平化数组。但是如今我们可以直接在原生js里使用flat()和flatMap()。

在命名这函数之前也有一段小插曲。到底是叫做flat还是smoosh呢。为此社区争吵过一段时间。但是最后还是选择了flat。

不多bb 我们开始看看这两个函数怎么用吧。

Array.prototype.flat()

flat()会返回一个全新的扁平化后的数组。假设没有传入参数, 默认会认为是深度1。如果将数字作为第一个参数传入，则将其用作展平数组的最大深度。

下面是一个简单的例子。

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

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

console.log(flatAnimals);

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

我们来看看传入2的时候会发生什么

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

const flatAnimals = animals.flat(2);

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

我们发现我们以2的深度为基准进行扁平化。如果我们传入一个非常大的数字，比如Infinity。那么这个数组会全部被扁平化。

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

const flatAnimals = animals.flat(Infinity);

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

Array.prototype.flatMap()

flatMap()总是返回扁平化深度为1的数组。它和flat的区别就是参数传入的是一个function。会依次遍历每个元素。

举个例子

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+都支持, 但是目前的IE和Edge都不支持。如果您想立即开始使用它并支持所有浏览器，您可以随时使用官方polyfill / shim进行flat和flatMap。

[Qzhor]

哈哈，你好可爱

[yuxino]

@Qzhor 大佬好