for...of 循环, Set (集合)

1.什么是 for...of 循环

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

语法

for (variable of iterable) {
    statement
}复制代码

• variable：每个迭代的属性值被分配给该变量。
• iterable：一个具有可枚举属性并且可以迭代的对象。

举例

Arrays(数组)

const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
}

// Output:
// mini
// mani
// mo复制代码

Maps(映射)

const iterable = new Map([['one', 1], ['two', 2]]); // Map(2) {"one" => 1, "two" => 2}
for (const [key, value] of iterable) {
  console.log(`Key: ${key} and Value: ${value}`);
}
 
// Output:
// Key: one and Value: 1
// Key: two and Value: 2复制代码

Set(集合)

const iterable = new Set([1, 1, 2, 2, 1]);  // set 会去掉重复项
for (const value of iterable) {
  console.log(value);
}
// Output:
// 1
// 2复制代码

String(字符串)

const iterable = 'javascript';
 
for (const value of iterable) {
  console.log(value);
}
 
// Output:
// "j"
// "a"
// "v"
// "a"
// "s"
// "c"
// "r"
// "i"
// "p"
// "t"复制代码

Arguments Object(参数对象)

function args() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
 
args('a', 'b', 'c');
// Output:
// a
// b
// c复制代码

Generators(生成器)

function* generator(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 
 
for (const g of generator()) { 
  console.log(g); 
}
 
// Output:
// 1
// 2
// 3复制代码

退出迭代 

JavaScript 提供了四种已知的终止循环执行的方法：break、continue、return 和 throw

const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
  break;
}
 
// Output:
// mini复制代码

普通对象不可迭代

for...of 循环仅适用于迭代。 而普通对象不可迭代。

const obj = { fname: 'foo', lname: 'bar' };
 
for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
    console.log(value);
}复制代码

参考链接

PS：这里介绍一下 Set 对象

Set是 ES6 中新的对象，集合中的对象值不能重复，无论是原始值或者是对象引用。

举个?

var set = new Set();

set.add(1);
set.add(5);
set.add("some text");

set.has(1); // true
set.has(3); // false, 3还没有被添加到set中
set.has(5);              // true
set.has(Math.sqrt(25));  // true
set.has("Some Text".toLowerCase()); // true

set.size; // 3

set.delete(5); // 从set中移除5
set.has(5);    // false, 5已经被移除

set.size; // 2 我们刚刚移除了一个值

var arr = Array.from(set) // [1, "some text"]复制代码

还可以用来做 数组去重～

var arr = [1,2,2,3,4] // 需要去重的数组

var set = new Set(arr) // {1,2,3,4}
var newArr = Array.from(set) // 再把set转变成array

console.log(newArr) // [1,2,3,4]复制代码

参考链接