T O P

[资源分享]     Array循环for、for in、for of、forEach各间优劣

  • By - 楼主

  • 2021-02-02 11:20:00
  • JavaScript中有多种循环Array的方式,你是否常常分不清他们的细微差别,和适用场景。本文将详细梳理各间的优缺点,整理成表以便对比。

    循环 可访问element 可访问index 可迭代property 支持中断 支持await 支持任意位置开始
    for ×
    for in × ×
    forEach × × × ×
    for of × ×

    示例地址

    for (ES1)

    这个循环方式历史悠久,从ECMAScript 1就被支持。

    const arr = ['a', 'b', 'c'];
    arr.prop = 'property value';
    
    for (let index=0; index < arr.length; index++) {
      const elem = arr[index];
      console.log(index, elem);
    }
    
    // Output:
    // 0, 'a'
    // 1, 'b'
    // 2, 'c'
    

    for循环方式通用,迭代过程可以访问元素和当前元素下标索引,但是语法上略显冗长。

    for in (ES1)

    for in 的历史同for一样悠久。

    const arr = ['a', 'b', 'c'];
    arr.prop = 'property value';
    
    for (const key in arr) {
      console.log(key);
    }
    
    // Output:
    // '0'
    // '1'
    // '2'
    // 'prop'
    

    for in 用来循环数组不是一个合适的选择。

    • 迭代的是属性key,不是值
    • 由于属性 key 是字符串,迭代出的元素索引是 string,不是 number.
    • 迭代的是数组实例上所有可枚举的属性key,而不是数组内元素。

    如果你想获取一个对象所有的可枚举属性(包含原型链上的),那么 for in 倒是可以胜任,若仅仅是对象自身声明的属性,那 Object.keys 更合适。

    forEach (ES5)

    鉴于 forfor-in 都不特别适合在 Arrays 上循环,因此在ECMAScript 5中引入了辅助方法:Array.prototype.forEach.

    const arr = ['a', 'b', 'c'];
    arr.prop = 'property value';
    
    arr.forEach((elem, index) => {
      console.log(elem, index);
    });
    
    // Output:
    // 'a', 0
    // 'b', 1
    // 'c', 2
    

    这个方法很方便,它让我们可以访问数组元素和数组元素下标,而不需要做太多的事情。箭头函数(在ES6中引入)使该方法在语法上更加优雅。

    forEach 主要确定是:

    • 循环内部不支持 await 操作。
    • 即使找到你想要的元素,也无法中断循环。

    要实现中断循环,可以使用同期引入的 Array.prototype.same 方法。some 循环遍历所有 Array 元素,并在其回调返回一个真值时停止。

    const arr = ['red', 'green', 'blue'];
    arr.some((elem, index) => {
      if (index >= 2) {
        return true; //结束循环
      }
      console.log(elem);
      // 隐式返回假值 undefined,继续循环
    });
    
    // Output:
    // 'red'
    // 'green'
    

    for of (ES6)

    for of 是 ECMAScript 6 新引入的语法。

    const arr = ['a', 'b', 'c'];
    arr.prop = 'property value';
    
    for (const elem of arr) {
      console.log(elem);
    }
    // Output:
    // 'a'
    // 'b'
    // 'c'
    

    for of 很适合遍历数组:

    • 迭代所有数组元素
    • 内部支持 await,甚至是 ES2018 中引入的 for-await-of 语法
    • 可以使用 break 和 continue 跳出循环

    for-of 的另一个好处是,我们不仅可以遍历数组,还可以遍历任何可迭代对象(例如map)

    const myMap = new Map()
      .set(false, 'no')
      .set(true, 'yes')
    ;
    for (const [key, value] of myMap) {
      console.log(key, value);
    }
    
    // Output:
    // false, 'no'
    // true, 'yes'
    

    遍历 myMap 会生成[key, value]对,对其进行解构方便直接访问。

    如果你在循环中需要感知当前元素索引,可以通过 Array 方法 entries 返回可迭代的 [index,value]对。 和map一样的解构直接访问index、value:

    const arr = ['chocolate', 'vanilla', 'strawberry'];
    
    for (const [index, value] of arr.entries()) {
      console.log(index, value);
    }
    // Output:
    // 0, 'chocolate'
    // 1, 'vanilla'
    // 2, 'strawberry'
    

    循环体内 await 测试

    准备如下代码用于测试循环体内 awaitgetFruit 模拟远程服务延迟返回。

    const fruits = ["apple", "grape", "pear"];
    
    const sleep = (ms) => {
      return new Promise((resolve) => setTimeout(resolve, ms));
    };
    
    const getFruit = (fruit) => {
      return sleep(2000).then((v) => fruit);
    };
    

    先看 for of, 元素之间会按预期间隔输出。

    (async function(){
        console.log('start');
        for (fruit of fruits) {
            const element = await getFruit(fruit);
            console.log(element);
        }
        console.log('start');
    })();
    
    //3个元素 间隔2s输出
    "start"
    "apple"
    "grape"
    "pear"
    "end"
    

    再看 forEach, 注意 forEach 调用后直接返回输出 loop end, 间隔2s 后同时输出了后面结果,并没有按预期各个间隔输出。

    (async function () {
    
      console.log("foreach loop start ....");
      fruits.forEach(async value => {
        const element = await getFruit(value);
        console.log(element);
      });
      console.log("foreach loop end ....");
    
    })();
    
    //同时输出
    foreach loop start ....
    foreach loop end ....
    //间隔2s 后同时输出下面3个
    apple
    grape
    pear
    

    示例地址

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册