js遍历循环for/for...in/for...of/forEach()/map()

【1】for循环

for (语句 1; 语句 2; 语句 3)
{
  //被执行的代码块
}

语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

//实例：
for(var i=0;i

【2】for...in循环遍历

var arr=["a","b","c"]
arr.name="wayne"
for(let i in arr){
  console.log(arr[i])
}

image.png

(1)for..in实际遍历的是对象的属性，当循环遍历的目标是数组时则被他当成一个对象，每个数组元素的索引被视为一个属性0:a，1:b，2:c，name:wayne；所以abc和wayne都被遍历出来了（但不包括Array的length属性）
(2)for...in 其中i是索引数组下标
(3)既可以遍历数组又可以遍历对象

【3】for...of循环遍历

var arr=["a","b","c"]
arr.name="wayne"
for(let i of arr){
  console.log(i)
}

image.png

(1)for … of循环则修复for...in的一些问题，它只循环集合本身的元素，所以只输出abc不输出wayne
(2)for...of是es6出来的，只用于遍历数组，其中i是元素；
(3)for...of 不可以遍历对象，会报错,因为能够被for...of正常遍历的，都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构，早就内置好了Iterator（迭代器），它们的原型中都有一个Symbol.iterator方法，而Object对象并没有实现这个接口，使得它无法被for...of遍历。

image.png

指路：特殊处理下for...of也可遍历对象

【4】原生Js forEach()循环遍历

var arr=["a","b","c"]
arr.name="wayne"
arr.forEach(function(item,index,arr){ 
    console.log(item)
})

//箭头函数
arr.forEach((item,index,arr)=>{  
    console.log(item);  
});

image.png

【5】原生Js map()循环遍历

var arr=["a","b","c"]
arr.name="wayne"
arr.map(function(item,index,arr){ 
   console.log(item)
   return item
})

image.png

forEach()和 map() 相同点：
（1）只能循环遍历数组，遍历对象报错forEach/map is not a function
（2）forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中当前项item,当前项的索引index,原始数组arr。
（3）匿名函数中的this都是指Window。
forEach()和 map() 不同点：
（1）forEach() 没有返回值；map() 有返回值，可以return 出来。

【总结】

这么多循环，肯定会有疑问，什么时候用哪个？用哪个性能更好？
首先明确一点哪个快和应该用哪个，并不应该划等号。如果你真的需要考虑性能，或者有 break 的需求，就用 for 吧。但是如果真的到了这一步，你应该不会对性能这个问题有所顾虑。
所以最后总结就是：
【1】遍历对象用for...in(数组也可以用实际还是把数组当成对象去遍历)
【2】简单遍历数组用for或forEach或for of
【3】需要将数组按照某种规则映射为另一个数组就应该用map()