js扁平化


JS扁平化分类:
1.对象扁平化(深度很深的对象,经过扁平化编程深度为 1 的对象)、
2.数组扁平化(降维过程,多维数组经过扁平化变成一维数组)。

首先让我们思考一个这样的题目;假如有一个数组 var arr = [1, [2, 3, [4]]] ,我们怎么能把arr变成[1, 2, 3, 4]呢?即让多维数组降维,转换为只有一层的数组;如果用过lodash的话,我们知道 flatten 和 flattenDeep 方法都可以实现.

数组的扁平化,是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。

1.正则

const flatten = arr => JSON.parse(`[${JSON.stringify(arr).replace(/\[|]/g,'')}]`);

正则表达式-菜鸟教程
ps:

  • ``是模板字符串,ES2015新增的符号
  • ${var}是变量的占位符,可以代替传统引号与+号的拼接
  • 例如: var a = 1; console.log('一共有'+a+'个鸡蛋!')
    那么现在你只要console.log(一共有${a}个鸡蛋!)
    一般的用法:image

2.递归

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

(递归)最简单直接的方法:

 function flatten(arr) {
    // 判断参数是否是数组,检测数组元素是否是整数或者数组
    var result = [];
    if (!Array.isArray(arr)) {
        // 不是数组, 判断是否是整数
        if (arr % 1 == 0) {
            result.push(arr);
        } else {
            throw Error('The parameter contains NaN or contains not Integer!');
        }
    } else {
        // 是数组,遍历
        for (let i = 0; i < arr.length; i++) {
             result = result.concat(flatten(arr[i]));
        }

    }
    return result;
 }

3.循环

递归确实存在性能消耗的问题,每次都要重新创建函数,如果不用递归是不是也可以实现呢?
扩展运算符,可以展开数组,每次扒开一层,通过循环可以实现数组扁平化。

//利用扩展运算符
function flatten(arr) {
    var arr;
    while (arr.some(v => Array.isArray(v))) {
        arr = [].concat(...arr);
    }
    return arr;
}

4.flat、reduce、toString、[].concat(…arr)、generator、字符串过滤、undercore or lodash库

flat:

flat(depth) 方法会递归到指定深度将所有子数组连接,并返回一个新数组, depth指定嵌套数组中的结构深度,默认值为1,不管多少层则可以用Infinity关键字作为参数。

[1, 2, [3]].flat(1) // [1, 2, 3]

[1, 2, [3, [4]]].flat(2) // [1, 2, 3, 4]

[1, 2, [3, [4, [5]]]].flat(Infinity) // [1, 2, 3, 4, 5]

flat()有兼容性问题, 不建议使用.

reduce:

function flatten(arr) {
  return arr.reduce((a, b) => {
    // return Array.isArray(b) ? a.concat(flatten(b)) : a.concat(b);
    return a.concat(Array.isArray(b) ? flatten(b) : b);
  }, []);
};

// es6
const flatten = arr =>
  arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]

toString:

只适于数组的元素都是数字

function flatten(arr) {
  return arr.toString().split(",").map(item => +item);
};

flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]

[].concat(…arr):

function flatten(arr) {
  return !Array.isArray(arr) ? arr : [].concat.apply([], arr.map(flatten));
}

flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]

generator:

function* flatten(arr) {
  if (!Array.isArray(arr)) yield arr;
  else for (let el of arr) yield* flatten(el);
}

let flattened = [...flatten([1,[2,[3,[4]]]])];  // [1, 2, 3, 4]

字符串过滤:

将输入数组转换为字符串并删除所有括号([])并将输出解析为数组

const flatten = arr => JSON.parse(`[${JSON.stringify(arr).replace(/\[|]/g,'')}]`);

undercore or lodash 库:

使用undercore库或者lodash的中_.flatten函数,具体用法查阅API文档

_.flatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];

参考:https://blog.csdn.net/u014465934/article/details/89020911

posted @ 2022-04-26 21:03  黑蛋的博客  阅读(595)  评论(0编辑  收藏  举报