数组扁平化

2018-05-27

摘要：学习冴羽的博客实现数组扁平化

扁平化

数组的扁平化就是将多层嵌套的数组转化为只有一层的数组。
例如：[1,2,[3,4,[5,6]]] => [1,2,3,4,5,6]

方法

递归

var array = [1, 2, [3, 4, [5, 6]]];
function flatten(arr) {
    var result = [];
    for (var 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;
}
flatten(array) // [1,2,3,4,5,6]

reduce

function flatten(arr) {
    return arr.reduce(function(prev,next){
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}

toString

数组的 toString 方法会返回由该数组元素和逗号组成的字符串

1	array.toString() // "1,2,3,4,5,6"

如果再使用 split 将字符串按照逗号分割转为数组就完成了扁平化

function flatten(arr) {
    // 将数组转为字符串，再以逗号分割，最后将元素全部转为 Number 类型
    return arr.toString().split(',').map(function(item) {
        return + item;
    });
}

注意：toString 方法会将所有元素配合逗号拼接成字符串，也就是说将字符串分割后元素也还是字符串，因此使用时要注意元素的类型

扩展运算符…

ES6 的扩展运算符可以将一个数组转为用逗号分隔的参数序列

function flatten(arr) {
    while(arr.some(item => Array.isArray(item))){
        arr = [].concat(...arr);
    }
}
Function.apply.bind([].concat, [])

underscore

underscore 中为了方便多个 API 的调用，对扁平化进行了更多的配置

/**
 * 数组扁平化
 * @param  {Array} input   要处理的数组
 * @param  {boolean} shallow 是否只扁平一层
 * @param  {boolean} strict  是否严格处理元素，为true时将过滤非数组的元素
 * @param  {Array} output  这是为了方便递归而传递的参数
 * 源码地址：https://github.com/jashkenas/underscore/blob/master/underscore.js#L528
 */
function flatten(input, shallow, strict, output) {
    // 递归使用的时候会用到output，保证唯一输出
    // inx保证每次都是在output末尾添加新元素
    output = output || [];
    var idx = output.length;
    for (var i = 0, len = input.length; i < len; i++) {
        var value = input[i];
        // 如果是数组，就进行处理
        if (Array.isArray(value)) {
            // 如果是只扁平一层，遍历该数组，依此填入 output
            if (shallow) {
                var j = 0,
                    lenght = value.length;
                while (j < lenght){ output[idx++] = value[j++];}
            }
            // 如果是全部扁平就递归，传入已经处理的output，递归中接着处理 output
            else {
                flatten(value, shallow, strict, output);
                // 递归后的output已经改变，此时要更新idx
                idx = output.length;
            }
        }
        // 不是数组，根据strict的值判断是跳过不处理还是放入output
        else if (!strict) {
            output[idx++] = value;
        }
    }
    return output;
}