Cai's

遍历数组，遍历对象属性，甚至是遍历字符串、Map、Set等一切可迭代的对象。是我们在编程中经常要做的事情。JavaScript也提供了诸多方法来实现遍历。

原始的遍历方式

for (var index = 0, len = myArray.length; index < len ; index++) {
  console.log(myArray[index]);
}

说实话，这样的遍历方式虽然原始，但是如果平时我们用于简单遍历数组的时候，感觉除了写起来比较不简洁美观，也没有太多缺点，相反他是效率最高的遍历方法（前端的数据量一般都比较小，所以效率不是首要考虑的，无需过早优化，应该把可读性，可维护性，可测试性放到首位）。

遍历数组forEach

[1, 2, , 4].forEach(function (value) {
  console.log(value);
});
//1、2、4

可以到MDN forEach这里去看forEach的polyfill实现。

Array.prototype除了forEach还有map、filter、reduce等方法，应该考虑语义和可读性选用相应的遍历方法:

如果你需要将数组按照某种规则映射为另一个数组，就应该用 map.
如果你需要进行简单的遍历，用 forEach 或者 for of.
如果你需要对迭代器进行遍历，用 for of.
如果你需要过滤出符合条件的项，用 filter.
如果你需要先按照规则映射为新数组，再根据条件过滤，那就用一个 map 加一个 filter.

遍历对象for…in

for…in语句以任意顺序遍历一个对象的可枚举属性（key值）。包括对象从其构造函数原型中继承的属性。但是有以下几个要点:

for…in不应该用于迭代一个Array，原因是Array重视迭代顺序。
如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性

更详细的清参考MDN for…in

ES6引入的神器for..of

可迭代对象（ iterable ）是包含 Symbol.iterator 属性的对象，与迭代器紧密相关。这个 Symbol.iterator 知名符号定义了为指定对象返回迭代器的函数。在 ES6 中，所有的集合对象（数组、 Set 与 Map ）以及字符串都是可迭代对象，因此它们都有默认的迭代器，所以我们可以很容易地遍历这些可迭代对象。可迭代对象被设计用于与 ES 新增的 for-of 循环配合使用。更具体的请参考文末所附的参考资料中的深入浅出ES6中的内容.

遍历数组、Set、Map：他们分别有keys()、values()、entries()三个迭代器

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();

data.set("title", "Understanding ES6");
data.set("format", "print");

// 与使用 colors.values() 相同
for (let value of colors) {
    console.log(value);
}

// 与使用 tracking.values() 相同
for (let num of tracking) {
    console.log(num);
}

// 与使用 data.entries() 相同
for (let entry of data) {
    console.log(entry);
}

遍历字符串

var message = "A 𠮷 B";

for (let c of message) {
    console.log(c);
}
//A (blank) 𠮷 (blank) B

遍历NodeList

//以前循环一个Nodelist有很多困难，现在Nodelist也有默认的迭代器了
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

循环一个拥有enumerable属性的对象
我们自己的对象,如果没有包含Symbol.iterator属性,有一个默认的迭代器的话是无法进行遍历的,但我们可以配合Object.keys()方法,Object.keys()和for…in遍历的区别只在于Object.keys()不会去找原型链的可迭代属性,可以理解为Object.keys()=for…in+hasOwnProperty()

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

参考资料

MDN forEach
MDN for…in
JS-对象无效属性与forEach——一个考题引起的思考
 深入浅出ES6-迭代器与生成器-可迭代对象与 for-of 循环

JavaScript遍历

原始的遍历方式

遍历数组forEach

遍历对象for…in

ES6引入的神器for..of

参考资料