盘点js循环数组的常用方法与基础用法

1、for循环
这应该是大家耳熟能详的一种循环方式，虽然for循环感觉写法臃肿，但其实for循环才是速度最快、效率最高的，并且可以满足条件跳出循环，后面的就不用执行了，能节省些性能，举个栗子

    let _data = [
      {
        name: '张三',
        age: 18,
        id: '1'
      },
      {
        name: '李四',
        age: 30,
        id: '2'
      },
      {
        name: '王五',
        age: 26,
        id: '3'
      },
    ]
    let str = ''
    for(let i = 0; i < _data.length; i++){
      if(_data[i].id === '2'){
        str = _data[i].name
        break
      }
    }
    console.log(str) //  李四

比如这个data是后台反的数据，需要你从中找出id为2的那一项的name值，我们都知道，正常情况下，字段id一般都是唯一的，不会重复，所以在找到那一项的时候，就可以break跳出循环，后面的项就不用再循环了，可以节省部分性能

2、forEach

forEach是遍历整个数组，break无法跳出循环，什么场景下使用呢，还是上边的data数据，如果想给每一项添加一个开关属性，具体用来操作什么呢，这个场景比较多，可以是样式，也可以是其他的，具体看使用场景，这个时候就可以使用到forEach循环了

    _data.forEach(item => {
      item.flag = false
    })
    console.log(_data)      
    // { 
    //   age: 18
    //   flag: false
    //   id: "1"
    //   name: "张三"
    // }
    // {
    //   .......
    // }

现在就给每一项添加了一个flag属性，默认为false，就可以去在点击事件上或者其他场景，拿到id或者点击事件传过来的下标去操作每一项的flag属性，实现想要的效果

3、map

map循环支持return值，把每一次循环返回的值组成一个新数组，不会修改原数组
如果是计算，则返回计算后的值  判断返回布尔值
 

    let arr = [1, 2, 3, 4, 5, 6]
    const li = arr.map(item => {
      return item > 2
     // return item * 10
    })    
    console.log(arr)  // [1, 2, 3, 4, 5, 6]
    console.log(li)   // [false, false, true, true, true, true]
    console.log(li)   // [10, 20, 30, 40, 50, 60]

4、filter

又叫过滤器，和map有点相似，因为都是满足条件返回新数组，不会修改原数组，但是也有不同，map循环可以进行计算，返回布尔值，而filter不可以

    let arr = [1, 2, 3, 4, 5, 6]
    const li = arr.filter(item => item > 2)   
    const li = arr.filter(item => {
      return item > 2
    })
    console.log(arr)  // [1, 2, 3, 4, 5, 6]
    console.log(li)   // [3, 4, 5, 6]

5、every

给数组的每一项都运行一个函数，如果数组的每一项都满足条件就返回true，否则返回false

    let arr = [1, 2, 3, 4, 5, 6]
    const li = arr.every(item => {
      return item > 2
    })
    console.log(li)   // false
    const li = arr.every(item => {
      return item > 0
    })
    console.log(li)   // true

6、some

和every相反，every是遍历每一项，some是只要有一项满足条件，就会跳出循环，后边的不再执行，如果都不满足返回false

    let arr = [1, 2, 3, 4, 5, 6]
    const li = arr.some(item => {
      console.log(item)   // 1  2  3
      return item > 2
    })
    console.log(li)   // true

    let arr = [1, 2, 3, 4, 5, 6]
    const li = arr.some(item => {
      console.log(item)   // 1  2  3  4  5  6
      return item > 10
    })
    console.log(li)   // false