JavaScript 有哪些常用的遍历循环方法总结

雨点打透心脏的1/2处 2022-05-25 07:36 253阅读 0赞

## 一.for循环 ##

最常见的遍历方法，用来遍历数组，学过编程语言的基本都知道怎么用，如下：

var a = [1, 2, 3, 4, 5];
    for (var i = 0; i < a.length; i++) { console.log(a[i]); }

上面这是最简单的用法，我在有些书里还经常看到这种用法，贴出来供参考：

var a = [1, 2, 3, 4, 5];
    for (var i = 0, value; value = a[i++];) {
      console.log(value);
    }

## 二.forEach，some和every ##

对于数组来说，有时候经常有遍历所有属性值的需求，javascript有三种数组的辅助迭代器，每种方法的参数都是一个回调函数，回调函数的参数便是数组每一个属性对应的值，下面一一说明：

*  forEach(..)：会遍历数组中的所有值并忽略回调函数的返回值

var a = [1, 2, 3, 4, 5];
    a.forEach(function (i) {
      console.log(i);//1 2 3 4 5
      // return true ,return false 或者不写返回值，结果都一样
    });

*  some(..):一直运行直到回调函数返回 true (或者“真”值).返回true时相当于在for循环里break,会提前终止循环

var a = [1, 2, 3, 4, 5];
    a.some(function (i) { 
      if (i === 3) {
        return true;
      }
      console.log(i); //1 2
      return false;//回调函数默认返回false，这里不写也可以
    });

*  every(..):一直运行直到回调函数返回 false (或者“假”值).返回false时相当于在for循环里break,会提前终止循环

var a = [1, 2, 3, 4, 5];
    a.every(function (i) { 
      if (i === 3) {
        return false;
      }
      console.log(i);//1 2
      return true;//回调函数默认返回false，这里return true必须要写，否则在遍历第一个属性值之后就会终止循环
    });

## 三.for..in和for..of ##

*  for..in循环会遍历对象中的所有可枚举属性

关于对象属性是否可枚举可以参考我的上一篇博客

for..in循环可遍历对象的所有可枚举属性，所以一般用来遍历对象而不是数组，否则如果数组对象包含其他可枚举属性，遍历结果就会和期望结果不同：

var a = [1,2,3];
    a.ex = "ex";
    //注意这里遍历的只是属性
    for(var i in a){
      console.log(i); // 0 1 2 ex
    }

*  for..of :为了弥补for..in循环遍历数组的缺陷，ES6推出了for..of循环

var a = [1,2,3];
    a.ex = "ex";
    //而这里遍历的是属性的值
    for(var i of a){
      console.log(i); // 1 2 3
    }

由上面的测试可以看出for..in循环默认遍历的是可枚举属性列表，所以更适合遍历对象   
而for..of循环默认遍历数组每一项的值，所以更适合遍历数组，   
虽然数组也算是对象，但这里数组指的只是Array对象（因为Array对象内置了@@iterator，这里不讨论）而不包括伪数组对象（具有length属性且可以通过下标访问属性值），如执行下面的代码就会报错：

var a = {
      length:2,
      0:1,
      1:"lian"
    }
    for(var i of a){
      console.log(i); 
    }

## 四.其他 ##

我们在网页开发时经常会用到map方法，map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var a = [1,2,3];
    var result = a.map(function (i) { return i*3; });
    console.log(result); //[ 3, 6, 9 ]

上面的代码就是每次取出a的每一个属性值，调用方法生成一个新的结果值，然后将结果值存入返回值的数组中，所以result是一个数组，每一项的值是a每一项的值乘以3的结果   
map在网页开发中通常用来根据data值批量生成DOM节点，也可以用来从新组装新对象总之方法很多