遍历语法

for 循环/while 循环

JavaScript 提供多种遍历语法。最原始的写法就是 for 循环。

let arr = [1,2,3,4,5];

for (var index = 0; index < arr.length; index++) {
  console.log(myArray[index]); // 1 2 3 4 5
}

优点

支持中途跳出，可使用 break 命令或 return 命令。

缺点

写法相对麻烦。

forEach

数组提供内置的 forEach 方法

let arr = [1,2,3,4,5];

arr.forEach((element,index) => {
  console.log(element); // 1 2 3 4 5
})

缺点: 这种写法的问题在于, 无法中途跳出 forEach 循环, break 命令或 return 命令都不能生效。

for...in

for……in 用于遍历对象所有的可枚举属性, 功能类似于 Object.keys()。

let obj = {
  name: 'cloud',
  phone: '157xxxx2065'
}

for (let prop in obj) {
  console.log(prop); // name phone
}

可能有朋友会问, 不可枚举的对象有哪些呢? 比如 constructor, 数组的 length 就属于不可枚举属性。

let arr = [10, 20, 30, 40, 50]

for (let prop in arr) {
  console.log(prop) // '0' '1' '2' '3' '4'
}

优点

支持中途跳出，可使用 break 命令或 return 命令。

缺点：

数组的键名是数字, 但是 for...in 循环是以字符串作为键名 “0”、“1”、“2” 等等。
for...in 循环主要是为遍历对象而设计的, 不适用于遍历数组

for...of

for……of 是 ES6 新增的遍历方式, 它提供了统一的遍历机制。所有实现了 [Symbol.iterator] 接口的对象都可以被遍历。for...of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象 (比如 arguments 对象、DOM NodeList 对象)、Generator 对象, 以及字符串。

优点：

有着同 for...in 一样的简洁语法, 但是没有 for...in 那些缺点;
不同用于 forEach 方法, 它可以与 break、continue 配合使用；
提供了遍历所有数据结构的统一操作接口；

缺点：

不支持配合 return 使用；

下面是一个使用 break 语句, 跳出 for...of 循环的例子。

for (var n of fibonacci) {
  if (n > 1000)
    break
  console.log(n)
}

上面的例子, 会输出斐波纳契数列小于等于 1000 的项。如果当前项大于 1000, 就会使用 break 语句跳出 for...of 循环。

for...of 获取索引

entries() 返回一个遍历器对象, 用来遍历 [键名, 键值] 组成的数组。对于数组, 键名就是索引值；对于 Set, 键名与键值相同。Map 结构的 Iterator 接口, 默认就是调用 entries 方法。
keys() 返回一个遍历器对象, 用来遍历所有的键名。
values() 返回一个遍历器对象, 用来遍历所有的键值。

// demo
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
  console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

类似数组的对象

类似数组的对象包括好几类。下面是 for...of 循环用于字符串、DOM NodeList 对象、arguments 对象的例子。

// 字符串
let str = "hello";

for (let s of str) {
  console.log(s); // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");

for (let p of paras) {
  p.classList.add("test");
}

// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b');
// 'a'
// 'b'

并不是所有类似数组的对象都具有 Iterator 接口, 一个简便的解决方法, 就是使用 Array.from 方法将其转为数组。

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

// 报错
for (let x of arrayLike) {
  console.log(x);
}

// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);  // 'a' // 'b'
}

普通的对象

对于普通的对象, for...of 结构不能直接使用, 会报错, 必须部署了 Iterator 接口后才能使用。

let es6 = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
};

for (let e in es6) {
  console.log(e);
}
// edition
// committee
// standard

for (let e of es6) {
  console.log(e);
}
// TypeError: es6 is not iterable

解决方法是, 使用 Object.keys 方法将对象的键名生成一个数组, 然后遍历这个数组。

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