for...of 的作用

for...of 语句在可迭代(拥有 Iterator 接口)对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

语法

for (variable of iterable) {
  //statements
}

variable: 在每次迭代中，将不同属性的值分配给变量。
iterable: 被迭代枚举其属性的对象。

示例

遍历数组

var arr = [
  { name: 'nick', age: 18 },
  { name: 'freddy', age: 24 },
  { name: 'mike', age: 26 },
  { name: 'james', age: 34 },
];
for (var item of arr) {
  console.log(item.name, item.age);
}

// nick 18
// freddy 24
// mike 26
// james 34

遍历 String

let iterable = 'boo';

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

遍历 Map

let iterable = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

遍历 Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

遍历 arguments

(function () {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

中断循环 for...of 循环

break 中断

var arr = [66, 88, 99, 1000];
for (let item of arr) {
  console.log(item);
  break;
}

console.log('====');

for (let item of arr) {
  if (item === 99) {
    break;
  }
  console.log(item);
}

continue 中断

var arr = [66, 88, 99, 1000];
for (let item of arr) {
  if (item === 99) {
    continue;
  }
  console.log(item);
}

return 中断

return 不能直接中断循环，必须放在函数中

function test() {
  var arr = [66, 88, 99, 1000];
  for (let item of arr) {
    if (item === 99) {
      return;
    }
    console.log(item);
  }
}

test();