JavaScript 6 种循环的使用与比较

前言

JavaScript 中用来写循环的一种有 6 种方法。最常见的 for 循环，while 循环，map 循环，forEach 循环，以及 for in 与 for of 循环。今天就来分享一下这 6 种循环的用法及异同。在开始之前先介绍一下谷歌浏览器的工具之一 Profile，这个工具可以查看每个方法的执行时间。文中将使用该工具对比每个循环的执行时间，以此来判断性能差异。

一、for 循环

用法：

var arr = [1,2,3,4,5,6,7,8,9,10];
for(var i = 0;i<arr.length;i++){
    if(i==1){
     console.log(i);
     break;  
    };    
}
// 1

for 循环可以根据条件通过 break 跳出循环。以下是执行时间，0.1 ms。

二、while 循环

用法：

 var i=0;
 while (i<=1){
        i++;
        console.log(i);
        break
 }

while 循环主要是执行满足 while 条件的代码，也可以通过 break 跳出循环。以下是执行时间，0.2 ms。

注意点：
while 循环还有个 do while，表示至少执行一次。

  var i=0;
  do{
     console.log(i)
     i++;
  }while(i<=1);

三、map 循环

用法：
map 循环接受 3 个参数，第一个为数组中每个对象，第二个为对象下标，第三个为源数组。

var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.map(function (item) {
        if(item == 1){
            console.log(item);
        }
    })

map 循环没法通过 break 中断，以下是执行时间，一共 0.3 ms。

注意点：
map 循环是有返回值的。如果循环中没有写返回值，默认返回每个 item 都是 undefined 的数组。如果在循环中加了返回值，则返回值就是数组的每个 item。返回值不会影响原数组。

    var arr = [1,2,3,4,5,6,7,8,9,10];
    var result = arr.map(function (item) {
        if(item == 1){
            console.log(item);
            return item
        }
    })
    console.log(result);
    console.log(arr)

四、forEach 循环

用法：
forEach 循环接受 3 个参数，第一个为数组中每个对象，第二个为对象下标，第三个为源数组。

var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.forEach(function (item,index,arr) {
        if(item == 1){
            console.log(item);
        }
    })

forEach 循环也没有 break，执行时间为 0.4 ms。

forEach 虽然与 map 循环很相似，区别就是 forEach 没有返回值。

 var arr = [1,2,3,4,5,6,7,8,9,10];
    var result = arr.forEach(function (item,index,arr) {
        if(item == 1){
            console.log(item);
            return item;
        }
    })
    console.log(result)

五、for in 循环

用法：
for in 中返回的是数组下角标 index，所以要想取得数组对象，需要通过数组[index]的形式。

var arr = [1,2,3,4,5,6,7,8,9,10];
    for (var index in arr){
        if(arr[index] == 1){
            console.log(arr[index]);
            break;
        }
    }

for in 循环也可以加 break 中止，执行时间为 0.1 ms。

注意点：
for in 循环不仅可以循环数组，还可以循环对象，取得 key 值。

  var arr = {a:1,b:2};
    for (var key in arr){
        console.log(key);
    }

六、for of 循环

用法：
for of 循环是 ES6 新出的，只能遍历数组，得到的是数组的 item 对象，而不是下标。

    var arr = [1,2,3,4,5,6,7,8,9,10];
    for (var item of arr){
        if(item == 1){
            console.log(item);
            break;
        }
    }

for of 循环也可以加 break 中止，执行时间为 0.1 ms。

七、区别

1. for 循环是在有 js 的时候就出来了，而 map 和 forEach 这两个方法都是 ES5 时出来的，for of 循环是 ES6 出来的。
2. 通过以上的执行时间可以看出，相同的需求，使用 for 循环，for of 循环，for in 循环效率最高。
3. map 循环与 forEach 循环的区别是 map 有返回值。
4. for in 循环与 for of 循环的区别是，for in 不仅可以遍历数组，还可以遍历对象。遍历数组时返回的是数组下标，遍历对象时返回的是对象 key。而 for of 只能遍历数组，返回的就是数组的 item。