1、Promise 作用：解決非同步回調問題 Promise.resolve('aa') 將aa轉為Promise對象，且是resolve狀態 相當於：new Promise(resolve=>{resolve('aa')}) Promise.reject('bb') 將bb轉成Promsie對象，且 ...
1、Promise
作用：解決非同步回調問題
1 //創建 2 new Promise((resolve,reject)=>{ 3 if(success){ 4 resolve('success') 5 }else{ 6 reject('error') 7 } 8 }) .then(res=>{//返回一個Promise 9 console.log(res) 10 }) .catch(err=>{ 11 console.log(err) 12 })
Promise.resolve('aa') 將aa轉為Promise對象，且是resolve狀態
相當於：new Promise(resolve=>{resolve('aa')})
Promise.reject('bb') 將bb轉成Promsie對象，且是reject狀態
相當於：new Promise(reject=>{reject('bb')})
//把promise打包放入一個數組，p1,p2,p3都為promise對象 //必須確保所有promise對象都是resolve狀態才會執行then Promise.all([p1,p2,p3]).then(res=>{ let [res1,res2,res3] = res; //... }).catch(err){ } //有一個resolve就返回的情況 Promise.race([p1,p2,p3]).then(res=>{ }).catch(err){ }
2、模塊化
- CommonJs
- AMD
- CMD
模塊需要服務端環境
導出：export const a = function(){ }
<script type="module">
//引入
import {a} from './module/test.js'
</script>
可以使用import * 引入該文件所有導出的模塊
可以在引入的時候為模塊取別名，import {a as b} from'./../';
導出的時候可以使用export default a=function(){}，在引入時不需要花括弧
可以同時導出多個模塊，如：
export default {
module1,
module2
}
【註】：import會自動提升到頂部先執行，導出的模塊內容里若有定時器改變變數，外面也會被改動
import()類似於node的require()，但是require可以動態引入而import不可以
import()返回的是一個promise對象
es6模塊化預設使用嚴格模式（‘use strict’）
3、async、await
async function main(){//非同步函數 const mod1 = await import('./module/1.js') const mod2 = await import('./module/2.js') }
await會等待當前代碼執行完成之後再執行下一步
4、類class
1）es5實現類的方法
function Person(name,age){ this.name = name; this.age = age } Person.prototype.showName(){ return this.name; } //或者 Object.assign(Person.prototype,{ showName(){ }, showAge(){ } }) let p1 = new Person('liuqiyang',22)
2）es6
class Person{ constructor(name,age){//構造函數，new的時候自動調用 this.name=name; this.age=age; }//沒有逗號 showName(){ return this.name; } showAge(){ return this.age; } } let p1 = new Person('liuqiyang',22)
方法名可以使用變數，如下：
let a = 'strive'; let b = 'method'; class Person(){ constructor(){} [a](){ } [a+b](){ } } //調用 p.strive() p.strivemethod()
【註】：類沒有提升功能，必須再定義完再調用
class中的setter和getter
class Person{ constructor(name,age){//構造函數，new的時候自動調用 this.name=name; this.age=age; } set name(val){ } get age(){ } }
類身上的靜態方法：static
class Person{ constructor(name,age){//構造函數，new的時候自動調用 this.name=name; this.age=age; } static fn(){ // } } //調用 Person.fn()
繼承
//es5 function Person(name){ this.name = name; } Person.prototype.showName(){ console.log(this.name) } function Student(name,action){ Person.call(this,name); this.action = action; } Student.prototype = new Person(); //es6 class Person{ constructor(name){ this.name=name; } showName(){ } } class Student extends Person{ constructor(name,action){ super(name); this.action = action; } showAction(){ } }
//子類遇到與父類同名的方法時，子類會覆蓋父類
showName(){
super.showName();//同時繼承父類方法
//
}
插入：
Symbol：新增基本數據類型，返回唯一值，可用typeof檢測
創建：let syl = Symbol('aaa') 不能使用new
作為key值時，for in迴圈無法訪問
5、generator生成器函數
作用：解決非同步問題
//聲明 function * gen(){ yield 'hello'; yield 'world'; return 'hello world' } //使用--手動遍歷 let g1 = gen(); g1.next() //{value:'hello',done:false} g1.next() //{value:'world',done:false} g1.next() //{value:'hello world',done:true} //使用for...of迴圈 for(let value of g1){ } //解構賦值 let [a,b] =gen() //a--hello,b--world let [a,b,c]=gen() //c--undefined //剩餘參數 let[a,...b]=gen() //擴展運算符 ...gen() //hello world Array.form(gen()) //[hello,world]
generator可以結合axios數據請求
非同步解決方案：
- 回調函數
- 事件監聽
- 發佈訂閱
- Promise
- async
