JS中的几种遍历方式

简单整理一些自己常用的遍历循环方法，js的几个遍历各有千秋，区别各个方式的使用场景和如何跳出循环。

---

//定义的数组
let arr1 = [2,3,11,9,85,100,100];

1.for循环

for(i = 0; i< arr1.length; i++){
    if(i==3) { 
       // (1)break; 跳出for循环，这个循环将不再被执行！ 输出 0， 1， 2
       // (2)continue; 跳出当前的遍历,开始循环的一次新迭代    输出 0， 1， 2， 4， 5， 6
       // (3)return; 出现在这里会报错 Uncaught SyntaxError: Illegal return statement
     } 
     console.log(i)
 }

2.forEach

arr1.forEach((item,index) => {
   if(item == 11){
       // (1) break;  // 报错 Uncaught SyntaxError: Illegal break statement
       // (2) return;  //只会跳出当前的遍历，开始循环一次新的迭代  2, 3, 9, 85, 100, 100
   }
   console.log(item)
})

//(3) try...catch语句 可以正确跳出循环

try {
   arr1.forEach((item,index) => {
     if(item === 11) throw new Error('exist')
          // console.log(item)  //2，3
      })
   } catch (e) {
         // console.log(e)
   } finally {
       //   console.log('done')
}

3.for in

for(let i in arr1){
  //i是index/属性名
  if(i == 3){
      //退出方法同for
      //(1)break; //正常跳出循环 0,1,2
      //(2)return; //报错
   }
    console.log(i) 
}

循环键名，一般用来遍历对象

let obj1 = {name:'linqii',gender:'girl',address:'Beijing'}
  for(let i in obj1){
     // console.log(i) name gender address
  }

4.for of

for (let i of arr1){
  if(i == 11){
      // break; //2, 3
      //continue; //2, 3, 9, 85, 100, 100
  }
  console.log(i) //i是value
}

for of 是es6的方法，弥补了forEach和for in循环的弊端。
不会遍历数组的私有属性，
但是for of不能遍历对象（可以遍历字符串，数组对象.）

5.filter

根据返回的boolean，决定是否添加到数组中

遍历一个数组并返回一个新数组，并且不影响原数组。遍历数组每一项，回调函数返回true,就把这一项添加到新数组中。其中回调函数中有三个参数，（value,index,array）,value是每一项，index是索引，array是当前被遍历的数组。

注：filter不会对空数组进行检测，filter不会改变原数组

let newArr = arr1.filter(item => {
      return item>11
    //if(item > 11){
    //   return false;  这样返回一个空数组[]
    //  }
})
console.log(newArr) //[85,100,100]

//数组对象也ok
let arr2 = [
   {name:'测试1',code:1},
   {name:'测试2',code:2},
   {name:'测试3',code:3},
   {name:'测试4',code:4},
   {name:'测试5',code:5},
];
let newArr1 = arr2.filter(item => {
      return item.code >2
  })
console.log(newArr1)

6.map

生成一个新数组，遍历原数组, 将每个元素拿出来做一些变换然后放入到新的数组中

let newArr2 = arr1.map(item => {
    return item-1
 })
console.log(newArr2) //[1, 2, 10, 8, 84, 99, 99]

let newArr3 = arr2.map(item => {
     return item.name 
})
console.log(newArr3)//["测试1", "测试2", "测试3", "测试4", "测试5"]

//try catch 抛异常的方式跳出
try {
    arr1.map((v) => {
       console.log(v) //2,3,11
       if (v === 11) {
          throw 'out';
        }
      })
 } catch (e) {

 }

传入的function可以有自己的三个形参，currentValue, index,arr分别代表当前元素，元素索引，元素所属数组对象；其中currentValue是必须的。
如果没有return则返回一个全是undefined的数组，个数是索引+1(key+1)。

7.some

用于检测数组/数组对象中的元素是否满足指定条件
some不会改变原数组，不会检查空数组

arr1.some(item => {
if(item == 3){
   return true;
}
console.log(item) //2
})

return true 跳出整个循环;return false 跳出当前循环，开始新的迭代（2，11，9，85，100，100）;
break 、continue 都会报错;

8.every

用于检测数组所有元素是否都符合指定条件

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
every() 不会对空数组进行检测。不会改变原始数组。

function checkValue(value){
  return value >= 11
}
let desc = arr1.every(checkValue);
console.log(desc) //false