JS-数组遍历的方法你知道几种?

1,128 阅读4分钟

JS-数组遍历的方法你知道几种?

开源

个人开源的leno-admin后台管理项目,前端技术栈:reactHooksant-design;后端技术栈:koamysqlredis,整个项目包含web端electron客户端mob移动端template基础模板,能够满足你快速开发一整套后台管理项目;如果你觉得不错,就为作者点个✨star✨吧,你的支持就是对我最大的鼓励;

演示地址

文档地址

源码github地址

forEach

基本语法: 数组.forEach(function(数组[i],索引值){ 业务处理 });
功能类似于for循环,但是比for循环更加简洁明了,更易于使用,效率更高;

求数组[1,8,6,12,36,4,10]中大于10且不等于10 👇👇

        let arr = [1, 8, 6, 12, 36, 4, 10]
        let newArr = []
        arr.forEach((value, indx) => {
            if (value > 10) newArr.push(value)
        })
        console.log(newArr); // => [12,36]

forEach里面直接写函数的话,里面函数会获得三个参数function(value(遍历数组的值),index(遍历数组的索引值),array(遍历当前的整个数组)){}

内部写函数的案例

     let arr = ['一', '二']
     arr.forEach(function (value, index, array) {
       console.log(value, index, array);    // 一 0 (2) ['一', '二']
                                            // 二 1 (2) ['一', '二']
    }) 

filter

基本语法:let newArr(新数组) = 数组.filter(function(数组[i],索引值){return 条件1 === 条件2});
将数组中满足条件的筛选出来,生成一个新的数组,所以需要用一个变量去接受,常用于筛选&删除业务;

将数组[10,'',0,23,'',8,'',88,'']中空的数组去除🐱‍👓🐱‍👓

        let arr = [10, '', 0, 23, '', 8, '', 88, '']
        let newArr = arr.filter((value, index) => {
            return value !== ''
        })
        console.log(newArr); // => [10, 0, 23, 8, 88]

map

基本语法:let newArr(新数组) = 数组.map(function(数组[i],索引值){return 数组[i]+2});
map的使用和forEach类似,常用来操作原数组里面的内容,会生成新的数组;

将数组[5,3,7,11,20,15]中每个数组+2 🐱‍🐱‍

       let arr = [5, 3, 7, 11, 20, 15]
        let newArr = arr.map((value, index) => {
            return value + 2
        })
        console.log(newArr); // => [7, 5, 9, 13, 22, 17]

find

基本语法:let item = 数组.find(function(数组[i],索引值)){return 数组[i]===条件};
找到第一个满足条件的值,会返回数值;

找数组["a", "b", "c", "d", "e","c"]中的c 🍖🍖

        const arr = ["a", "b", "c", "d", "e", "c"];
        const item = arr.find((value, index) => {
            return value === "c"
        })
        console.log(item);  // => 第一个:c  
        // # :找不到元素返回undefined

findIndex

基本语法:let i = 数组.findIndex(function(数组[i],索引值)){return 数组[i]===条件};
找到第一个满足条件的值,会返回数值的索引值;

找数组["a", "b", "c", "d", "e","c"]中的c的索引值 🥬🥬

   const arr = ["a", "b", "c", "d", "e", "c"];
        const i = arr.findIndex((value, index) => {
            return value === "f"
        })
        console.log(i);  // => 第一个c的索引值2 ; * 找不到值返回-1

every

基本语法::let sta = 数组.every(function(数组[i],索引值)){return 数组[i]===条件};
用于检测数组所有元素是否都符合指定条件,返回布尔值;

判定数组["a", "b", "c", "d", "e","c"]是否都是c 🌍🌍

     const arr = ["a", "b", "c", "d", "e", "c"];
        const sta = arr.every((value, index) => {
            return value === 'a'
        })
        // console.log(sta); // => 返回false

some

基本语法::let sta = 数组.some(function(数组[i],索引值)){return 数组[i]===条件};
检测数组中是否有元素满足指定条件,返回布尔值;

判定数组["a", "b", "c", "d", "e","c"]是否有c 🍦🍬

     const arr = ["a", "b", "c", "d", "e", "c"];
        const sta = arr.some((value, index) => {
            return value === 'c'
        })
        console.log(sta); // => 返回true

reduce

基本语法::let res = 数组.reduce(callback(返回reduce内部上一次回调return的值/上次回调没值,则返回数组第一个值(即初始值),当前的数组[i],索引值,数组),设置初始值){return 上一次的值+当次的值};
reduce功能和forEach、map类似,但个人感觉reduce在多层解构数组合并上比较好用;

数组求和[2, 10, 3, 5] 🧃🍺

       let arr = [2, 10, 3, 5]
        let sum = arr.reduce(function (previousValue, currentValue, index, arr) {
            console.log(previousValue, currentValue, index);    // 2 10 1     
            return previousValue + currentValue                // 12 3 2    打印值
        })                                                     // 15 5 3
        console.log(sum); // =>       20

结语

以上方法都是为了利于我们日常开发,提高我们的开发效率,虽然这些效果for循环全部都能完成,但是更精简,更优美,更高效的代码是每个程序员都一直追求的~