zoukankan      html  css  js  c++  java
  • -----js实现数组扁平化-----

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

    flatten用法:
    概念:可以理解为将嵌套数组的维数减少,flattened(平坦). 如果 isDeep 值为 true 时,嵌套数组将递归为一维数组, 否则只减少嵌套数组一个级别的维数.
    代码如下:
    参数: array (Array): 需要flattened(减少维数)的嵌套数组
    [isDeep] (boolean): 是否深递归
    返回值: (Array): 返回处理后的数组

    // using `isDeep`
    _.flatten([1, [2, 3, [4]]], true);
    // => [1, 2, 3, 4]
    1
    2
    3
    flattenDeep用法:
    概念:递归地平坦一个嵌套的数组.相当于_.flatten(array, true)
    **参数:**array (Array): 需要
    返回值:(Array): 返回处理后的数组.

    flattenDeep: 递归地平坦一个嵌套的数组.相当于_.flatten(array, true).

    _.flattenDeep([1, [2, 3, [4]]]);
    // => [1, 2, 3, 4]
    1
    2
    3
    4
    那么如果我们自己写该如何实现呢?下面列举几种实现方式:

    1. 循环数组+递归

    实现思路:循环数组,如果数据中还有数组的话,递归调用flatten扁平函数(利用for循环扁平),用concat连接,最终返回result;

    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(arr) // [1,2,3,4]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    2. 利用apply

    可以使用apply的原因如下:

    var arr = [1, [2, 3, [4]]];
    [].concat.apply([],arr);
    // [1,2,3,[4]]
    1
    2
    3
    实现思路:利用arr.some判断当数组中还有数组的话,递归调用flatten扁平函数(利用apply扁平), 用concat连接,最终返回arr;

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

    flatten(arr) // [1,2,3,4]
    1
    2
    3
    4
    5
    6
    7
    8
    3. reduce方法

    reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
    能使用reduce原因如下:

    var flattened = arr.reduce(function(prev, cur){
    return prev.concat(cur)
    },[])

    console.log(flattened);
    // [1,2,3,[4]]
    1
    2
    3
    4
    5
    6
    实现思路:使用reduce, 当数组中还有数组的话,递归调用flatten扁平函数(利用reduce扁平), 用concat连接,最终返回arr.reduce的返回值;

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

    flatten(arr) // [1,2,3,4]
    1
    2
    3
    4
    5
    6
    7
    4. es6 展开运算符

    可以使用es6 展开运算符的原因如下:

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

    console.log(...arr);
    // 1,[2,3,[4]]
    1
    2
    3
    4
    实现思路:利用arr.some判断当数组中还有数组的话,递归调用flatten扁平函数(利用es6展开运算符扁平), 用concat连接,最终返回arr;

    function flatten(arr){
    while(arr.some(item => Array.isArray(item))){
    arr = [].concat(...arr);
    }
    return arr;
    }

    flatten(arr) // [1,2,3,4]
    1
    2
    3
    4
    5
    6
    7
    8
    5. toString方法(数组元素为数字)
    如果数组的元素是数字,那么我们可以考虑toString()方法,其他情况不适用。原因如下:

    [1, [2, 3, [4]]].toString()
    // "1,2,3,4"
    1
    2
    实现思路:数组适用toString()方法后变成以逗号分割的字符串,然后map遍历数组把每一项再变回整数并返回map后的结果。

    function flatten(arr){
    return arr.toString().split(',').map(function(item){
    return parseInt(item);
    })
    }

    flatten(arr) // [1,2,3,4]

    原文链接:https://blog.csdn.net/original_heart/article/details/78906911

  • 相关阅读:
    ThinkPHP安全规范指引
    正则表达式:不能包含某些特殊字符串
    头晕是因为虚 ( ̄^ ̄゜)
    vs code中文扩展包
    table-cell width:1% 深入理解
    C#使用NPOI操作Excel
    C#利用LumenWorks.Framework.IO.Csv读取CSV文件
    发送邮件代码
    .net 集合详解
    EF Code First:数据更新最佳实践
  • 原文地址:https://www.cnblogs.com/zjy850984598/p/10463694.html
Copyright © 2011-2022 走看看