JavaScript中常见基础遍历问题

什么是遍历

遍历: 通俗来说就是把数组中的每个元素从头到尾都访问一次，并对每一元素或满足条件的某些元素进行操作（类似我们每天早上学生的点名，同时让谁谁谁去干些什么事情）。

今天我们来说一下基础的遍历问题

一般我们在js的基础学习中常会碰到到下面几种类型的数据
数组/字符串/对象

第一种利用for循环

最简单也是最清晰、也是代码量最大的，就是通过 for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]); 
}
//red green blue

第二种就是For in

For in
在数组中
for（var i in arr）I 是下标

var arr = ['red','green', 'blue']
for(index in arr){
	console.log(index)
}
//0 1 2

但在对象中for（var i in obj）这里的下标i是键名（字符串）

var obj = {name:xiaoming,age:18}
for(item in obj){
	console.log(item)
}
//name age

结合上面的两个例子,分析得出:
for … in 循环返回的值都是数据结构的 键值名。
遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
for … in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。
特别情况下, for … in 循环会以任意的顺序遍历键名
总结一句: for in 循环特别适合遍历对象。
for…in 无法遍历伪数组

下面是js获取的Dom对象伪数组使用for in遍历打印出的结果

第三种是ES6新增方法For…of

for（var v of arr）v 是属性值
for of并不能遍历对象
for of 特点
for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
对象,没有 Symbol.iterator这个属性,所以使用 for of会报 obj is not iterable
for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。
提供了遍历所有数据结构的统一接口
也不能遍历伪数组
下面是js获取的Dom对象伪数组使用for of遍历打印出的结果

深度总结一下：只要有 iterator 接口的数据结构,都可以使用 for of循环。
常见的有下面几种
数组 Array
Map结构
Set结构
String
arguments对象
Nodelist对象, 就是获取的dom列表集合

有的时候我们想让对象可以使用 for of循环怎么办?
可以使用 Object.keys() 获取对象的 key值集合后,再使用 for of进行循环遍历操作

第四种map

.map(fun())映射‘遍历’ 有返回值
map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。无法遍历伪数组

var numbers = [1, 2, 3];
var res = numbers.map(function (n) {
  return n + 1;
});
res// [2, 3, 4]
numbers
// [1, 2, 3]

上面代码中，numbers数组的所有成员依次执行参数函数，运行结果组成一个新数组返回，原数组没有变化。。
map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

[1, 2, 3].map(function(value, index, arr) {
  return value* index;
});
// [0, 2, 6]

上面代码中，map方法的回调函数有三个参数，value为当前成员的值，index为当前成员的位置，arr为原数组（[1, 2, 3]）

第五种forEach

.forEach() 遍历 无返回值

forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。
这就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。
forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。

function log(value, index, array) {
  console.log('[' + index + '] = ' + value);
}
[2, 5, 9].forEach(log);
// [0] = 2	
// [1] = 5
// [2] = 9

注意：
forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用for循环。

arr.forEach(function(value, index, arr) {
            if (arr[index] === 2) return;
            console.log(arr[index]);
        })
        //1 3

var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 2) break;
  console.log(arr[i]);
}
//1

注意：
forEach虽然可以遍历伪数组 但是最好不要使用forEach去遍历伪数组

总结：
凡是部署了interator接口的数据格式，都能用for of来遍历
for of的出现，为了统一遍历的方式
真数组的遍历方式 for(var I in arr)\for(var v in arr)\for循环\while循环\map方法\forEach方法
对象的遍历方式 for(var I in obj) Object.keys()
伪数组的遍历方式最好使用for循环