深入浅出ES6(二):迭代器和for-of循环

前言

原文线上地址

最近经常去听门户的小伙伴的分享,非常的实用,内容属干货一类,都是实际工作中总结出来的东西,很值得学习。其中有小伙伴推荐一本es6深入浅出的书,看后觉得不错,现将相应的笔记记录下来。

es6

从迭代和循环说起

很久很久以前,我们经常用如下的代码来访问数组中的元素

1
2
3
4
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}

有一天es5、es6来临后,我们可以这样

1
2
3
4
myArray.forEach(function (value) {
console.log(value);
});

有木有觉得这种写法简洁了许多,爽了许多,再也不用写该死的循环了

但是你不能使用break语句中断循环,也不能使用return语句返回到外层函数。

但是你不能使用break语句中断循环,也不能使用return语句返回到外层函数。

但是你不能使用break语句中断循环,也不能使用return语句返回到外层函数。

重要的话说三遍

不要用for in去遍历数组

  1. 在这段代码中,赋给index的值不是实际的数字,而是字符串“0”、“1”、“2”,此时很可能在无意之间进行字符串算数计算,例如:“2” + 1 == “21”,这给编码过程带来极大的不便。

  2. 作用于数组的for-in循环体除了遍历数组元素外,还会遍历自定义属性。举个例子,如果你的数组中有一个可枚举属性myArray.name,循环将额外执行一次,遍历到名为“name”的索引。就连数组原型链上的属性都能被访问到。

1
2
3
4
5
6
7
var arr = [1, 2, 3, 4]
arr.sex = 'boy'
for (var key in arr) {
console.log(arr[key]) // 1, 2, 3, 4, boy
}
  1. 最让人震惊的是,在某些情况下,这段代码可能按照随机顺序遍历数组元素。
  2. 简而言之,for-in是为普通对象设计的,你可以遍历得到字符串类型的键,因此不适用于数组遍历。

强大的for-of循环

es6中我们还可以通过另外一种方式去遍历数组元素,便是for of

1
2
3
4
var arr = [1, 2, 3, 4]
for (var val of arr) {
console.log(val) // 1, 2, 3, 4
}

优势

  1. 最简洁、最直接的遍历数组的方式
  2. 这种方式避开了for in的所有缺陷
  3. 与forEach方式不同,其可以continue breack和return