Javascript数组常用方法重写之flat

概要

本文主要目的是探讨在ES5中，数组原型链上flat方法是如何实现的。文章提供了基于reduce方法和基于map方法的两种实现思路。

map和reduce方法的底层实现，请参看我的博文Javascript数组常用方法重写之map，reduce，some，every

代码实现

基本功能：将多维数组转换为1维数组。

基于ES5 和 reduce方法的实现

function flaten(temp){
    arr = this;
    temp = temp || [];
    return arr.reduce(function(total, next){  
        Object.prototype.toString.call(next) === "[object Array]" ?
            next.flaten(total) : total.push(next);
        return total;
    },temp);
}

1. this是调用该方法数组对象
2. temp是合并后的数组，起始是空数组
3. 使用reduce方法遍历整个数组
4. 如果数组元素还是一个数组，则递归调用flaten方法，参数是当前已经合并的数组
5. 如果数组元素不是一个数组，将其放入最后合并后的数组。

代码验证：

var arr = [[[1,2,3], [[4,5,[6]]], 7],8,9,[[10]]];
console.log(arr.flaten());

执行结果：

基于ES6 和 reduce方法的实现

function flatenES6(){
    var arr = this;
    return arr.reduce(function(total, next){
        Array.isArray(next) ?
         total.push(...next.flatenES6()) : total.push(next);
         return total;
    },[]);
}

1. this是调用该方法数组对象
2. 使用reduce方法遍历整个数组
   1. 如果数组元素还是一个数组，使用ES6的扩展操作符，将递归调用后的结果展开成xxx,xxx,xxx… 的形式。使其直接作为push方法的参数。
   2. 如果数组元素不是一个数组，将其放入最后合并后的数组。
3. 返回reduce的执行结果

代码验证：

var arr = [[[1,2,3], [[4,5,[6]]], 7],8,9,[[10]]];
console.log(arr.flatenES6());

基于ES6 和 map方法的实现

Array.prototype.flatenES6Map = flatenES6Map;

function flatenES6Map(){
    arr = this;
    const items = [];
    arr.map(item => Array.isArray(item) ? 
        items.push(...item.flatenES6Map()) : items.push(item));
    return items;
}

1. this是调用该方法数组对象
2. 最后返回值的初始值是一个空数组
3. 使用reduce方法遍历整个数组
   1. 如果数组元素还是一个数组，使用ES6的扩展操作符，将递归调用后的结果展开成xxx,xxx,xxx… 的形式。使其直接作为push方法的参数。
   2. 如果数组元素不是一个数组，将其放入最后合并后的数组。
4. 返回合并后的执行结果

代码验证：

var arr = [[[1,2,3], [[4,5,[6]]], 7],8,9,[[10]]];
console.log(arr.flatenES6Map());

执行结果：