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

    将数组中的数据扁平化

    一、常规方法——递归

    function flatten0(arr){
            var result=[];
    
            for(var i=0;i<arr.length;i++){
                if(Array.isArray(arr[i])){
                    result=result.concat(flatten0(arr[i]));
                }
                else{
                    result.push(arr[i])
                }
            }
            return result;
        }

    二、toString方法

    将数组转换成字符串格式,然后按照","分隔。

    console.log(arr.toString().split(",").map(item=>+item))

    但,如你所见,一旦数组中出现函数等元素,这种方法就不适用了。

    这里还有一个小点比较有趣

    关于+运算符:

            一元正号运算符位于其操作数前面,计算其操作数的数值,如果操作数不是一个数值,会尝试将其转换成一个数值。 尽管一元负号也能转换非数值类型,但是一元正号是转换其他对象到数值的最快方法,也是最推荐的做法,因为它不会对数值执行任何多余操作。它可以将字符串转换成整数和浮点数形式,也可以转换非字符串值 true,false 和 null。小数和十六进制格式字符串也可以转换成数值。负数形式字符串也可以转换成数值(对于十六进制不适用)。如果它不能解析一个值,则计算结果为 NaN。

    三、循环展开数组

    又可以分为[].concat.apply+some方法和[].concat+解构+some两种

      //[].concat.apply+some
        function flatten2(arr){
            while(arr.some(item=>Array.isArray(item))){
                arr=[].concat.apply([],arr)//进行一次arr内参数的浅拷贝
            }
            return arr;
        }
        console.log(flatten2(arr))
        //[].concat+解构+some
        function flatten3(arr){
            while(arr.some(item=>Array.isArray(item))){
                console.log(...arr)
                arr=[].concat(...arr);
                console.log(arr)
            }
            return arr;
        }

    四、reduce累加器

    其实就是利用reduce本身的累加器特性,将循环隐去了。。。不过要注意一点,预设累加器的初始值。

      function flatten4(arr){
            return arr.reduce((prev,current)=>{
                return prev.concat(Array.isArray(current)?flatten4(current):current)
            },[])//累加器初始值设为[]
        }
        console.log(flatten4(arr))

    五、还可以直接引用lodash的flatten方法呀

  • 相关阅读:
    CF 633 E. Binary Table
    BZOJ 4589 Hard Nim
    不走弯路,微信小程序的快速入门?
    如果通过cookies和localStorage取值?
    Airbub 弃用React Native
    如何在登陆注册的时候,实现密码框的小眼睛的显示与与隐藏?
    js 实用封装 点击按钮复制到剪贴板
    css渐变写法 从左到右渐变三种颜色示例;
    vue-router 使用二级路由去实现子组件的显示和隐藏
    vue 路由传参中刷新页面参数丢失 及传参的几种方式?
  • 原文地址:https://www.cnblogs.com/MelodysBlog/p/11645246.html
Copyright © 2011-2022 走看看