ES7 特性详解 ——Array.prototype.flatMap

在前端开发中，处理数组映射是常见的需求。ES6 中引入了 Array.prototype.map() 方法，可以方便地实现数组映射。但是，在实际的开发中，我们经常会遇到需要将映射后的数组展开成一个新的数组的情况。这时候，就需要使用 Array.prototype.flatMap() 方法了。

什么是 Array.prototype.flatMap() 方法

Array.prototype.flatMap() 方法是 ES7 中新增的方法，它结合了 Array.prototype.map() 和 Array.prototype.flat() 两个方法的功能，可以方便地实现数组映射和展开操作。

Array.prototype.flatMap() 方法接受一个参数，即映射函数。映射函数会被应用到数组的每个元素上，并返回一个新的数组。这个新的数组会被展开成一个新的一维数组，而不是像 Array.prototype.map() 方法返回的数组那样嵌套多层。

Array.prototype.flatMap() 的使用

下面是一个使用 Array.prototype.flatMap() 方法的简单示例：

const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8]

在上面的代码中，我们定义了一个数组 arr，然后使用 Array.prototype.flatMap() 方法将数组中的每个元素都映射成一个包含两个元素的新数组，最终得到了一个展开后的新数组。

处理数组映射遇到的常见错误

在使用 Array.prototype.flatMap() 方法时，我们需要注意一些常见的错误，下面是一些常见的错误及其解决方案：

1. 映射函数返回值不是数组

在使用 Array.prototype.flatMap() 方法时，映射函数的返回值必须是一个数组。如果返回的不是数组，会导致程序出错。

const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => x * 2);
console.log(result); // TypeError: x is not iterable

上面的代码中，映射函数返回的是一个数字，而不是一个数组，导致程序出错。解决这个问题的方法是将返回值封装成一个数组，例如：

const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => [x * 2]);
console.log(result); // [2, 4, 6, 8]

2. 映射函数返回的数组中包含 undefined 值

在使用 Array.prototype.flatMap() 方法时，映射函数返回的数组中不能包含 undefined 值。如果包含 undefined 值，会导致程序出错。

const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => x % 2 === 0 ? [x, undefined] : [x]);
console.log(result); // [1, 2, undefined, 3, 4, undefined]

上面的代码中，映射函数返回的数组中包含了 undefined 值，导致程序出错。解决这个问题的方法是过滤掉 undefined 值，例如：

const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => x % 2 === 0 ? [x, undefined].filter(x => x !== undefined) : [x]);
console.log(result); // [1, 2, 3, 4]

3. 映射函数返回的数组中包含 null 值

在使用 Array.prototype.flatMap() 方法时，映射函数返回的数组中可以包含 null 值。但是，如果返回的数组中包含了 null 值，会导致程序出错。

const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => x % 2 === 0 ? [x, null] : [x]);
console.log(result); // [1, 2, null, 3, 4]

上面的代码中，映射函数返回的数组中包含了 null 值，导致程序出错。解决这个问题的方法是过滤掉 null 值，例如：

const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => x % 2 === 0 ? [x, null].filter(x => x !== null) : [x]);
console.log(result); // [1, 2, 3, 4]

总结

Array.prototype.flatMap() 方法是 ES7 中新增的方法，它结合了 Array.prototype.map() 和 Array.prototype.flat() 两个方法的功能，可以方便地实现数组映射和展开操作。在使用 Array.prototype.flatMap() 方法时，我们需要注意一些常见的错误，如映射函数返回值不是数组、映射函数返回的数组中包含 undefined 值等，避免这些错误可以让我们更加高效地使用 Array.prototype.flatMap() 方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bc37d2add4f0e0ff4ea0b6