zoukankan      html  css  js  c++  java
  • js 标准二维数组变一维数组的方法

    问题:[[0, 1], [2, 3], [4, 5]] -> [0, 1, 2, 3, 4, 5]?

    方法一

    利用es5arr.reduce(callback[, initialValue])实现

    var arr1 = [[0, 1], [2, 3], [4, 5]];
    var arr2 = arr1.reduce(function (a, b) { return a.concat(b)} );
    // arr2 [0, 1, 2, 3, 4, 5]
    

    方法二

    利用es6

    var arr1 = [[0, 1], [2, 3], [4, 5]];
    function flatten(arr) { return [].concat( ...arr.map(x => Array.isArray(x) ? flatten(x) : x) ) }
    var arr2 = flatten(arr1); // arr2 [0, 1, 2, 3, 4, 5]
    
    优点: 多维数组也可以
    比如:var arr = [[1,2],3,[[[4], 5]]]
    

    方法三

    利用apply实现

    var arr1 = [[0, 1], [2, 3], [4, 5]];
    var arr2 = [].concat.apply([], arr1);
    // arr2 [0, 1, 2, 3, 4, 5]
    

    方法四

    通过将数组转变成字符串,利用str.split(',')实现。缺点是数组元素都变字符串了

    var arr1 = [[0, 1], [2, 3], [4, 5]];
    
    var arr2 = (arr1 + '').split(',');
    
    var arr2 = arr.toString().split(',');
    
    var arr2 = arr.join().split(',');
    
    // arr2 ["0", "1", "2", "3", "4", "5"]
    

    方法五(补充)

    利用 ES 的最新语法,Array.prototype.flat()。缺点是,有兼容性问题。优点是非常简单。

    mdn 上是这么描述的:flat() 方法会递归到指定深度将所有子数组连接,并返回一个新数组。

    语法:var newArray = arr.flat(depth),参数说明:depth,可选,指定嵌套数组中的结构深度,默认值为1。

    举例:

    var arr1 = [1, 2, [3, 4]];
    arr1.flat();  // [1, 2, 3, 4]
    
    var arr2 = [1, 2, [3, 4, [5, 6]]];
    arr2.flat(); // [1, 2, 3, 4, [5, 6]]
    
    var arr3 = [1, 2, [3, 4, [5, 6]]];
    arr3.flat(2); // [1, 2, 3, 4, 5, 6]
    
    //Infinity展开所有嵌套数组
    arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
    
    var arr4 = [1, 2, , 4, 5];
    arr4.flat(); // [1, 2, 4, 5]
    

    特殊说明:flat()方法会移除数组中的空项。但undefined、null仍会保留。

    var arr = [1, 2, undefined , 4, 5, null];
    arr.flat(); // [1, 2, undefined , 4, 5, null]
    

    如有问题或建议,请多多赐教!

  • 相关阅读:
    Premiere&After Effects的实时预览插件开发
    Mac OS平台下应用程序安装包制作工具Packages的使用介绍(补充)
    kattle 发送post请求
    mybatis 动态sql表达式相关应用
    Echarts 之三 —— 地市联动数据统计二
    Echarts 之二——地市联动数据统计
    java 版本EChart使用
    dragsort html拖拽排序
    html iframe 元素之间的调用
    ORACLE lag()与lead() 函数
  • 原文地址:https://www.cnblogs.com/EnSnail/p/9762764.html
Copyright © 2011-2022 走看看