• Javascript——数组常用的方法


    1.pop和push尾部删除添加

    const arr = [ 1, 2, 3, 4, 5 ]
    //添加到数组的尾端
    arr.push(6) //[1,2,3,4,5,6]
    //再次调用pop方法就删除了最后一位
    arr.pop()//[1,2,3,4,5]
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2.unshift和shift头部删除添加

    const arr = [ 1, 2, 3, 4, 5 ]
    //添加到数组的前端
    arr.unshift(6) //[6,1,2,3,4,5]
    //再次调用shift方法就删除了第一位
    arr.shift()//[1,2,3,4,5]
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.sort 排序

    var arr = [18, 2, 10, 9, 88, 66, 22];
    arr.sort(function (a, b) {
    return b - a; //降序排序 从大到小
    // return a - b; //升序排序
    });
    
    console.log(arr); //[88,66,22,18,10,9,2]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4.reverse 反转,对数组进行就地反转,顺序颠倒

    const arr = ["March", "Jan", 6, 2, "A", "a"];
    arr.reverse();
    console.log(arr);//[ 'a', 'A', 2, 6, 'Jan', 'March' ]
    
    • 1
    • 2
    • 3

    5.splice 截取新增数据

    可以选择删除数组中的某一个值,也可以在数组中的某个位置添加一些数据,接收可选参数,三个或以上的参数,
    第一个为截取的索引位置number类型,
    第二个截取的个数number类型,
    第三个或更多实在截取位置添加的参数,可以是任何类型

    const arr = ["March", "Jan", 6, 2, "A", "a"];
    //在索引为2的位置截取一个,并在索引2的位置后添加8
    arr.splice(2, 1, 8);
    console.log(arr);//[ 'March', 'Jan', 8, 2, 'A', 'a' ]
    //截取位数不够,就将有的全部且去掉
    arr.splice(2, 6);
    console.log(arr);//[ 'March', 'Jan' ]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    6.filter 数据过滤
    需要一定条件返回对应的数据,接收一个回调函数,有回调函数有三个参数,
    第一个是当前遍历的元素,
    第二个为当前索引,
    第三个是数组本身,需要一个返回值,
    filter方法会根据符合这个返回值条件的数据返回一个**新数组
    ,不会改变原数组**

    const arr = ["March", "Jan", 6, 2, "A", "a"];
    //这里是一个简单的例子,返回类型为string的元素
    const newArr = arr.filter((item, index) => typeof item === "string");
    console.log(newArr);//[ 'March', 'Jan', 'A', 'a' ]
    
    • 1
    • 2
    • 3
    • 4

    7.map

    map方法只是单纯的返回一个新数组,可以是处理后的,也可以是原数组,接收一个会点函数,回调函数有三个参数第一个是当前遍历的元素,第二个为当前索引,第三个是数组本身,需要一个返回值,从map内部处理过后,回调函数的返回值返回一个新数组

    const arr = ["March", "Jan", 6, 2, "A", "a"];
    //返回一个number的数组,不是number类型的就返回它们的字段长度
    const newArr = arr.map((item, index) => (typeof item === "number" ? item : item.length);
    console.log(newArr);//[ 5, 3, 6, 2, 1, 1 ]
    
    
    • 1
    • 2
    • 3
    • 4
    • 5

    8.slice数组截取

    可以对一个数组进行浅拷贝,接收两个参数,第一个为截取的初始位置,第二个为终止位置(不包括此索引值),如果只填一个参数则从当前索引值截取到最后

    const arr = ["March", "Jan", 6, 2, "A", "a"];
    const newArr = arr.slice(0, 3);
    console.log(newArr);//[ 'March', 'Jan', 6 ]
    
    const newArr = arr.slice(3);
    console.log(newArr);//[ 2, 'A', 'a' ]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    9.concat数组合并
    需要两个或以上的数组合并的时候就可以使用cancat快速合并,当然在ES6之后大多都使用扩展运算符进行数组合并了,此方法接收一个或以上得任意类型参数

    const arr1 = ["March", "Jan"];
    const arr2 = [6, 2, "A", "a"];
    const arr3 = {
      name: "Tom",
      age: 18,
      sex: "男",
    };
    
    //如果参数是数组则会合并
    const newArr = arr1.concat(arr2);
    console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]
    
    //一个以上的参数 如果是值类型 则会直接添加到数组得最后面
    const newArr = arr1.concat(arr2,'Tom');
    console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a','Tom' ]
    
    //一个以上的参数,为一个对象类型,会直接添加到对象中
    const newArr = arr1.concat(arr2,arr3);
    console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a', { name: 'Tom', age: 18, sex: '男' } ]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    ES6扩展运算符合并多个数组: ...
            let arr1 = [0, 1, 3];
            let arr2 = ["a", "b", "c"];
            let arr3 = ["e", "f", "g"];
            let  arr = [...arr1, ...arr2, ...arr3];
    
    • 1
    • 2
    • 3
    • 4
    • 5

    10.fill填充
    对数组内容进行覆盖填充,有三个参数,
    第一个为填充的值,
    第二个为起始位置(可选),
    第三个为结束位置,不包含此索引位置(可选)

    const arr1 = ["March", "Jan", 6, 2, "A", "a"];
    //将666填充到1-4不包括4索引的位置
    const newArr = arr1.fill(666, 1, 4);
    console.log(newArr);//[ 'March', 666, 666, 666, 'A', 'a' ]
    
    • 1
    • 2
    • 3
    • 4

    11.flatMap和flat 扁平化数组
    flatMap与map相似,都是接收一个回调函数,进行处理后返回一个数组,但有一处差别就是flatMap可以对数组进行一层扁平化(仅数组)

    Array.prototype.flatMap
    flat + map
    遍历 + 扁平化
    
    const arr = ['123', '456', '789'];
    const newArr = arr.flatMap(function (item) {
      return item.split('');
    });
    console.log(newArr);
    // ['1', '2', '3', '4', '5', '6', '7', '8', '9']返回了一个新数组
    
    
    
    const newArr = arr1.flatMap((item, index) => {
      return [[item, index]];
    });
    //仅只能扁平化一层
    console.log(newArr);//[[ 'March', 0 ],[ 'Jan', 1 ], [ 6, 2 ], [ 2, 3 ],[ 'A', 4 ],[ 'a', 5 ]]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    flat通常在扁平化数组的时候都要使用递归函数,flat方法避免了页面中写递归函数造成大量的代码冗余,flat本身也是使用递归方法来达到数组扁平化的,接收一个number类型的参数,参数是几就可以扁平几层,在不确定有几维数组的情况下,参数为Infinity(无限大),可以扁平任意层次的数组

    const arr = [[[[["March"]]]], [[["Jan"]]], [[6]], [[2]], "A", ["a"]];
    //扁平参数对等的层数
    const newArr = arr.flat(2);
    console.log(newArr);//[ [ [ 'March' ] ], [ 'Jan' ], 6, 2, 'A', 'a' ]
    //使用Infinity关键字 可以扁平化任意层数数组
    const newArr = arr.flat(Infinity);
    console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]
    
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    12.includes 判断某个值数组中是否存在

    在数组中查抄某一个值,返回一个布尔值,有两个参数,第一个你要查找的值,第二个从哪个索引位置开始找

    const arr = ["March", "Jan", 6, 2, "A", "a"];
    const newArr = arr.includes(6);
    console.log(newArr);//true
    
    //也可以利用这一特性简化判断条件
    let name='a'
    //name是一个变量,可能有很多种可能,判断条件中就会非常冗余
    if ( name === 'a' || name === 'A' || name === 6...) {
      //...
    }
    
    //可以改成这种,看着也非常明了简便
    if (['a',"A",6,...].includes(name)) {
      //...
      console.log(true)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    13.indexOf 判断数组中是否存在某个值,并返回索引
    *写法和includes类似,
    有两个参数第一个是要找的值,
    第二个为开始索引,
    indexOf会在查找到第一个符合条件的参数跳出循环并返回索引,没找到则返回-1
    *

    const arr = ["March", "Jan", 6, 2, "A", 6, "a"];
    const newArr = arr.indexOf(6);
    //返回索引值
    console.log(newArr);//2
    
    //查找6,从索引为3的位置开始找
    const newArr = arr.indexOf(63);
    console.log(newArr);//5
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    14.find 查找符合条件的元素

    find查找符合条件的的一个元素并返回那个元素本身,没有则返回undefined,接收一个回调函数,回调函数有三个形参,
    第一个当前元素,
    第二个当前索引,
    第三个数组本身

    15.some 数组中至少有一个元素通过测试

    *some用于数组中参数其中一个或多个通过了测试,返回一个布尔值,如果有一个或以上通过测试就返回true,一个都没通过返回false,接收一个回调函数,有三个形参,第一个为当前元素,第二个为当前索引,第三个为数组本身,另外,当数组为空时使用some,不论判断条件如何,都会返回false,并且他不会改变数组
    *

    const arr = ["March", "Jan", 6, 2, "A", "a"];
    const newArr = arr.some((item) => typeof item === "string");
    //其中一个或以上的元素符合条件就返回true
    console.log(newArr);//true
    //只要是数组是空数组,后面的条件不管跟什么返回的永远为false
    console.log([].some((item) => item==undefined));//false
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 相关阅读:
    [项目管理-25]:高效沟通的利器,结构思考力与树形结构化表达
    基于java(springboot)零食商店管理系统源码(java毕业设计)
    栈和队列 OJ题
    Effective Modern C++[实践]->优先使用nullptr,而非0或NULL
    专业130+总分410+上海交通大学819信号系统与信号处理考研上交电子信息通信生医电科,真题,大纲,参考书。
    fatal error C1083: 无法打开包括文件:“stdint.h”: No such file or directory
    Cerebral Cortex:调节γ振荡可以促进大脑连接性而改善认知障碍
    阿里云服务器的登录方法
    2020年江西省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书样题
    杭电oj 2059 龟兔赛跑 C语言
  • 原文地址:https://blog.csdn.net/weixin_43551242/article/details/133638333