深入浅出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