单手撸之ES2019-Array.flatMap

老规矩，单手撸之前，先看看官方的语法：

const new_array = arr.flatMap((currentValue, index, array) => {
    // 返回新数组的元素
})

其中，

• currentValue是数组处理的当前元素（必填）
• index 正在处理元素的索引（可选）
• array 正在被处理的数组（可选）

那我们看一看它的用法：

const array = [1, 2, 3];
const new_array = array.flatMap(ele => [ele * 2]) // [2, 4, 6]
const new_array2 = array.flatMap(ele => [[ele * 2]]) // [[2], [4], [6]]

乍一看，貌似跟Array.map有点像，仔细一看，它会将当前的元素展开一次并返回的，接下来我们分析一下它的特性：

• 参数是一个函数，并且函数有三个参数分别为：currentValue，index，array;
• 操作完当前元素后返回结果如果为数组将其展开
• 原始数组未发生变化

在看一看flatMap与map的区别

let arr = ["今天天气不错", "", "早上好"]

arr.map(s => s.split(""))
// [["今", "天", "天", "气", "不", "错"],[],["早", "上", "好"]]

arr.flatMap(s => s.split(''));
// ["今", "天", "天", "气", "不", "错", "早", "上", "好"]

看到这里，我们就单手撸一波，还在Array.prototype上进行数组方法的扩展，下面是完整代码：

Array.prototype.myFlatMap = function (fn) {
    if (typeof fn !== 'function') return;
    const arr = this.slice();
    const ret = [];
    for (let i = 0; i < arr.length; i++) {
        ret.push(fn(arr[i], i, arr))
    }
    return ret.flat();
}

是不是很简单，这里用到了数组的flat方法，想了解flat的实现方法请看单手撸之ES2019-Array.flat