乐趣区

JS-之数组的几个经典api

jiezi

本文主要来讲数组 api 的一些操作，如简单实现扁平化 n 维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。

一、扁平化嵌套数组 / 展平和阵列孔——flat()

  1. 实现效果
   var arr1 = [1, 2, [3, 4]];  
   arr1.flat(); // [1, 2, 3, 4] 
   var arr2 = [1, 2, [3, 4, [5, 6]]]; 
   arr2.flat(2); // [1, 2, 3, 4, 5, 6]
   //flat 方法删除数组中的空槽：var arr3 = [1, 2, , 4, 5]; 
   arr3.flat(); // [1, 2, 4, 5]

该 flat([depth])方法创建一个新数组，所有子数组元素以递归方式连接到指定的深度。depth 深度级别指定嵌套数组结构应该展平的深度。默认为 1。

2. 方法解读：
该方法的实质是利用递归和数组合并方法 concat 实现扁平。可以使用
Array.reduce()/Array.some()/Array.concat()

  • 利用 Array.reduce()和 Array.concat()实现
  const flat1 = function (arr) {return arr = arr.reduce((pre, cur) => Array.isArray(cur) ? pre.concat(flat1(cur)) : pre.concat(cur),
        [])
    }
    var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
    flat1(arr3); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
  • 利用 Array.some()和 Array.concat()实现
   const flat2 = function(arr){while(arr.some(item=>Array.isArray(item))){arr=[].concat(...arr);
      }
      return arr;
    }
    var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
    flat2(arr3); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

二、数组去重——set()

1. 实现效果

Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[…new Set([1,2,3,3,4,4,5,6])] //[1,2,3,4,5]

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

2. 方法解读

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

三、数组排序——sort()

1. 实现效果

[1,3,2,5,4].sort();
[1,3,2,5,4].sort((a,b)=>b-a);

2. 方法解读

冒泡排序  
Array.prototype.bulesort = function () {
 let arr = this,
     len = arr.length;
 for (let outer = len; outer >= 2; outer--) {for (let inner = 0; inner <= outer - 1; inner++) {if (arr[inner] > arr[inner + 1]) {[arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
        }
    }
}
  return arr; 
}

[3, 4, 2,1].bulesort()//[1,2,3,4]

四、最大值

1. 实现效果

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

2. 方法解读
先排序，再取值。

五、求和

1. 实现效果

[1, 2, 3, 4].reduce((prev,cur)=>{
return prev+cur;
},0); //10

2. 方法解读

function sum(arr){if (arr.length==0){return 0;} else if (arr.length == 1){return arr[0];    
}else{return arr[0]+sum(arr.slice(1));   
 } 
} 
sum([1, 2, 3, 4]);//10

六、合并

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

七、判断是否有值

[2, 3, 5].indexOf(3);//1
[2,3,5].includes(4)//false
[2, 3, 5].find((item) => {item === 3})//1
[2, 3, 5].findIndex((item) => item === 3)//1
[2, 3, 5].some(item=>{return item===3})//true

八、类数组转化

Array.prototype.slice.call(arguments);
Array.prototype.slice.apply(arguments);
Array.from(arguments);
[…arguments]

九、每一项设置值

//array.fill(value, start, end)
[2, 3, 5].fill(true,false,true);//(3)
[false, false, false] [2, 3, 5].map(() => 0)//(3) [0, 0, 0]

十、每一项是否满足 / 某一项是否满足

[2, 3, 5].every(item=>{return item>2}) //false
[2, 3, 5].some(item =>{ return item > 2})//true

十一、过滤数组

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

十二、对象和数组转化

Object.keys({name: ‘ 张三 ’, age: 14})//[“name”, “age”]
Object.values({name: ‘ 张三 ’, age: 14})// [“ 张三 ”, 14]
Object.entries({name: ‘ 张三 ’, age:14}) // (2) [Array(2), Array(2)]0: (2)[“name”, “ 张三 ”]1: (2)[“age”, 14]

退出移动版