JavaScript中数组的骚操作

本文只要讲述一行代码扁平化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中数组的骚操作

猜你喜欢