美文网首页让前端飞
遍历数组的几种方法比较

遍历数组的几种方法比较

作者: 唐井儿_ | 来源:发表于2019-10-22 14:02 被阅读0次

    一、比较

    1.for原始写法

    const arr = ['a', 'b', 'c', 'd'];
    for (let i = 0; i < arr.length; i++) {
      console.log(`${i}:${arr[i]}`);
    }
    //0:a 1:b 2:c 3:d
    

    特点:写法较繁琐
    2.forEach

    arr.forEach(function (item, index, self) {
      console.log(`${index}:${item}`);
    })
    //0:a 1:b 2:c 3:d
    

    特点:无法中途跳出循环,break或return都不行
    3.for...in

    for (let key in arr) {
      console.log(key);
    }
    //0 1 2 3
    

    特点:遍历的是数组的键名,且会遍历原型链上的键,有时候遍历顺序不可确定,主要是为遍历对象设计
    4.for...of

    for (let item of arr) {
      console.log(item);
    }
    //a b c d
    

    特点:写法简洁,无for...in遍历的缺点,可以中途退出(return/break/continue)

    二、应用

    1.边遍历边删除

    for (let i = 0; i < arr.length; i++) {
      let item = arr[i];
      if (item == 'b') {
        arr.splice(i, 1);
      }
      console.log(`${i}: ${item}`);
    }
    // 0:a 1:b 2:d
    

    删除时需改变下标,否则会漏掉一个,因为一旦执行splice方法,则会实时改变数组本身,所以需手动移动下标(i--),只有原始for循环可实现,for...in、forEach等都不能手动改变下标。

    for (let i = 0; i < arr.length; i++) {
      let item = arr[i];
      if (item == 'b') {
        arr.splice(i, 1);
        i--;
      }
      console.log(`${i}: ${item}`);
    }
    // 0:a 0:b 1:c 2:d
    

    参考:《阮一峰 es6入门》

    相关文章

      网友评论

        本文标题:遍历数组的几种方法比较

        本文链接:https://www.haomeiwen.com/subject/kfjqvctx.html