资讯专栏INFORMATION COLUMN

JS 之数组的几个经典api

陈江龙 / 1085人阅读

摘要:一扁平化嵌套数组展平和阵列孔实现效果方法删除数组中的空槽该方法创建一个新数组,所有子数组元素以递归方式连接到指定的深度。深度级别指定嵌套数组结构应该展平的深度。方法解读该方法的实质是利用递归和数组合并方法实现扁平。是将类数组转化为数组。

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

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

实现效果

</>复制代码

  1. </>复制代码

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

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

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

利用Array.reduce()和Array.concat()实现

</>复制代码

  1. </>复制代码

    1. const flat1 = function (arr) {
    2. return arr = arr.reduce((pre, cur) => Array.isArray(cur) ? pre.concat(flat1(cur)) : pre.concat(cur),
    3. [])
    4. }
    5. var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
    6. flat1(arr3); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

利用Array.some()和Array.concat()实现

</>复制代码

  1. </>复制代码

    1. const flat2 = function(arr){
    2. while(arr.some(item=>Array.isArray(item))){
    3. arr=[].concat(...arr);
    4. }
    5. return arr;
    6. }
    7. var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
    8. flat2(arr3); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
二、数组去重——set()

1.实现效果

</>复制代码

  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.方法解读

</>复制代码

  1. </>复制代码

    1. function unique(arr) {
    2. var result =[];
    3. for (var i = 0; i < arr.length; i++) {
    4. for (var j = i+1; j < arr.length; j++) {
    5. if (arr[i] === arr[j]) {
    6. j=++i;
    7. }
    8. }
    9. result.push(arr[i]);
    10. }
    11. return result;
    12. }
    13. var arr3 = [1, 2, 3, 3, 4, 5, 4];
    14. unique(arr3);//(5) [1, 2, 3, 5, 4]
三、数组排序——sort()

1.实现效果

</>复制代码

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

2.方法解读

</>复制代码

  1. </>复制代码

    1. 冒泡排序
    2. Array.prototype.bulesort = function () {
    3. let arr = this,
    4. len = arr.length;
    5. for (let outer = len; outer >= 2; outer--) {
    6. for (let inner = 0; inner <= outer - 1; inner++) {
    7. if (arr[inner] > arr[inner + 1]) {
    8. [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
    9. }
    10. }
    11. }
    12. return arr;
    13. }
  2. [3, 4, 2,1].bulesort()//[1,2,3,4]

四、最大值

1.实现效果

</>复制代码

  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. [1, 2, 3, 4].reduce((prev,cur)=>{
    return prev+cur;
    },0); //10

2.方法解读

</>复制代码

  1. </>复制代码

    1. function sum(arr){
    2. if (arr.length==0){
    3. return 0;
    4. } else if (arr.length == 1){
    5. return arr[0];
    6. }else{
    7. return arr[0]+sum(arr.slice(1));
    8. }
    9. }
    10. sum([1, 2, 3, 4]);//10
六、合并

</>复制代码

  1. [1,2,3].concat([5,6]);
    [...[1,2,4],...[2,3,5,7]]
七、判断是否有值

</>复制代码

  1. [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
八、类数组转化

</>复制代码

  1. Array.prototype.slice.call(arguments);
    Array.prototype.slice.apply(arguments);
    Array.from(arguments);
    [...arguments]
九、每一项设置值

</>复制代码

  1. //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]
十、每一项是否满足/某一项是否满足

</>复制代码

  1. [2, 3, 5].every(item=>{return item>2}) //false
    [2, 3, 5].some(item =>{ return item > 2 })//true
十一、过滤数组

</>复制代码

  1. [2, 3, 5].filter(item => { return item > 2 })//(2) [3, 5]
十二、对象和数组转化

</>复制代码

  1. 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]

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110200.html

相关文章

  • JS数组几个不low操作(3)

    摘要:序列文章面试之函数面试之对象前言本文主要从应用来讲数组的一些骚操作如一行代码扁平化维数组数组去重求数组最大值数组求和排序对象和数组的转化等上面这些应用场景你可以用一行代码实现扁平化维数组终极篇是扁平数组的表示维度值为时维度为无限大开始篇实质 showImg(https://segmentfault.com/img/bVbpRMS?w=1858&h=1286); 序列文章 JS面试之函数...

    fish 评论0 收藏0
  • Java经典

    摘要:请注意,我们在聊聊单元测试遇到问题多思考多查阅多验证,方能有所得,再勤快点乐于分享,才能写出好文章。单元测试是指对软件中的最小可测试单元进行检查和验证。 JAVA容器-自问自答学HashMap 这次我和大家一起学习HashMap,HashMap我们在工作中经常会使用,而且面试中也很频繁会问到,因为它里面蕴含着很多知识点,可以很好的考察个人基础。但一个这么重要的东西,我为什么没有在一开始...

    xcold 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0
  • 前端经典面试题 不经典不要star!

    摘要:前言上一期说好的的核心模块进阶以及基本应用的使用将在号或者号与大家见面在此之前我想跟大家分享几个前端经典的面试题为什么我突然想写这么一篇文章呢今天我应公司要求去面试了下几位招聘者然后又现场整不出几个难题就搜了一下前端变态面试题,前提我并不是 前言 上一期说好的node.js的核心模块进阶以及基本web应用的使用将在2号或者3号与大家见面,在此之前我想跟大家分享几个前端经典的面试题,为什...

    codergarden 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<