经典面试题：数组扁平化

扁平化

js当中涉及到扁平化这个概念的就是数组扁平化，第一次接触到这个知识点的时候是在秋招的时候参加快手的面试， 当时想到的唯一办法就是递归解决，如今再重新看这个问题又想到很多其他的解决方案，那么今天就正式介绍一下什么是数组扁平化。

数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。举个例子，假设有个名为 flatten 的函数可以做到数组扁平化， 效果就会如下：

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

接下来我们来编写自己的flattern函数了。

递归

这也是我当时面试想到最简单的解决方案，思路很简单，通过遍历最外层数组的每一个元素，看看是否还是数组，如果是的话，继续递归执行，不是的话，放到最后的结果数组当中，代码如下:

 let arr = [1, [2, [3, 4]]];

 function flattern(arr) {
        let result = [];
        for(let i = 0; i < arr.length; i++) {
            if(Array.isArray(arr[i])) {
                flattern(arr[i])
            } else {
                result.push(arr[i])
            }
        }
        return result;
    }
console.log(flattern(arr));

toString

toString() 方法返回一个表示该对象的字符串。 ---MDN

这是mdn官方文档对这个方法的解释，讲到这里就不得不提到拆箱操作，在 JavaScript 标准中，规定了 ToPrimitive 函数，它是对象类型到基本类型的转换(即， 拆箱转换)。

对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换，把对象变成基本类型，再从基本类型转换为对应的 String 或者 Number。

拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在，或者没有返回基本类型，则会产生类型错误 TypeError。

这里嵌套数组调用这个方法之后，直接是扁平化后的字符串，然后在调用split方法转换成数组即可，代码如下：

let arr = [1, [2, [3, 4]]];

function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item //+可以快速获得Number类型
    })
}

console.log(flatten(arr))

Tips:我们也可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为thisArg。代码如下：

let toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

reduce

提到数组的方法，就会联想到非常常用的2个高阶函数map和reduce，这里的扁平化操作我们也可以用reduce来实现，代码如下：

let arr = [1, [2, [3, 4]]];

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

console.log(flatten(arr))

...

ES6 增加了扩展运算符，用于取出参数对象的所有可遍历属性，拷贝到当前对象之中，所以也可以递归扁平化数组，代码如下：

let arr = [1, [2, [3, 4]]];

function flatten(arr) {

    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }  //ES6新方法

    return arr;
}

console.log(flatten(arr))

undercore

那么如何写一个抽象的扁平函数，来方便我们的开发呢，所有又到了我们抄袭 underscore 的时候了~ 在这里直接给出源码和注释，但是要注意，这里的 flatten 函数并不是最终的 _.flatten，为了方便多个 API 进行调用，这里对扁平进行了更多的配置，代码如下：

/**
 * 数组扁平化
 * @param  {Array} input   要处理的数组
 * @param  {boolean} shallow 是否只扁平一层
 * @param  {boolean} strict  是否严格处理元素，下面有解释
 * @param  {Array} output  这是为了方便递归而传递的参数
 * 源码地址：https://github.com/jashkenas/underscore/blob/master/underscore.js#L528
 */
function flatten(input, shallow, strict, output) {

    // 递归使用的时候会用到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, len = value.length;
                while (j < len) output[idx++] = value[j++];
            }
            // 如果是全部扁平就递归，传入已经处理的 output，递归中接着处理 output
            else {
                flatten(value, shallow, strict, output);
                idx = output.length;
            }
        }
        // 不是数组，根据 strict 的值判断是跳过不处理还是放入 output
        else if (!strict){
            output[idx++] = value;
        }
    }

    return output;

}

 

 如果觉得本文对你有所帮助，不如点个在看再走。

原文https://mp.weixin.qq.com/s/u67PJpudQu2PpzTROOMfIQ