JavaScript数组 API 实现的几个常见操作

秒速五厘米 2022-10-21 01:07 208阅读 0赞

**点击关注下方卡片关注我????????**

回复“JS”查阅 JS精选文章

来源 | https://segmentfault.com/a/1190000019126646

本文主要来讲数组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.方法解读

## **三、数组排序——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]); //4Math.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]

*END*

![1615022229360457.png][]

推荐阅读  点击标题可跳转

[重磅！超详细的 JS 数组方法整理出来了][JS]

[从一个数组中移除重复对象][Link 1]

[比较JS合并数组的各种方法及其优劣][JS 1]

觉得本文对你有帮助？请分享给更多人

关注下方「前端开发博客」，提升前端技能

![3ba4e13992b123106be67bdd2c1c0f77.png][]

**如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~**

![6dc0d4a5f4d0bd59dd00a9f05380b13b.gif][]

**   “分享、点赞、在看” 支持一波 ![f748bcb33fab99c53bd751d6d055a1b5.png][] **

[1615022229360457.png]: /images/20221021/97e9b4edebac46368be5dc38a383d7ec.png
[JS]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83db8ac5b4ac03d3e7176f99cab7ac0077852cf2a37e68522c47d334bc94706cee719e5cdd29&idx=1&mid=2650085280&scene=21&sn=ef259df2e75594dea8f0b259539dfad9#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83da61a4b4ade8b2a23769779a560b027ba2c6c476f20deae10c148253b78a21255870520ad1&idx=1&mid=2650078401&scene=21&sn=48b09443a132ae4c9244888010bd7da0#wechat_redirect
[JS 1]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83da641ab4aded0cf5ca81cd7c85f7a9724a8a9f14a70f360a8464dcffe8339726d58b4ced55&idx=1&mid=2650077567&scene=21&sn=ae3e46c4818befdbbf0c020a74aa5001#wechat_redirect
[3ba4e13992b123106be67bdd2c1c0f77.png]: /images/20221021/d44fbad35c5d4ff4ac20d25b05480bd4.png
[6dc0d4a5f4d0bd59dd00a9f05380b13b.gif]: /images/20221021/2bcfadf8dcea4847ae2f1b6469990fc3.png
[f748bcb33fab99c53bd751d6d055a1b5.png]: /images/20221021/9150bf7868da4401bd1f7afca76f64de.png