Es5和Es6中数组循环的方法

一时失言乱红尘 2021-09-07 12:30 589阅读 0赞

本笔记根据慕课网：链接: [JavaScript ES(6-11)全版本语法][JavaScript ES_6-11]（谢成老师）讲课整理，仅供自己参考。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]  
1.for循环：

for(let i=0; i<arr.length; i++){}

2.forEach:

//elem:当前正在遍历的对象，index：遍历对象所对应的索引，array:当前正在遍历的数组本身

arr.forEach(funciotn(elem,index，array){}

> *for 和 forEach的区别：forEach不支持continue和break,循环中途无法跳出整个循环。*

3.map循环：

arr.map(funciton(value){  })

> *map 和 forEach之间的区别：forEach只是简单的循环，map函数会遍历数组的每一个元素，需要的返回值会生成新的数组（不会改变原有数组的值)*

4.filter(过滤循环)循环：

arr.filter(funciont(value){ 
        return value == 2
    })

> *filter同样也会返回一个新的数组，数组里面的元素是经过筛选的元素，符合筛选结果的。*

5.some循环

arr.some(funciton(value){ })

> *some适用于判读数组中有没有符合条件的值，返回的是布尔类型的值（只有数组里有一个条件为真，就会返回true）*

6.every循环

arr.every(funciton(value){ })

> every检测每一个元素是否都符合条件值，有一个不符合就返回false,和some是相反的

7.reduce:两个参数：方法，初始值

方法：prev上一次回调的时候所对应的返回值，cur当前正在处理的元素（形参），index,索引，arr原数组

//使用场景：求出数组的使用的和
    let sum = arr.reduce(function(prev,cur){ 
        return prev+cur
    },0)
    
    //使用场景：找到数组里最大的值
    let max arr.reduce(function（prev,cur){ 
      return  Math.max(prev,cur)
    })
    
    //使用场景：数组去重
    let res = arr.reduce(function（prev,cur）{ 
        prev.indexOf(cur) == -1 && prev.push(cur)
        return prev
    },[])

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 1]

1.find 循环

> 返回第一个通过测试的元素

let res =arr .find(function(value){ })

2.findIndex 循环

> 返回的值为该通过的第一个元素的索引

let res =arr .findIndex(function(value){ })

3.for of

for（let item of arr）{ console.log(items)}

> 获取循环的值 arr.values
> 
> 获取循环下标 arr.keys
> 
> 获取内容和下标 arr.entries

for(let [index,item] of arr.entries()){ 
    } 
    ```

[JavaScript ES_6-11]: https://coding.imooc.com/class/444.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]: /images/20210827/3b6fb0f0483e4a4a970c2889a2db401e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 1]: /images/20210827/89a2c8f6eade49f5bd93ab99c202b926.png