JS中的三种遍历方法:forEach,for...in,for...of

forEach方法

1、基本用法

相比于传统的JS遍历方法简单了许多,但是不足处在于不能中断循环,不能使用break语句或使用return语句。

['a', 'b', 'c'].forEach((v) => {
    console.log(v);
})
// 输出'a', 'b', 'c'

for…in方法

1、基本用法

简单来说,for…in是用来遍历键名的方法。

var k = ['a', 'b', 'c'];
for (i in k) {
    console.log(i);
}
// 输出为'0','1','2',且为字符串

2、可以遍历字符串(同for…of方法)

var k = 'abc';
for (i in k) {
    console.log(k[i]);
}
// 输出为'a','b','c'

3、可以使用break终止(同for…of方法)

var k = [10,20,30];
for (i in k) {
    console.log(k[i]);
    if (k[i]>15) {break;}
}
// 输出为10, 20

4、可以遍历对象

var k = {
  'a': 'x',
  'b': 'y',
  'c': 'z'
};
for (i in k) {
    console.log(k[i]);
}
// 输出为'x', 'y', 'z'

for…of方法

1、基本用法

简单来说,for…of是用来遍历键值的方法。

var k = ['a', 'b', 'c'];
for (v of k) {
    console.log(v);
}
// 输出为'a','b','c'

2、可以遍历字符串(同for…in方法)

var k = 'abc';
for (v of k) {
    console.log(v);
}
// 输出为'a','b','c'

3、可以使用break终止(同for…in方法)

var k = [10,20,30];
for (v of k) {
    console.log(v);
    if (v>15) {break;}
}
// 输出为10, 20

4、可以支持Map和Set对象遍历

var k = new Map([['a', 1], ['b', 2], ['c', 3]]);
for ([i, v] of k) {
    console.log(v);
}
// 输出为1, 2, 3
var k = new Set([1,1,2,2,3,3]);
for (v of k) {
    console.log(v);
}
// 输出为1,2,3