数组扁平化flat方法的多种实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了数组扁平化flat方法的多种实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

flat()

let arr = [
    [1],
    [2, 3],
    [4, 5, 6, [7, 8, [9, 10, [11]]]],
    12
];

// 参数指要提取嵌套数组的结构深度，默认值为 1。
// Infinity 指递归嵌套的所有层级。
let flattedArr = arr.flat(Infinity);
console.log(flattedArr);

执行效果：

数组扁平化flat方法的多种实现,javascript,javascript,开发语言,ecmascript

toString()

注意：map()处理空值的问题

console.log(arr.toString().split(',').map(item => Number(item)));

执行效果：

数组扁平化flat方法的多种实现,javascript,javascript,开发语言,ecmascript

JSON.stringify()

注意：map()处理空值的问题

console.log(JSON.stringify(arr).replace(/\[|\]/g, '').split(',').map(item => Number(item)));

执行效果：

数组扁平化flat方法的多种实现,javascript,javascript,开发语言,ecmascript

while() {}

while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
}
console.log(arr);

执行效果：

数组扁平化flat方法的多种实现,javascript,javascript,开发语言,ecmascript

reduce()

对于一个数组，使用 reduce() 方法遍历其中的每个元素，如果元素是一个数组，则递归调用扁平化函数；否则，将元素添加到结果数组中。

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

console.log(flatten(arr));

执行效果：

数组扁平化flat方法的多种实现,javascript,javascript,开发语言,ecmascript

prototype

Array.prototype.myFlat = function () {
    let result = [];
    let _this = this;
    function _flat(arr) {
        for (let i = 0; i < arr.length; i++) {
            let item = arr[i];
            if (Array.isArray(item)) {
                _flat(item);
            } else {
                result.push(item);
            }
        }
    }
    _flat(_this);
    return result;
}
console.log(arr.myFlat());