JavaScript for、for..in、for..of、forEach的区别

墨蓝 2023-09-30 11:12 49阅读 0赞

JS中循环语句众多，你是否也有用的时候突然不知道如何选择经历，今天就代码君就来总结一下。

# for 我很“low”但也很强大 #

`for`是最基础的循环语句，语法想必不用多说。`for`只管循环，取值的工作有用户决定。`for`的自由度很高，可以拿来遍历数组，也可以拿来遍历对象。

遍历数组：

let arr = [1, 2, 3];
    for (let i=0; i<arr.length; i++) {
        
    	console.log(arr[i]);
    }
    // Output:
    // 1
    // 2
    // 3

遍历对象：

let obj = {
        a:1, b: 2, c: 3};
    let keys = Object.keys(o);
    for (let i=0; i<keys.length: i++) {
        
        let key=keys[i], val=obj[key]
    	console.log(key, val);
    }
    // Output:
    // a 1
    // b 2
    // c 3

`for`循环的强大之处，就在于它的自由度，其他循环语句能做的`for`能做，它们不能做的`for`也能做。当你不知道用那种循环语句时，用`for`准没错。

但是“全能”的弊处就是麻烦，所以想写出优雅的代码，你应该用合适的语句做合适的事。

# 2. for…of 遍历数组 #

`for..of`专门用来遍历数组或可迭代对象：

let arr = [1, 2, 3];
    for (let val of arr) {
        
    	console.log(val);
    }

相比使用`for`遍历数组，`for..of`更加简洁。

只要是可迭代对象（`object[Symbol.iterator]`不为空），`for..of`都可以遍历，比如生成器对象：

function* fibo() {
        
      let temp, num1 = 0, num2 = 1;
      while (1) {
        
        yield num1;
        temp = num1;
        num1 = num2;
        num2 += temp;
      }
    }
    for (let val of fibo()) {
        
    	if (if val > 10) {
        
    		break;
    	}
    	console.log(val);
    }
    // Output:
    // 0
    // 1
    // 1
    // 2
    // 3
    // 5
    // 8

`for..of`还可以配合`Object.keys`、`Object.values`、`Object.entries`来遍历对象的键、值、键值对：

# 3. for…in 遍历对象属性 #

`for..in`用来遍历一个对象的除`Symbol`以外的**可枚举**属性，还**包括继承**的属性。

let obj = {
        a: 1, b: 2, c: 3};
    for (let key in obj) {
        
    	console.log(key);
    }
    // Output:
    // a
    // b
    // c

数组也是一个的特殊的对象，也可以用`for..in`，它的属性就是数组的下标索引：

let arr = [1, 2, 3];
    for (let key in arr) {
        
    	console.log(key);
    }
    // Output:
    // 0
    // 1
    // 2

JS万物皆对象，所以都可以用`for..in`遍历，甚至`null`、`undefined`。

for (let key in null) {
        
    	console.log(key);
    }
    // Output:
    for (let key in undefined) {
        
    	console.log(key);
    }
    // Output:
    for (let key in 'abc') {
        
    	console.log(key);
    }
    // Output:
    // 0
    // 1
    // 2
    // fetch
    // 这个fetch是从String.prototype继承过来的可枚举属性

`for..in`由于继承的特性，所以有些不确定的因素。比如，你不知道它会从父类原型上继承哪些可枚举属性。这些不确定因素，可能在开发中造成bug，所以除了遍历普通对象，请谨慎使用它。

# 4. forEach 数组遍历 #

`forEach`来自`Array.prototype.forEach`，它是数组圆原型的方法，所以只能用来遍历数组。

let arr = [1, 2, 3];
    arr.forEach(function(val) {
        
    	console.log(val);
    })
    // Output:
    // 1
    // 2
    // 3

上面是最常规的用法，`forEach`的完整语法如下：

> arr.forEach(callback(currentValue \[, index \[, array\]\])\[, thisArg\])

*  `callback`回调函数，该函数接收一至三个参数：
    
     *  `currentValue`当前值。
     *  `index` 可选，当前索引。
     *  `array`可选，当前数组。
 *  `thisArg`可选，`callback`中 `this`的值，若未指定则为全局对象。

可以通过`callback`的`index`参数获取当前的下标：

let arr = [1, 2, 3];
    arr.forEach(function(val, index) {
        
    	console.log(index, ' => ', val);
    })
    // Output:
    // 0 => 1
    // 1 => 2
    // 2 => 3

可以用`callback`的`array`来操作当前数组，通常情况下是没有副作用的。比如你可以向一个正在用`forEach`遍历的数组中添加元素，这个操作并不会影响`forEach`的输出。

let arr = [1, 2, 3];
    arr.forEach(function(val, index, arr) {
        
    	console.log(index, ' => ', val);
    	arr.push(9);
    })
    // Output:
    // 0 => 1
    // 1 => 2
    // 2 => 3
    console.log(arr); // [1, 2, 3, 9, 9, 9]

这是因为`forEach`的在遍历之初会获取数组长度，然后使用`while`遍历数组，对数组元素的访问都是通过下标进行的。`forEach`的次数是由数组遍历之初的长度决定的。

根据“ecma262”规范的描述，我们可以大致还原“forEach”函数：

这就是`forEach`的原理。

`forEach`的第二个参数`thisArg`是用来作为`callback`的`this`的，实际开发中基本用不到。

# 5. 总结 #

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/732f00d16bf049288d4060c1d4e7d30a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Luj56CB5ZCbLg==,size_20,color_FFFFFF,t_70,g_se,x_16