for of 循环详解

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()