JavaScript - 循环和迭代

用了这么久的 JS，经常被它的循环方法绕晕，这几种方法的区别，优劣，在此做一个详细总结。

  • for
  • while
  • forEach
  • for…in
  • for…of
  • map

🥈 for / 循环代码块一定的次数

一个for循环会一直重复执行，直到指定的循环条件为fasle。 JavaScript的for循环和Java与C的for循环是很相似的。一个for语句是这个样子的：

1
2
for ([initialExpression]; [condition]; [incrementExpression])
  statement

使用示例

1
2
3
for (var i = 0; i < options.length; i++) {
  statement
}

break

终止一个 for 循环

continue

跳过余下代码逻辑，直接进入下一个循环。


🥈 While / do…while

一个 while 语句只要指定的条件求值为真（true）就会一直执行它的语句块。一个 while 语句看起来像这样：

1
2
while (condition)
  statement

break

终止一个 while 循环

continue

跳过余下代码逻辑，直接进入下一个循环。


🥈 forEach / 数组遍历

forEach 是 ES5 中加入的新的函数，对数组的每个元素执行一次。

1
2
3
array.forEach(callback(currentValue, index, array){
    //do something
}, this)

优点是语法简洁；

缺点是不支持使用 break 来中断，也不能 return 进行返回。

配合箭头函数

1
array.forEach(n => console.log(n));

async

forEach 是不支持 async function 的。Polyfill

但可以创建自己的 asyncForEach 方法来方便使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// define
async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array)
  }
}

// using
const waitFor = (ms) => new Promise(r => setTimeout(r, ms))

const start = async () => {
  await asyncForEach([1, 2, 3], async (num) => {
    await waitFor(50)
    console.log(num)
  })
  console.log('Done')
}

start()

🥈 for…in / 遍历对象的属性

这个 for…in 语句循环一个指定的变量来循环一个对象所有可枚举的属性。JavaScript 会为每一个不同的属性执行指定的语句。

1
2
3
for (variable in object) {
  statements
}

for-in 是为普通对象设计的，可以遍历得到字符串类型的键，因此不适用于数组遍历。

  • 数组的 for-in 循环体除了遍历数组元素外，还会遍历自定义属性
  • 一些情况下，for…in 代码可能按照随机顺序遍历数组元素

🥈 for…of / 全新迭代器循环

for...of 是 ECMA2015 中新加入的，用于可迭代对象上创建循环。

像常见的 Array, Map, Set，String, Collection, 有enumerable属性的对象, generators 等。

缺点

没有 index，要自己实现。

语法

1
2
3
for (variable of object) {
  statement
}

示例（与 for…in 的区别）

下面的这个例子展示了 for…of 和 for…in 两种循环语句之间的区别。与 for…in 循环遍历的结果是数组元素的下标不同的是， for…of 遍历的结果是元素的值：

1
2
3
4
5
6
7
8
9
10
let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7" // 注意这里没有 hello
}

async

for…of 是支持异步使用的，这也是我们常用来进行 async 等待的方法。

1
2
3
4
5
let page = 0;
for (let i of array) {
  const products = await fetchProducts(conn, page)
  page++;
}

🥈 map

map reduce 是新的高阶函数。它遍历数组中的每一个元素，对期进行一些操作，然后返回一个新的数组。

配合箭头函数

1
array.map(n => console.log(n));

REF::