JavaScript中常见的循环遍历

---

总结

1、返回新数组

• map(let arr2 = arr.map((n)=>{ }))
• filter(满足条件的元素组成新数组)

2、改变原数组

• forEach(arr.forEach((item,index,arr)=>{}) )

3、返回Boolean值

• every(let arr2 = arr.every((item,index,arr)=>{}))
• some(let arr2 = arr.some((item,index,arr)=>{}))

4、迭代器

• reduce(let arr2 = arr.reduce(function(i,j){ return i+j }))
• (i=上次调用函数的返回值，j=当前元素)

5、可以停止循环只有两个

• for
• for…in

6、针对对象

• for…in
• Object.keys(对象)，Object.values(对象)

7、针对数组

• for
• for…of
• map
• forEach
• filter
• some
• every
• reduce

[注意]：for （ item of arr）遍历各种类型，不能遍历对象,因为没有迭代器对象
[注意]：for(let key in obj){//这里的key是键，不是下标，for in更适合遍历对象，不要使用for in遍历数组

一、for循环

可读性和易维护性比较查，但是可以及时break结束循环。

let arr = [1,2,3,4,5,6,7]
for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}
//输出： 1,2,3,4,5,6,7

二、for…in

主要针对对象的遍历，容易获取对象的对应键值。
[注意]：for…in循环对象的所有枚举属性，需再使用hasOwnProperty()方法来忽略继承属性，即在循环内部判断一下，某个属性是否为对象自身的属性，避免出现遍历失真的情况。
比如微信小程序就有一个比较坑的情况，for…in循环中，会有一个_newReference=false始终存在

let obj = {name: 'myname', sex: 'male', age: '10'}
for(let key in obj){//这里的key是键，不是下标
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}
//输出：myname
//      male
//      10

三、map

map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止的，总是会将所有成员遍历完

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

另map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员item、当前位置index和数组本身arr。

let arrObj = [{
    id: 1,
    name: '1name'
},{
    id:2,
    name: '2name'
},{
    id:3,
    name: '3name'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // 1name 2name 3name
    })

输出：

四、forEach

forEach的使用方法和map使用方法差不多,只是forEach方法 不返回值，只用来操作数据，且循环中途是无法停止的，总是会将所有成员遍历完。传入三个参数：当前成员item、当前位置index和数组本身arr。

当然如果想要强制停止，可以试一下try catch 语句，抛出一个 error 给 catch 捕捉到，然后在 catch 里面 return，这样就能中止循环了

let arrObj = [{
    id: 1,
    name: '1name'
},{
    id:2,
    name: '2name'
},{
    id:3,
    name: '3name'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // 1name 2name 3name
    })

输出：

注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。

五、filter过滤循环

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。传入三个参数：当前成员item、当前位置index和数组本身arr。

let arrObj = [{
    id: 1,
    name: '1name'
},{
    id:2,
    name: '2name'
},{
    id:3,
    name: '3name'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === '1name')
    })
    console.log(arr2)//{id: 1, name: "1name"}

ES5(ECMAScript5)中Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string)：

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean是一个函数，它会对遍历数组中的元素，并根据元素的真假类型，对应返回 true 或 false.

六、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象，返回键名组成的数组。Object.values(对象)获取值组成的数组

let obj = {name: 'myname', sex: 'male', age: '10'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

七、some() 方法

some() 方法用于检测数组中的当前元素是否满足指定条件（函数提供）,返回 boolean 值，不改变原数组。跟filter过滤类似，只是返回不同。

let arr = [1,2,3];
let arr2 = arr.some(function(i){//i为值，不是下标
  return i>1;// 检测当前元素i元素是否大于1
})
// true

八、every() 方法

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），返回 boolean 值，不改变原数组。
注意：every() 方法检测的是所有元素，才返回Boolean值
some()方法检测的是当前元素，就返回。

let arr = [1,2,3];
let arr2 = arr.some(function(i){
  return i>1;
})
// 检测数组中元素是否都大于1
// false

九、reduce() 方法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

let arr = [1,2,3];
let arr2 = arr.reduce(function(i,j){
  return i+j;
})
console.log(arr2)
// 6
//arr.reduce第一次操作1+2；这时候数组缩减成了 arr = [3,3]；
//所以第二次操作的是 3+3；至此数组还剩最后的一个值 6；返回；

十、for of 循环

for of 循环是Es6中新增的语句，用来替代 for in 和 forEach，它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构,注意它的兼容性。
语法：

	for (variable of iterable) {
	    statement
	}

• variable：每个迭代的属性值被分配给该变量。
• iterable：一个具有可枚举属性并且可以迭代的对象。

用例:

参考链接：理解 JavaScript 中的 for…of 循环