es6之前的循环
传统的循环
var myArray = [0, 1, 2, 3];
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
打印结果:
0
1
2
3
ES5支持的forEach()
var myArray = [0, 1, 2, 3];
myArray.forEach(function (value) {
console.log(value);
});
打印结果:
0
1
2
3
这段代码看起来更加简洁,但这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。
for-in循环
var myArray = [0, 1, 2, 3];
for (var index in myArray) { // 千万别这样做
console.log(myArray[index]);
}
打印结果:
0
1
2
3
- 在这段代码中,赋给index的值是字符串“0”、“1”、“2”,而不是数字,稍不留意会导致字符串拼接而不是数字计算错误。
var myArray = [0, 1, 2, 3];
myArray.test = "test";
for (var index in myArray) { // 千万别这样做
console.log(myArray[index]);
}
看上面这段代码,为myArray
添加了一个属性test
,执行结果如下:
0
1
2
3
test
- for-in循环会遍历自定义属性。就连数组原型链上的属性都能被访问到。
- 遍历的顺序不能保证。
强调一下:for-in是为普通对象设计的,你可以遍历普通对象的属性,键都是字符串,不适用于数组遍历。
ES6的for-of循环
var myArray = [0, 1, 2, 3];
for (var value of myArray) {
console.log(value);
}
打印结果:
0
1
2
3
for-of:
- 这是最简洁、最直接的遍历数组元素的语法
- 这个方法避开了for-in循环的所有缺陷
- 与forEach()不同的是,它可以正确响应break、continue和return语句
for-of循环可以遍历其它的集合
for-of循环可以遍历Map,Set,字符串等对象
for-of字符串遍历
它将字符串视为一系列的Unicode字符来进行遍历:
var str = '测试代码';
for (var chr of str) {
console.log(chr);
}
结果:
测
试
代
码
for-of Set遍历
var mySet = new Set();
mySet.add('test1');
mySet.add('test2');
for (var word of mySet) {
console.log(word);
}
结果:
test1
test2
for-of Map遍历
test8(){
var myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
for (var [key, value] of myMap){
console.log(key + ':' + value);
}
}
结果:
key1:value1
key2:value2
解构(destructuring)
内建的Object.keys()
test9(){
var myObj = {
key1: 'value1',
key2: 'value2'
};
for (var key of Object.keys(myObj)){
console.log(key);
}
}
结果:
key1
key2
迭代器
for-of循环语句通过方法调用来遍历各种集合。数组、Maps对象、Sets对象以及其它在我们讨论的对象有一个共同点,它们都有一个迭代器方法。
只要实现了迭代器的对象都可以使用for-of进行迭代,任何对象都可以实现自己的迭代器。
TODO 迭代器