Fork me on GitHub

JavaScript中的循环数组遍历

  • 在 JavaScript 中提供了如下四种循环遍历数组元素的方式:
    • for:循环遍历数组元素最简单的方式。
    • for…in:循环遍历对象的属性
    • forEach:调用数组的每个元素,并将元素传递给回调函数。
    • for…of:循环遍历集合对象的属性值
for
  • 这是循环遍历数组元素最简单的方式。
    1
    2
    3
    for(i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    }
for…in
  • for…in语句以任意顺序(即显示顺序不是可控的)遍历一个对象的可枚举属性:

    • 对于数组即是数组下标,对于对象即是对象的 key 值
      1
      2
      3
      for (var index in myArray) {
      console.log(myArray[index]);
      }
  • 不推荐使用for…in语句。

  • 注意:for…in遍历返回的对象属性都是字符串类型,即使是数组下标,也是字符串 “0”, “1”, “2” 等等。如果使用字符串的 index 去参与某些运算(“2” + 1 == “21”),运算结果可能会不符合预期。例如以下代码:

    1
    2
    3
    4
    var myArray=[1, 2, 3, 4, 5];
    for (var index in myArray) {
    console.log(index + 1); // 01 11 21 31 41
    }
  • 还有一个缺点是不仅数组本身的元素将被遍历到用户自己为数组添加的一些属性也会被遍历到,甚至数组原型链上的属性也可能被遍历到

    1
    2
    3
    4
    5
    6
    7
    8
    var myArray = new Array(1, 2, 3, 4,5 );
    myArray.name = "hello";
    Array.prototype.method = function(){
    console.log("world");
    }
    for (var index in myArray) {
    console.log(index); // 0 1 2 3 4 name method
    }
  • for…in设计的目的是用于遍历包含键值对的对象,对数组并不是那么友好。

  • 遍历数组的话还是用es6的for…of循环遍历比较好。
for…of
  • for…of语句为各种 collection 集合对象专门定制的,遍历集合对象的属性值,注意和for…in的区别。

    1
    2
    3
    for (var value of myArray) {
    console.log(value);
    }
  • for…offor…in的区别:

    • 推荐在循环对象属性的时候,使用for…in,在遍历数组的时候的时候使用for…of
    • for…in循环出的是keyfor…of循环出的是value
    • 注意,for…of是ES6新引入的特性。修复了ES5引入的for…in的不足。
    • for…of不能循环普通的对象,需要通过和Object.keys()搭配使用。
forEach
  • forEach法用于调用数组的每个元素,并将元素传递给回调函数
  • 注意:在回调函数中无法使用 break 跳出当前循环,也无法使用 return 返回值
    1
    2
    3
    myArray.forEach(function (value) {
    console.log(value);
    });
------ 本文结束 ------