什么是扁平化

数组的扁平化，就是将一个嵌套多层的数组（嵌套可以是任意层）转化为只有一层。

例子，假设有个 flatten 函数。

const arr = [1,[2,[3,[4]]]];
console.log(flatten(arr)); // [1,2,3,4]

扁平化的方法

递归

遍历数组元素，如果还是数组就递归调用自身。

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    let result = [];
    for (let i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    return result;
}
console.log(flatten(arr)); // [1,2,3,4]

toString

利用 toString 的以下特性

[1,2,[3,4,[5]]].toString(); // "1,2,3,4,5"

很容易想到下面方法

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.toString().split(",").map((item) => {
        return +item;
    });
}
console.log(flatten(arr));

但这个方法的数组元素只能是数字，如果出现字符串元素就会出现 bug，比如：[1, [‘2’, 3, [‘4’]]]。

reduce

如果是对数组处理，并最终返回一个值。很容易想到 reduce 函数。

let arr = [1, 2, 3, 4, 5, 6];
function flatten(arr) {
    return arr.reduce((prev, next) => {
        return prev.concat(Array.isArray(next) ? flatten(next) : next);
    }, []);
}
console.log(flatten(arr));

拓展运算符 …

拓展运算符有个特性，可以扁平化一层。

const arr = [1, [2, [3, 4]]];
console.log([].concat(...arr)); // [1, 2, [3, 4]]

顺着这个思路很容易想到下面的方法。

let arr = [1, [2, [3, [4, [5, [6]]]]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
        console.log(arr);
    }
    return arr;
}
console.log(flatten(arr)); // [1, 2, 3, 4, 5, 6]

javascript 实现的。

其实 javascript 自己已经实现了一个 flat。

underscore 的实现

代码

/**
 * 数组扁平化
 * @param  {Array} input   要处理的数组
 * @param  {boolean} shallow 是否只扁平一层
 * @param  {boolean} strict  是否严格处理元素，下面有解释
 * @param  {Array} output  这是为了方便递归而传递的参数
 */
function flatten(input, shallow, strict, output) {
    // 递归使用的时候会用到output
    output = output || [];
    let idx = output.length;
    for (let i = 0, len = input.length; i < len; i++) {
        let value = input[i];
        // 如果是数组，就进行处理
        if (Array.isArray(value)) {
            // 如果是只扁平一层，遍历该数组，依此填入 output
            if (shallow) {
                let j = 0, length = value.length;
                while (j < length) output[idx++] = value[j++];
            }
            // 如果是全部扁平就递归，传入已经处理的 output，递归中接着处理 output
            else {
                // 因为 output 是数组是引用类型，所以不用写成下面这句话。
                // output = flatten(value, shallow, strict, output);
                flatten(value, shallow, strict, output);
                // 递归处理完的 output 长度需要赋值给 idx
                idx = output.length;
            }
        }
        // 不是数组，根据 strict 的值判断是跳过不处理还是放入 output
        else if (!strict) {
            output[idx++] = value;
        }
    }
    return output;
}

我们来看一下各个参数组合会产生情况

那这个有什么用了？我们来看一下这个 flatten 函数在 underscore 中的哪些地方有用到。

_.flatten

正常扁平，不需要去掉非数组元素。

_.flatten = function(array, shallow) {
    return flatten(array, shallow, false);
};

_.union

这个函数接收多个数组，返回传入数组的并集。

如何传入的参数不是数组，就跳过。

例子

_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]); // [1, 2, 3, 101, 10]

为了实现这个效果，需要将传入的数组扁平化，然后去重，因为只能传数组，所以直接设置strict 为 true。

function unique(array) {
   return Array.from(new Set(array));
};
_.union = function() {
    return unique(flatten(arguments, true, true));
};

_.difference

这个函数取出来自 array 数组，但并不存在与多个 other 数组的元素。也会排序非数组元素。

_.difference(array, *others)

例子

_.difference([1, 2, 3, 4, 5], [5, 2, 10], [4], 3);  // [1, 3]

function difference(array, ...rest) {
    rest = flatten(rest, true, true);
    return array.filter(function(item){
        return rest.indexOf(item) === -1;
    })
};

参考：

[1] JavaScript专题之数组扁平化
[2] reduce
[3] concat
[4] toString
[5] flat
[6] 拓展运算符 …