Javascript之for(in/of)、forEach用法的理解

开门见山，许多小伙伴对 for 语句应该再熟悉不过了，无论是前端遍历渲染还是 js 中的逻辑处理。但是要把 for 语句写得优雅，写得高效，理解它的用法就比较重要了。

目录

一、for (语句 1; 语句2; 语句3)

语句 1

语句 2

语句 3

二、for in 循环

三、for of 循环

四、forEach 循环

---

一、for (语句 1; 语句2; 语句3)

我们最常见的就是 for 语句了

for (语句 1; 语句2; 语句3)
{
    被执行的代码块
}

语句1 （代码块）开始前执行
语句2 定义运行循环（代码块）的条件
语句3 在循环（代码块）已被执行之后执行

for (var i = 0; i < x.length; i++) {
    //do something...
}

语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i = 0)。

语句 1 是可选的，也就是说不使用语句 1 也可以。

您可以在语句 1 中初始化任意（或者多个）值：

for (var i = 0, len = x.length; i < len; i++)
{ 
    document.write(x[i] + "<br>");
}

省略语句 1，在循环开始前已经对 i 进行初始化赋值

var i = 1, len = x.length;
for (; i < len; i++) { 
    document.write(x[i] + "<br>");
}

语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

PS：如果你省略了语句2，就必须要使用 break 进行跳出，否则循环将无法停止，导致 browser 崩溃。

语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+n)。

语句 3 也可以省略（比如当循环内部有相应的代码时）：

var i = 0, len = x.length;
for (; i < len;) { 
    document.write(cars[i] + "<br>");
    i++;
}

二、for in 循环

1、for in 语句将循环遍历对象的属性

var car = {
    brand: "BMW",
    type: "SUV",
    model: "X7"
}
var res = ""
for (x in car) {
    res = res+ car[x]
}
//结果res="BMWSUVX7"

2、使用 for in 去遍历数组，得到的 x 就是数组的索引 index。

const car = [{ name: 'BMW' }, { name: 'AUDI' }]
for (let x in car) {
  console.log(key)
}
//结果：
// 0
// 1

PS：for in 循环中可以使用 break 和 continue 进行中断，如循环体在函数中才可使用 return 来跳出，不建议与数组一起使用（会遍历原型链上的属性 method 和 name，且 for in 的 key 是 String 类型，有转换过程，开销比较大）

三、for of 循环

1、for of 是ES6的新特性，从而也是为了解决 for in 在处理数组时的不足。

2、for in 输出的是数组的 index 下标，而 for of 输出的是数组的每一项的值。

const arr = [1,2,3,4]
 
// for in
for (const key in arr){
    console.log(key) // 输出 0,1,2,3
}
 
// for of
for (const key of arr){
    console.log(key) // 输出 1,2,3,4
}

3、对于普通对象，没有部署原生的 iterator 接口，直接使用 for of 会报错，不过可以遍历带有iterator接口的，例如Set,Map,String,Array

var obj = {
   'name': 'KK',
   'age': 9
}
 
for(let key of obj) {
   console.log('for of obj', key)
}
// Uncaught TypeError: obj is not iterable

四、forEach 循环

1、语法如下：

array.forEach(function(currentValue, index, arr), thisValue)

forEach 更多的用来遍历数组、集合，forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，总返回undefined

var arr = [1,2,3,4];   
arr.forEach(alert); 
 
//等价于： 
var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
  alert(array[k]);
}

PS：forEach 对于空数组是不会执行回调函数的。清切在遍历跑完回调函数后，会隐性让index自增。

2、forEach() 本身是不支持的 continue 与 break 语句，我们可以通过 return 和 every 来实现。

2.1、使用 return 语句实现 continue 关键字的效果：

let arr = [1, 2, 3, 5, 9]
arr.forEach(item => {
  if (item % 2 === 0) {
    return
  }
  console.log('item', item)
})
/*
  item 1
  item 3
  item 5
  item 9
  undefined
*/

2.2、break 实现

var arr = [1, 2, 3, 4, 5]

arr.every(function (item) {
    console.log(item);
    return item !== 3;
})
/*
  1
  2
  3
  false
*/

3、forEach只支持同步代码，所以不能使用 await

最后欢迎各位补充及指正，其实知识和注意点还有很多~~