JavaScript中数组的骚操作

作者: nomooo | 来源:发表于2019-03-20 16:14 被阅读211次

    本文只要讲述一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等
    注:轻奢版就是便捷的实现方法,原始版是这个方法还没有出现之前是怎么实现的(只列举了前两个)

    • 扁平化n维数组

    轻奢版

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

    Array.flat(n)是扁平数组的api, n表示维度, n值为 Infinity时维度为无限大。

    原始版

    function flatten(arr){
        while(arr.some(item=>Array.isArray(item))){
            arr = [].concat(...arr)
        }
        return arr;
    }
    flatten([1,[2,3]]);//[1, 2, 3]
    flatten([1,[2,3,[4,5]]]);//[1, 2, 3, 4, 5]
    

    实质是利用递归和数组合并方法,concat实现扁平


    去重

    轻奢版

    Array.from(new Set([1,2,3,4,3,2,1]));//[1, 2, 3, 4]
    [...new Set([1,2,3,4,3,2,1])];//[1, 2, 3, 4]
    

    set是ES6新出来的一种定义不重复数组的数据类型。
    Array.from是将类数组转化为数组。
    ...是扩展运算符,将set里面的值转化为字符串。

    原始版

    Array.prototype.distinct = function(){
        var arr = this,
        result = [],
        i,
        j,
        len = arr.length;
        for(i = 0;i < len;i++){
            for(j=i+1;j<len;j++){
                if(arr[i] === arr[j]){
                    j = ++i;
                }
            }
        result.push(arr[i])
        }
        return result;
    }
    [1,2,3,4,3,1,2,3,5].distinct();//[4, 1, 2, 3, 5]
    

    取新数组存值,循环两个数组相比较


    排序

    [1,2,4,3,0].sort();//[0, 1, 2, 3, 4]  默认升序
    [1,2,4,3,0].sort((a,b)=>b-a);//[4, 3, 2, 1, 0] 降序
    

    sort是js内置的排序方法,参数为一个函数


    最大值

    Math.max(...[1,2,3,4]);//4
    Math.max.apply(this,[1,2,3,4]);//4
    [1,2,3,4].reduce((prev,cur,curIndex,arr) => {
        return Math.max(prev,cur)
    },0);//4
    

    Math.max()是Math对象内置的方法,参数是字符串
    reduce是ES5的数组api,参数有函数和默认初始值
    函数有四个参数:

    • pre :上一次的返回值
    • cur :当前值
    • curIndex :当前值索引
    • arr:当前数组

    求和

    [1,2,3,4,5].reduce(function(prev,cur){
        return prev + cur;
    },0); // 15
    

    合并

    [1,2,3,4].concat([5,6]);//[1, 2, 3, 4, 5, 6]
    [...[1,2,3,4],...[5,6]];//[1, 2, 3, 4, 5, 6]
    

    判断是否包含值

    [1,2,4].includes(3);//false
    [1,2,4].indexOf(3);//-1 如果存在返回索引
    [1,2,4].find((item)=>item===2);//2 如果数组中无值返回undefined
    [1,2,4].findIndex((item)=>item===1);//0 如果数组中无值返回-1
    

    类(伪)数组转化

    Array.prototype.slice.call(arguments);//arguments是类数组(伪数组)
    Array.prototype.slice.apply(arguments);
    Array.from(arguments);
    [...arguments]
    

    类(伪)数组:表示length属性,但是不具备数组的方法
    call,apply:改变slice里面的this只想arguments,所以arguments也可调用数组的方法
    Array.from:将类似数组或可迭代对象创建为数组
    ...:将类数组拓展为字符串,再定义为数组


    每一项都设置值

    [1,2,3,4].fill(false);//[false, false, false, false]
    

    每一项是否满足

    [1,2,3,4].every(item => {return item > 2});//false
    

    有一项满足

    [1,2,3,4].some(item => {return item > 2});//true
    

    过滤数组

    [1,2,3].filter(item=>{return item>2});//[3]
    

    对象和数组转化

    Object.keys({name:"张三",age:10});//["name", "age"]
    Object.values({name:"张三",age:10});//["张三", 10]
    Object.entries({name:"张三",age:10});//[["name", "张三"], ["age", 10]]
    

    相关文章

      网友评论

        本文标题:JavaScript中数组的骚操作

        本文链接:https://www.haomeiwen.com/subject/bekzmqtx.html