for...of 迴圈, Set (集合)

豬豬是天才發表於2018-11-09

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]複製程式碼

參考連結


相關文章