ES6常用知識點小結

ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標准。

因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015(簡稱ES2015）。雖然瀏覽器在不斷更新，但並不是所有用戶的電腦瀏覽器都支持ES6，所以在使用的過程中建議還是轉成es5，保證代碼的可執行性。至於轉換的方式大家可以用 Babel或者 Traceur轉碼器。

 

1. let 和 const

在ES6以前，Javascript並沒有塊級作用域的概念，有的是全局作用域和函數作用域，而let的出現就是為了打破局面，let是塊級作用域。const是代表常量，必須在定義的時候初始化，不可改變。

 {
     var a=5;
     let b=10;
 }
 console.log(a);
 console.log(b);

控制台就是這樣輸出：

也就是說，var聲明的變量由於不存在塊級作用域所以可以在全局環境中調用，而let聲明的變量由於存在塊級作用域所以不能在全局環境中調用。

再來看一個經典例子（閉包）：

var a=[];
//執行for循環
for(var i=0;i<10;i++){
      a[i]=function(){ //因為這個是定義，並沒有調用方法，不會執行
           console.log(i);
      };
}
//for循環之后，此時 i = 10；再次執行a[6]();因為 i 一直被引用，所以不會回收，進入到 a[i] 的方法里面， 打印的是 i ，也就是10
a[6](); //輸出10    

如果使用 let

  var a=[];
  for(let i=0;i<10;i++){
        a[i]=function(){
            console.log(i);
        };
    }
    a[6]();    //打印6    

a[6]函數（閉包）這個執行環境中，它會首先尋找該執行環境中是否存在 i，沒有找到，因為 i 是塊級作用域，就沿着作用域鏈繼續向上到了其所在的代碼塊執行環境，找到了i=6,於是輸出了6，即a[6]();的結果為6。這時，閉包被調用，所以整個代碼塊中的變量i和函數a[6]()被銷毀。

const 是定義常量：const a = 14; 此后變量 a 的值無法更改覆蓋。

 

2. 字符串拼接

//傳統字符串拼接
var s1 = '生物膜系統組裝又拆分，變幻莫測；';
var s2 = '你的好多細胞在分裂，';
var str = '孩子們：請聽我說！'+s2+'有絲，減數，哪管白天和黑夜。'+
'染色體，細胞核時隱時現，'+s1+'核糖體在mRNA上穿梭忙碌，'+'幾千種酶各司其職，將活化能狠狠打折。';
console.log(str);    
            
// 字符模板的寫法
var s1 = '染色體，細胞核時隱時現，';
var s2 = '你的好多細胞在分裂，';
var str = `孩子們：請聽我說！${s2}有絲，減數，哪管白天和黑夜。${s1}生物膜系統組裝又拆分，變幻莫測；核糖體在mRNA上穿梭忙碌，幾千種酶各司其職，將活化能狠狠打折。`;
console.log(str);

es6使用 ` ` 包裹字符串，即使斷開，也可以用這個符號包裹起來合並成一個字符串。

 

3. 解構賦值

// 以前我們給變量賦值，只能直接指定值
var a = 1;
var b = 2;
var c = 3;
console.log(a,b,c); // 1 2 3
            
// 現在用解構賦值的寫法就變得簡單了，只要模式匹配上了就行了，如下
// 注意數組是有順序的
var [a,b,c] = [11,22,33];
console.log(a,b,c); // 11 22 33

var [b,a,c] = [11,22,33];
console.log(a,b,c); // 22 11 33

// 當然解構賦值還有嵌套比較復雜的寫法，如下
let [foo,[[bar],[baz]]] = [111,[[222],[333]]];
console.log(foo,bar,baz); // 111 222 333

let [head,...foot] = [1,2,3,4];
console.log(head,foot); // 1 [2,3,4]

// 如果解構不成功，變量的值就等於undefined，如下
var [bar3,foo3] = [1000];
console.log(bar3,foo3); // 1000 undefined

// 另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的數組。這種情況下，解構依然可以成功
let [x,y] = [10000,20000,30000];
console.log(x,y); // 10000 20000

// 默認值可以引用解構賦值的其他變量，但該變量必須已經聲明
let [a=1,b=a] = [2,3];
console.log(a,b); // 2 3

// 對象的解構也可以指定默認值
var {x,y=5} = {x:1};
console.log(x,y); // 1 5

//對象的解構賦值解構不僅可以用於數組，還可以用於對象(json)
//對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；
//而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值
var {a,b} = {a:'apple',b:'banana'};
console.log(a,b); // apple banana
var {b,a} = {a:'apple',b:'banana'};
console.log(a,b); // apple banana

// 如果變量名與屬性名不一致，必須寫成下面這樣
let obj = {first:'hello',last:'world'};
// first ---> f，那么此時f就是first，而不是undefined了,有點類似別名的概念
let {first:f,last} = obj;
console.log(f,last); // hello world

//1.也就是說，對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。 真正被賦值的是后者，而不是前者
//2.v是匹配的模式，n才是變量。真正被賦值的是變量n，而不是模式v。  
//注意，采用這種寫法時，變量的聲明和賦值是一體的
// v ---> n，那么此時n就是vue，而不是undefined了
var {v:n} = {v:'vue',r:'react'};
console.log(n); // vue
console.log(v); // Uncaught ReferenceError: v is not defined
console.log(r); // Uncaught ReferenceError: r is not defined

 

4. 復制數組

// 數組的淺拷貝，引用之間的拷貝，沒有實現數組的真正復制
var arr1 = [1, 2, 3];
var arr2 = arr1;
arr2.push(4);
console.log(arr1, arr2); //[1, 2, 3, 4] [1, 2, 3, 4]

// 復制數組深拷貝，傳統做法
var arr1 = [1,2,3];
var arr2 = [];
//通過for循環遍歷之后將arr1數組的每一項賦值給arr2數組的每一項， 就實現了數組的深拷貝，這時候我再去操作arr2的數組的時候，arr1就不會受影響了
for(var i=0;i<arr1.length;i++){
    arr2[i] = arr1[i];
}
// 數組尾部添加
arr2.push(4);
console.log(arr1,arr2);

// ES6實現的數組的深拷貝方法1
var arr1 = [1,2,3];
var arr2 = Array.from(arr1);
// 數組尾部添加
arr2.push(100);
console.log(arr1,arr2); // [1, 2, 3] [1, 2, 3, 100]

// ES6實現的數組的深拷貝方法2
var arr1 = [1,2,3];
// 超引用拷貝數組
var arr2 = [...arr1];
// 數組尾部添加
arr2.push(1000);
console.log(arr1,arr2); // [1, 2, 3] [1, 2, 3, 1000]

function show(...args){
// 此時這個形式參數就是一個數組，我們可以直接push東西進來，如下
args.push(5);
console.log(args);
}
// 調用
show(1,2,3,4); // [1, 2, 3, 4, 5]

 

5. 增加了Map對象，傾向於后台

var map = new Map();
// 設置
// map.set(name,value);
map.set('a','apple');
map.set('b','banana');
// 獲取
// map.get(name);
console.log(map.get('a') + ' ' + map.get('b'));
// 刪除之前map對象
console.log(map);
// 刪除
// map.delete(name);
map.delete('a');
// 刪除之后map對象
console.log(map);

// 注意for..in是不能循環map對象的，不報錯也無任何反應，所以下一代碼無任何輸出，稍微注意下
for(var name in map){ 
    console.log(name);
}

// 實體 map對象的循環輸出
for(var name of map){
//循環出來的結果就是:a,apple b,banana 循環key,value
console.log(name);
}

//循環出來的結果就是: a,apple b,banana 循環key,value
for(var [key,value] of map.entries()){
    console.log(key,value);
}

//只循環key
for(var key of map.keys()){
    console.log(key);
}

//只循環value
for(var val of map.values()){
    console.log(val);
}

 

6. for-of循環 ，上一例子也說到了for-of循環map對象輸出

//for of一個arr對象
var arr = ['紅樓夢','西游記','三國演義','水滸傳','火影'];
//只循環key  0 1 2 3 4 輸出key值，也就是下標索引
for(var key of arr.keys()){
console.log(key);
}
//只循環value，注意數組是沒有.values() 直接 var value of arr ,輸出 紅樓夢，西游記，三國演義，水滸傳，火影
for(var value of arr){
console.log(value);
}
//循環key,value
for(var [key,value] of arr.entries()){
console.log(key,value);
}

//for in循環與for of循環的區別
var arr = ['apple','banana','orange','pear'];
for(var i in arr){
// i打印出來的就是arr數組對應的索引
// 0 1 2 3
console.log(i);
}
for(var i of arr){
// i值打印出來的就是我們想要的數組具體的值
// apple banana orange pear
console.log(i);
}

//for of不能循環json
var json = {'a':'apple','b':'banana','c':'orange','d':'pear'};
for(var name in json){
// a b c d
console.log(name);
// apple
console.log(json.a);
// pear
console.log(json['d']);
}
// 注意for..of可以循環arr，但是不可以循環json,會報錯，特別注意下
for(var name of json){
Uncaught TypeError: undefined is not a function
console.log(json);
}

 

7. 箭頭函數：引入箭頭函數有兩個方面的作用：更簡短的函數並且不綁定this。

箭頭函數表達式的語法比函數表達式更短，並且不綁定自己的this，arguments，super或 new.target。這些函數表達式最適合用於非方法函數，並且它們不能用作構造函數，不能使用new。

箭頭函數的寫法  function(){ } 變成 ()=>{ }

var a = ()=>{
  return 1;
}

等價於

function a(){
  return 1;
}

 

如果函數體只有一條語句，可以這樣寫：

var fun = ()=>Math.random()*10
console.log(fun());

這樣子調用這個箭頭函數就會直接返回這條語句的值

 

箭頭函數不綁定arguments，取而代之用rest參數…解決

function A(a){
  console.log(arguments); //[object Arguments] [1, 2, 3]
}

var B = (b)=>{
  console.log(arguments); //錯誤：ReferenceError: arguments is not defined
}

var C = (...c)=>{ //...c即為rest參數
  console.log(c); //[3, 1, 2]
}
A(1,2,3);
B(2,1,3);
C(3,1,2);

箭頭函數會捕獲其所在上下文的 this 值，作為自己的 this 值

var obj = {
  a: 10,
  b: function(){
    console.log(this.a); //輸出10
  },
  c: function() {
     return ()=>{
           console.log(this.a); //輸出10，捕獲了上面obj的this作為自己的this
     }
  }
}
obj.b(); 
obj.c()();

所謂箭頭函數的 this 捕獲的是所在的上下文，比如下面這個例子：b是一個箭頭函數，然后它的 this是指向window，這是為什么呢，因為箭頭函數捕獲的是obj{}這個對象的環境，然后這個環境的this指向的是window，就相當於上一條的例子：在c方法里面return的那個箭頭函數捕獲的是c:function(){}這個環境的this，而這個環境的this是obj

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c: function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b(); 
obj.c();

對於函數的this指向問題：

1. 箭頭函數的this永遠指向其上下文的 this，任何方法都改變不了其指向，如call(), bind(), apply()
2. 普通函數的this指向調用它的那個對象

 

8. 對象的簡潔語法

//傳統對象_單體模式寫法 key-value模式
var person = {
    name:'krry',
    age:21,
    showName:function(){
        return this.name;
    },
    showAge:function(){
        return this.age;
    }
};
// 調用
console.log(person.showName()); // krry
console.log(person.showAge()); // 21

//ES6_單體模式寫法  不需要寫key
var name = 'krry';
var age = 21;
var person = {
    name,
    age,
    showName(){
        return this.name;
    },
    showAge(){
        return this.age;
    }
};
// 調用
console.log(person.showName()); // krry
console.log(person.showAge()); // 21

 

9. 類和繼承（class和extends）

 1. 傳統面向對象的寫法：

function Person(name,age){ // 類、構造函數
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function(){
    return this.name;
};
Person.prototype.showAge = function(){
    return this.age;
};
var p1 = new Person('allen',28);
var p2 = new Person('xiaoxiaoyou',101);
console.log(p1.showName()); // allen
console.log(p2.showAge()); // 101
console.log(p1.showName == p2.showName); //true 注意不是調用方法，沒有括號，所以才true
console.log(p1.constructor == Person); // true 構造方法相等

2. ES6面向對象寫法：

class Person{
    // 構造器
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
var p1 = new Person('aaa',18);
var p2 = new Person('bbb',20);
console.log(p1.name); // aaa
console.log(p1.showName()); // aaa
console.log(p2.showAge()); // 20
console.log(p1.showAge == p2.showAge); // true
console.log(p1.constructor == Person); // true

3. 面向對象給class賦值默認值：

class Person{
    // 構造器
    constructor(name='default',age=0){
        this.name = name;
        this.age = age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}

var p1 = new Person();
console.log(p1.name); // 構造器里面給的默認值 default
console.log(p1.age); // 構造器里面給的默認值 0

4. 傳統寫法原型繼承extends

//傳統寫法原型繼承
function Person(name,age){ // 類、構造函數
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function(){
    return this.name;
};
Person.prototype.showAge = function(){
    return this.age;
};
// 工人類
function Worker(name,age){
    // 屬性繼承過來
    Person.apply(this,arguments);
}
// 原型繼承
Worker.prototype = new Person();
var p1 = new Person('allen',28);
var w1 = new Person('worker',1000);
console.log(w1.showName()); // 確實繼承過來了 result：worker

5. ES6中面向對象實現類繼承

class Person{
    // 構造器
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
class Worker extends Person{
    constructor(name,age,job='啦啦啦'){
        // 繼承超父類的屬性
        super(name,age);
        this.job = job;
    }
    showJob(){
        return this.job;
    }
}
var p1 = new Person('aaa',18);
var w1 = new Person('www',36);
var w2 = new Worker('wwwwwwww',90);
console.log(w1.showName()); // www
console.log(w2.showJob()); // 默認給的值 ‘啦啦啦’

 

10. 模塊化 export 和 import

import 導入模塊、export 導出模塊

可以直接在任何變量或者函數前面加上一個 export 關鍵字，就可以將它導出。 

在一個文件中：

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

然后在另一個文件中這樣引用：

import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));

總結：

//mod.js
// 第一種模塊導出的書寫方式(一個個的導出)
// 導出普通值
export let a = 12;
export let b = 5;
// 導出json
export let json = {
    a,
    b
};
// 導出函數
export let show = function(){
    return 'welcome';
};
// 導出類
export class Person{
    constructor(){
        this.name = 'jam';
    }
    showName(){
        return this.name;
    }
}

//index.js
//導出模塊如果用default了，引入的時候直接用，若沒有用default，引入的時候可以用{}的形式
// 導入模塊的方式
import {
    a,
    b,
    json,
    show,
    Person
} from './mod.js';
console.log(a); // 12
console.log(b); // 5
console.log(json.a); // 12
console.log(json.b); // 5
console.log(show()); // welcome
console.log(new Person().showName()); // jam

//mod1.js
// 第二種模塊導出的書寫方式
let a = 12;
let b = 5;
let c = 10;
export {
    a,
    b,
    c as cc // as是別名，使用的時候只能用別名，特別注意下
};

//index1.js
// 導入模塊的方式
import {
    a,
    b,
    cc // cc是導出的，as別名
} from './mod1.js';
console.log(a); // 12
console.log(b); // 5
console.log(cc); // 10

//mod2.js
// 第三種模塊導出的書寫方式 ---> default
// default方式的優點，import無需知道變量名，就可以直接使用，如下
// 每個模塊只允許一個默認出口
var name = 'jam';
var age = '28';
export default {
    name,
    age,
    default(){
        console.log('welcome to es6 module of default...');
    },
    getName(){
        return 'bb';
    },
    getAge(){
        return 2;
    }
};

//index2.js
// 導入模塊的方式
import mainAttr from './mod2.js';
var str = ' ';
// 直接調用
console.log(`我的英文名是:${mainAttr.name}我的年齡是${mainAttr.age}`);
mainAttr.default(); // welcome to es6 module of default...
console.log(mainAttr.getName()); // bb
console.log(mainAttr.getAge()); // 2

//mod3.js
var name = 'jam';
var age = '28';
export function getName(){
    return name;
};
export function getAge(){
    return age;
};

//index3.js
// 導入模塊的方式
import * as fn from './mod3.js';
// 直接調用
console.log(fn.getName()); // jam

 

11. Promise

在promise之前代碼過多的回調或者嵌套，可讀性差、耦合度高、擴展性低。通過Promise機制，扁平化的代碼機構，大大提高了代碼可讀性；用同步編程的方式來編寫異步代碼，保存線性的代碼邏輯，極大的降低了代碼耦合性而提高了程序的可擴展性。

就是用同步的方式去寫異步代碼。

//Promise對象 ---> 用來傳遞異步操作過來的數據的
//Pending(等待、處理中) ---> Resolve(完成，fullFilled)   ---> Reject(拒絕，失敗)
//這里只是定義，還沒開始執行
var p1 = new Promise(function(resolve,reject){
    resolve(1); // 成功了，返回一個promise對象1
    // reject(2); // 失敗了
});

// 接收成功和失敗的數據，通過then來傳遞
// then也是返回一個promise對象，會繼續往下傳遞數據,傳遞給下一個then
p1.then(function(value){
    // resolve
    console.log(value); //執行打印1
    return value + 1; // 1
    alert(`成功了：${value}`);
},function(value){
    // reject
    alert(`失敗了：${value}`);
}).then(function(value){
    console.log(value); // 2
});

//catch捕獲異常錯誤
var p1 = new Promise(function(resolve,reject){
    resolve('成功了'); //返回一個promise對象“成功了”
});
//then也是返回一個promise對象，會繼續往下傳遞數據
p1.then(function(value){
    console.log(value); //打印“成功了”
    // throw是用來拋錯誤的
    throw '發生了點小意外';
}).catch(function(e){
    // catch用來捕獲這個錯誤的 ---> 追蹤
    console.log(e);
});

//all ---> 全部，用於將多個promise對象，組合，包裝成
//Promise.all([p1,p2,p3,...]); 所有的promise對象，都正確，才走成功
//否則，只要有一個錯誤，就走失敗
var p1 = Promise.resolve(1);
var p2 = Promise.reject(0);
Promise.all([true,p1,p2]).then(function(obj){
    console.log(`成功了：${obj}`);
},function(obj){
    console.log(`失敗了：${obj}`);
});

// race ---> 返回的也是一個promise對象
//最先執行的的promise結果，哪個最快我用哪個，所以下面打印的是one
var p1 = new Promise(function(resolve,reject){
    setTimeout(resolve,50,'one');
});
var p2 = new Promise(function(resolve,reject){
    setTimeout(resolve,100,'two');
});
Promise.race([p1,p2]).then(function(val){
    console.log(val);
});

//resolve ---> 生成一個成功的promise對象
//語法規則：Promise.resolve(val); // 普通值
// Promise.resolve(arr); // 數組之類
//Promise.resolve(promise); // 傳遞另一個promise對象
//傳遞普通值
Promise.resolve('success').then(function(val){
    // 注意resolve，走得是這里
    console.log(val); // success
},function(err){
    console.log("err:"+ err);
});
//傳遞數組
Promise.resolve([1,2,3]).then(function(val){
    // 注意resolve，走得是這里
    console.log(val); // [1,2,3]
},function(err){
    console.log(err);
});
//傳遞一個promise對象
var p1 = Promise.resolve(520);
var p2 = Promise.resolve(p1);
p2.then(function(val){
    //從p1那邊傳遞過來的
    console.log(val); // 520
});

再來一道經典面試題：

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

首先先碰到一個 setTimeout，於是會先設置一個定時，在定時結束后將傳遞這個函數放到任務隊列里面，因此開始肯定不會輸出 1 。

然后是一個 Promise，里面的函數是直接執行的，因此應該直接輸出 2 3 。

然后，Promise 的 then 應當會放到當前 tick 的最后，但是還是在當前 tick 中。

因此，應當先輸出 5，然后再輸出 4 。

最后在到下一個 tick，就是 1 。

“2 3 5 4 1”

 

12. Generator、yield

生成器（ generator）是能返回一個迭代器的函數。生成器函數也是一種函數，最直觀的表現就是比普通的function多了個星號*，在其函數體內可以使用yield關鍵字,有意思的是函數會在每個yield后暫停。

這里生活中有一個比較形象的例子。咱們到銀行辦理業務時候都得向大廳的機器取一張排隊號。你拿到你的排隊號，機器並不會自動為你再出下一張票。也就是說取票機“暫停”住了，直到下一個人再次喚起才會繼續吐票。

當你調用一個generator時，它將返回一個迭代器對象。這個迭代器對象擁有一個叫做next的方法來幫助你重啟generator函數並得到下一個值。next方法不僅返回值，它返回的對象具有兩個屬性：done和value。value是你獲得的值，done用來表明你的generator是否已經停止提供值。繼續用剛剛取票的例子，每張排隊號就是這里的value，打印票的紙是否用完就這是這里的done。

看個例子：

// 生成器
    function *createIterator() {
        yield 1;
        yield 2;
        yield 3;
    }
    
    // 生成器能像正規函數那樣被調用，但會返回一個迭代器
    let iterator = createIterator();
    
    console.log(iterator.next().value); // 1
    console.log(iterator.next().value); // 2
    console.log(iterator.next().value); // 3
    console.log(iterator.next().value); // undefined  因為generator已經停止提供值

 

總結：

//Generator ---> 生成器就是一個函數
//特點：
//1.函數名前面帶一個*，和普通函數做區分
//2.內部使用yield語句
//調用方式，如下var res = show(); 與普通函數一樣
//value指的是generator函數內容yield定義的值，done:false表示還沒遍歷完
//直接找到返回值return了，那么此時done才會為true
//console.log(res.next());{value:'值1',done:false}
function* show(){
    yield 'Hello';
    yield 'World';
    yield 'ES6';
    return 'xx';
}
var res = show();
console.log(res.next()); // {value: "Hello", done: false}
console.log(res.next()); // {value: "World", done: false}
console.log(res.next()); // {value: "ES6", done: false}
console.log(res.next()); // {value: "allen", done: true}
// 已經找到return返回值了，繼續下去就沒有意義了
// console.log(res.next()); // {value: "undefined", done: true}

//yield本身沒有返回值，或者可以說每次給你返回的是undefined
function* show(){
    var a = yield 'Hello';
    return a;
}    
var res = show();
console.log(res.next()); // {value: "Hello", done: false}
console.log(res.next()); // {value: "undefined", done: true}

//next方法是可以帶參數的,死循環的generator函數
function* fn(){
    for(var i=0;true;i++){
        // 如果里面傳了一個值，那么它會把這個參數賦給最近的一個yield
        var a = yield i;
        if(a) i = -1;
    }
} 
var d = fn();
console.log(d.next()); // {value: 0, done: false}
console.log(d.next()); // {value: 1, done: false}
console.log(d.next()); // {value: 2, done: false}
// 如果里面傳了一個值，那么它會把這個參數賦最近的一個yield
console.log(d.next(true)); // {value: 0, done: false}
console.log(d.next()); // {value: 1, done: false}
console.log(d.next()); // {value: 2, done: false}
console.log(d.next()); // {value: 3, done: false}

// for..0f循環generator函數
function* fn(){
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
    return 6;
}
//for..0f循環generator函數，可以取值
for(let val of fn()){
document.write(val); // 12345
}

// 對象里使用generator函數的特殊寫法，注意下
var json = {
    *show(){
        yield 'a';
        yield 'b';
        return 'c';
    }
};
var res = json.show();
console.log(res.next()); // {value: "a", done: false}
console.log(res.next()); // {value: "b", done: false}
console.log(res.next()); // {value: "c", done: true}

 

自動調用生成器並啟動迭代器的方法：

function run(taskDef) { //taskDef即一個生成器函數

    // 創建迭代器，讓它在別處可用
    let task = taskDef();

    // 啟動任務
    let result = task.next();

    // 遞歸使用函數來保持對 next() 的調用
    function step() {

        // 如果還有更多要做的
        if (!result.done) {
            console.log(result.value); //這里就執行該做的事
            result = task.next();
            step();
        }
    }

    // 開始處理過程
    step();

}
//生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}
//啟動
run(createIterator);

 

相關鏈接：

GitHub：https://github.com/Krryxa

音樂博客：https://www.ainyi.com