js 使用循环遍历语句有很多种，比如  for ， forEach ， for...in ，for...of  等等

for

普通的循环遍历，根据指定的长度遍历，不能遍历对象

for (let i = 0; i < 10; i++) {
  console.log(i);
}

forEach

forEach 是用来遍历数组的，只能遍历数组，不能遍历 NodeLists

let arr = [1, 2, 3, 4];
arr
  .forEach((item, idx, arr) => {
    console.log(item);
  })
  [
    // forEach执行async函数
    (1, 2, 3)
  ].forEach(async (item) => {
    let a = await item;
  });

for 和 forEach 区别

  • for 循环要提前知道要遍历的次数，而 forEach 不需要
  • for 可以灵活控制循环的次数，forEach 只能遍历整个数组
  • for 可以中途退出，forEach 不行

for...in

for...in 语句是以任何顺序遍历一个对象的可枚举属性，**for...in 会遍历原型中的属性和方法，**一般配合hasOwnProperty来避免这个问题

function Person() {
  this.name = 'kelen';
}
var obj = { age: 19 };
obj.__proto__ = new Person();
for (k in obj) {
  // 打印出原型中的属性和方法
  console.log(k); // age name
}
for (k in obj) {
  if (obj.hasOwnProperty(k)) console.log(k); // age
}

for...of

for...of 语句创建一个循环来迭代可迭代的对象，可以遍历的对象有String，Array，TypedArray，Map，Set，如果遍历一个 Object，会报错o is not iterable

let animals = ['🐔', '🐷', '🐑', '🐇'];
let names = ['Gertrude', 'Henry', 'Melvin', 'Billy Bob'];
for (let animal of animals) {
  let nameIdx = Math.floor(Math.random() * names.length);
  console.log(`${names[nameIdx]} the ${animal}`);
}

for...of 还可以遍历字符串

let str = 'abcde';
for (let char of str) {
  console.log(char.toUpperCase().repeat(3));
}

【扩展】迭代器

es6 里的迭代器并不是一种新的语法或者是新的内置对象（构造函数），而是一种协议，所有遵循了这个协议的对象都可以称之为迭代器对象，所以说迭代器是一种协议，一个统一的接口标准，两个属性都不返回值也不会报错，但是不符合协议标准，就不能称作迭代器了

内置可迭代对象

都是内置可迭代对象（Object 不是），因为原型对象都有一个@@iterator 方法，例如

var arr = [1, 2, 3];
var arrIteratorFn = arr[Symbol.iterator]; // arr迭代函数
var str = '1234';
var strIteratorFn = str[Symbol.iterator]; // str迭代函数

自定义一个可迭代对象

let myInterable = {};
myInterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};
let arr = [...myInterable]; // 展开语法...也实现了迭代协议，结果返回[1,2,3]

for...of 语句可以遍历上面的 myInterable，其他遍历方法是没法实现的

for (let item of myInterable) {
  console.log(item);
}

遍历 NodeLists

const elements = document.querySelectorAll('.foo');
for (const element of elements) {
  element.addEventListener('click', doSomething);
}

for...of 和 for...in 的区别

  1. for...of 获取到的是值，for...in 获取到的是数组的下标或者对象的 key
  2. for...of 可以遍历 Map，Set，generator，DOM node collection和arguments对象，for...in 不行