CLASS 類的概念

ES5中聲明類 用構(gòu)造函數(shù)模擬

//定義一個(gè)叫Animal 的類
let Animal = function(type){
 //聲明了屬性type
 this.type = type
}
//聲明了方法walk
  Animal.prototype.walk = function(){
  console.log('i am walk') }
  
//實(shí)例化類dog 和 monkey  
let dog = new Animal('dog');
let monkey = new Animal('monkey');
//繼承原型鏈上的walk方法
dog.walk();
monkey.walk(); 
//若只知道實(shí)例的時(shí)候想要找到原型鏈可以通過(guò)constructor
dog.constructor.prototype.eat=function(){
  console.log("我是通過(guò)實(shí)例的constructor找到的構(gòu)造函數(shù) 添加的eat方法")
}
dog.eat();
monkey.eat();

ES6中的類的聲明專業(yè)化 用class 即ES5聲明類的語(yǔ)法糖 其本質(zhì)是一樣的

class Animal{
 constructor(type){
    this.type = type
 }
 //屬性值寫在constructor中  方法寫在constructor之外
 walk(){
   console.log('我是通過(guò)class創(chuàng)建的方法')
  }
}
//實(shí)例化
let dog = new Animal('dog')
let monkey = new Animal('monkey')
dog.walk();
monkey.walk();

console.log(typeof Animal)  //值為function

Setters & Getters

對(duì)于類中的屬性，可以直接在constructor 中通過(guò)this直接定義，還可以直接在類的頂層來(lái)定義

class Animal{
 constructor(type,age){
   this.type = type
   this._age = age
  }
  get age(){
   return this._age
  }
  //用get定義的屬性只能讀取不能修改
  set age(val){
  if(val>7){
    this._age = val
  }
  }
  //用set定義的屬性可以有條件的修改
}

let dog = new Animal('dog',5) ;
console.log(dog._age);
console.log(dog.age);
dog.age = 4; //改變不了age 的值 除非滿足set中的條件
dog.age = 8;
console.log(dog.age);//由于滿足set中的條件所以 打印的值為8

class 的 Static Methods

重點(diǎn)需要區(qū)別類的靜態(tài)方法 和實(shí)例對(duì)象的方法

ES5中的靜態(tài)方法的定義

let Animal = function(type){
  this.type = type 
  this.walk = function(){
   console.log("我是實(shí)例對(duì)象的walk方法")
 }
}
Animal.eat=function(){
 console.log("我是類的靜態(tài)方法中的eat方法")
}

let dog =  new Animal('dog');
dog.walk();
//dog.eat(); //實(shí)例對(duì)象上沒(méi)有eat方法 也就是說(shuō)在類上定義的靜態(tài)方法在實(shí)例對(duì)象上取不到
Animal.eat(); //類上的靜態(tài)方法的調(diào)用

ES6中靜態(tài)方法的定義

class Animal {
  constructor(type){
    this.type = type ;
    this.walk = function(){
      console.log("我是實(shí)例對(duì)象上的walk方法")
    }
  }
  static eat () {
    console.log("我是類上的靜態(tài)方法")
  }
  //ES6中定義靜態(tài)方法方式
}

let dog = new Animal('dog')
dog.walk();
//dog.eat(); //實(shí)例對(duì)象上沒(méi)有eat方法 也就是說(shuō)在類上定義的靜態(tài)方法在實(shí)例對(duì)象上取不到
Animal.eat(); //類上的靜態(tài)方法的調(diào)用

類的繼承

ES5中類的繼承方式

let Animal = function(type){
   this.type = type 
}
//定義方法
Animal.prototype.walk = function(){ console.log('我是父類原型鏈上的方法')};
//定義靜態(tài)方法 
Animal.eat = function(){ cnonsole.log('我是父類的靜態(tài)方法')}
//定義子類

let Dog = function(name){ 
  Animal.call(this,'dog')
  this.name = name
}

Dog.prototype = Animal.prototype
Dog.prototype.run = function(){console.log("我是子類的run方法")}
let hsq = new Dog("hsq")
console.log(hsq.run());
console.log(hsq.walk());
console.log(hsq.eat()); //靜態(tài)方法拿不到

ES6中類繼承的方式

class Animal{
   constructor(type) {
     this.type = type
  }
  walk(){ console.log('我是父類中的walk方法')}
}

class Dog extends Animal {
    //若子類中沒(méi)有自己的屬性可以省略super()
    constructor(type,name){
      super(type)
      //super中接受的是父類中的參數(shù)
      this.name = name 
   }
run(){console.log('我是子類中的run方法')}
}
let hsq = new Dog('dog','hsq');
 
 hsq.walk();
 hsq.run();
 console.log(hsq.type)
 console.log(hsq.name)

函數(shù)

ES5中處理參數(shù)的默認(rèn)值

function test(x,y,z) {
  if(y === undefined) {
     y = 10
  }
  if(z === undefined) {
     z = 20
  }
  return x + y + z
}

test(1) ;

ES6中處理參數(shù)的默認(rèn)值

函數(shù)參數(shù)是從左至右解析,如果沒(méi)有默認(rèn)值會(huì)被解析成undefined

 function test(x,y=10,z=20){
  return x + y + z
}
test(1);
---------------
//讓某個(gè)值使用默認(rèn)值的情況
test(1,undefined,30); //把要使用默認(rèn)值的參數(shù)設(shè)置為undefined

判斷函數(shù)有幾個(gè)參數(shù)

ES5中可以用arguments

function test(a,b=1,c){
  console.log(arguments.length)
}
test(1,2,3) //輸出3

ES6中不支持arguments 可以用函數(shù)的length屬性

function test(a,b=1,c){
  console.log(test.length)
}
test(1,2,3) //輸出1 用length只能查詢有默認(rèn)值參數(shù)之前的參數(shù)個(gè)數(shù)

拓展運(yùn)算符 Rest Parameter

不確定參數(shù)個(gè)數(shù)求和運(yùn)算 ES5中

function sum(){
 let num = 0;
 Array.prototype.forEach.call(arguments,function(item){
   num += item*1
 })
 return num
}
sum(1,2,3)

不確定參數(shù)個(gè)數(shù)求和運(yùn)算 ES6中

...nums就是一個(gè)數(shù)組可以直接調(diào)用數(shù)組的api

function sum(...nums){
 let num = 0;
 nums.forEach(function(item){
    num += item*1
  })
 return num
}
sum(1,2,3)

...nums還可以和其他參數(shù)一起用

function sum(base,...nums){
 let num = 0;
 nums.forEach(function(item){
    num += item*1
  })
 return  base*2 + num
}
sum(1,2,3)

知道一個(gè)確定數(shù)組 里面的每一項(xiàng)是函數(shù)參數(shù)的對(duì)應(yīng)的實(shí)參可以用...傳遞

//ES5做法
let data = [1,2,3]
function test (a,b,c){
 return a+b + c
}

箭頭函數(shù)

不帶參數(shù)的箭頭函數(shù)

let hello = ()=>{
  console.log('say hello')
}
hello();  //輸出say hello

帶參數(shù)的箭頭函數(shù)

let hello = name => { console.log('say hello',name)}
hello('kobe'); //輸出say hello kobe
//只有一個(gè)參數(shù)可以省略括號(hào)

如果返回值是表達(dá)式 可以省略return 和 {}

let pow = x => x*x

如果返回值是字面量對(duì)象就需要寫用小括號(hào)括起來(lái)

let person = (name) => ({age:20,addr:'shanghai City'})

箭頭函數(shù)中的this

在ES5中關(guān)于函數(shù)中的this 只要的誰(shuí)調(diào)用了該方法那么this就指向誰(shuí)

let test = { 
  name:"test",
  say:function(){
    console.log(this.name)
  }
}

console.log(test.say()) //test

箭頭函數(shù)中對(duì)this的處理是定義的，this的指向也就是test外層所指向的window 而window沒(méi)有掛在name所以結(jié)果是undefined

let test = {
  name:'test',
  say:() =>{
    console.log(this.name,this)
  }
}
test.say() //undefined  和 window

Object

在ES6周期的Object的屬性必須是key-value的形式
ES5的寫法

let x = 1,y = 2;
let obj = { x:x , y:y}

ES6的寫法 鍵名和鍵值定一定變量名一樣的時(shí)候可以簡(jiǎn)寫

let x = 1,y = 2;
obj = {x,y}

ES6可以使用計(jì)算屬性

let x = 1,y = 2,z = 3;
let obj = { x,
        y,
        [y+z]:6}

ES6方法的簡(jiǎn)寫

let x = 1,y = 2,z = 3;
let obj = { x,
        y,
        hello(){ console.log("hello")},
        *run(){ console.log("run")} //前面加星號(hào)表示異步函數(shù)}
    
    obj.hello(); //打印hello
    obj.run();  //run 是異步函數(shù) （generator）

Set

在js里通常使用Array或者Object來(lái)存儲(chǔ)數(shù)據(jù)。但是在頻繁的操作數(shù)據(jù)的過(guò)程中查找或者統(tǒng)計(jì)并需要手動(dòng)來(lái)實(shí)現(xiàn),
并不能簡(jiǎn)單的直接使用。比如如何保證Array是去重的，如何統(tǒng)計(jì)Object的數(shù)據(jù)總數(shù)等。
在ES6為了解決上述痛點(diǎn),新增加了數(shù)據(jù)結(jié)構(gòu)Set和Map。它們分別對(duì)應(yīng)傳統(tǒng)數(shù)據(jù)結(jié)構(gòu)的“集合”和“字典”。

生成一個(gè)Set實(shí)例

let s = new Set()
console.log(s)

在實(shí)例化的同時(shí)傳入默認(rèn)的數(shù)據(jù)

let s = new Set([1,2,3,4])
console.log(s)

初始化參數(shù) 參數(shù)必須是可遍歷的，可以是數(shù)組或者自定義遍歷的數(shù)據(jù)結(jié)構(gòu)

添加數(shù)據(jù)

let s = new Set()
 s.add('hello');
 s.add('goodbye');
 //或者s.add('hello').add('goodbye')

Set數(shù)據(jù)結(jié)構(gòu)不允許數(shù)據(jù)重復(fù),所以添加重復(fù)的數(shù)據(jù)是無(wú)效的

刪除數(shù)據(jù)

刪除數(shù)據(jù)分兩種，一種的刪除指定的數(shù)據(jù)，一種是刪除全部的數(shù)據(jù)

//刪除指定數(shù)據(jù)
let s = new Set()
 s.add('hello');
 s.add('goodbye');
 s.delete('hello') // 返回true
 //刪除全部數(shù)據(jù)
 s.clear() 

統(tǒng)計(jì)數(shù)據(jù)

Set可以快速的進(jìn)行統(tǒng)計(jì)數(shù)據(jù)，如數(shù)據(jù)是否存在，數(shù)據(jù)的總數(shù)

let s = new Set()
 s.add('hello');
 s.add('goodbye');
 //判斷數(shù)據(jù)是否存在
 s.has('hello') //true
 //計(jì)算數(shù)據(jù)項(xiàng)總數(shù)
 s.size //2

查詢數(shù)據(jù)

keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對(duì)的遍歷器
forEach():使用回調(diào)函數(shù)遍歷每個(gè)成員
for...of.:可以直接遍歷每個(gè)成員

let s = new Set()
 s.add('hello');
 s.add('goodbye');
 s.add(NaN)
 s.add(NaN) //雖然每個(gè)NaN都不一樣但是不會(huì)重復(fù)添加
 s.add(undefined)
 s.add(undefined) //undefined 也不會(huì)被重復(fù)添加
 console.log(s)
console.log(s.keys()); //SetIterator {"hello", "goodbye"}
console.log(s.values()); //SetIterator {"hello", "goodbye"}
console.log(s.entries()); //SetIterator {"hello" => "hello", "goodbye" => "goodbye"}
s.forEach(item=>{ console.log(item)}) //hello//goodbye
for (item of s ) {   
  console.log(item)    //hello//goodbye
}

Map

Map是用來(lái)實(shí)現(xiàn)字典功能(Object鍵值對(duì))。

let map = new Map([iterable])

iterable 可以是一個(gè)數(shù)組或者其他iterable對(duì)象其元素為鍵值對(duì)(兩個(gè)元素的數(shù)組，例如[[1,'one'],[2,'two']]) 每個(gè)鍵值對(duì)都會(huì)添加到新的Map。null會(huì)被當(dāng)作undefined

添加數(shù)據(jù)

let keyObj = {}
let keyFunc = function(){}
let ketString = 'a string'

//添加鍵 鍵的值可以是對(duì)象 函數(shù) 等 ES5種的object是做不到的
map.set(keyString,'和鍵'a string'關(guān)聯(lián)的值')
map.set(keyObj,'和鍵keyObj關(guān)聯(lián)的值')
map.set(keyFunc,'和鍵keyFunc關(guān)聯(lián)的值')

刪除數(shù)據(jù)

//  刪除指定的數(shù)據(jù)
map.delete(keyObj)
// 刪除所有數(shù)據(jù)
map.clear()

統(tǒng)計(jì)數(shù)據(jù)

//統(tǒng)計(jì)所有key-value 的總數(shù)
console.log(map.size)
//判斷是否有key-value
console.log(map.has(keyObj)) //true

查詢數(shù)據(jù)

get()方法返回某個(gè)Map對(duì)象種的一個(gè)只定元素

keys()返回一個(gè)新的Iterator對(duì)象。它包含按順序插入Map對(duì)象中每個(gè)元素的key值

values()方法返回一個(gè)新的Iterator對(duì)象。它包含按順序插入Map對(duì)象中每個(gè)元素的value值

entries()方法返回一個(gè)新的包含[key,value]鍵值對(duì)的Iterator 。返回的迭代器的迭代順序與Map對(duì)象插入順序相同

forEach()方法將回以插入順序?qū)ap對(duì)象中的每一個(gè)鍵值對(duì)執(zhí)行一次參數(shù)中提供的回調(diào)函數(shù)

for...of 可以直接遍歷每個(gè)成員

 console.log(map.get(keyObj))// 和鍵KeyObj關(guān)聯(lián)的值
 console.log(map.keys())  //Iterator
 console.log(map.values())//Iterator
 console.log(map.entries())//Iterator
 map.forEach(value,key, map) => {
  console.log(value,key,map)
 }
 for( [key,value] of map ){
    console.log(key,value)
  }

Object和Map的區(qū)別

鍵的類型

一個(gè)Object只能是一個(gè)字符串或者Symbols 但一個(gè)Map的鍵可以是任意值，包括函數(shù)、對(duì)象、基本類型、

鍵的順序

Map中的鍵值是有序的，而添加到對(duì)象中的鍵則不是。因此，當(dāng)對(duì)它進(jìn)行遍歷的時(shí)候，Map
對(duì)象是按插入的順序放回鍵值。

鍵值對(duì)的統(tǒng)計(jì)

你可以通過(guò)size屬性直接獲取以惡Map鍵值對(duì)個(gè)數(shù)，而Object的鍵值對(duì)個(gè)數(shù)只能手動(dòng)計(jì)算

鍵值對(duì)的遍歷

Map可直接進(jìn)行迭代，而Object的跌代需要先獲取它的鍵數(shù)組然后再進(jìn)行迭代

性能

Map在涉及頻繁增刪鍵值對(duì)的場(chǎng)景下會(huì)由些性能優(yōu)勢(shì)

Object.assign() 只是淺拷貝 (深拷貝淺拷貝的區(qū)別)

Object.assign()方法將用于所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象，它將返回目標(biāo)對(duì)象

const target = {a:1,b:2}
const source = {b:4,c:5}
const source1 = {d:5,e:6}
const returnTarget = Object.assign(target,source,source1)

console.log(target)
console.log(returnTarget)

基本語(yǔ)法

Object.assign(target,...soures)

字符串模板語(yǔ)法

在ES5中的場(chǎng)景

1、字符串很長(zhǎng)需要換行

字符串很長(zhǎng)包括幾種情形一個(gè)是開(kāi)發(fā)時(shí)輸入的文本內(nèi)容，一個(gè)是接口數(shù)據(jù)返回的文本內(nèi)容。如果對(duì)換行符處理不當(dāng)，就會(huì)帶來(lái)異常

2、字符串中有變量或者表達(dá)式

如果字符串不是靜態(tài)內(nèi)容，往往是需要加載變量或者表達(dá)式，這個(gè)也是常見(jiàn)的需求。之前的做法是字符串拼接‘

let a =20
let b =10
let c = 'js'
let str = 'my age is ' +(a+b) + ' and i love ' + c
console.log(str)

3、字符串中有邏輯運(yùn)算

let retaiPrice = 20
let wholesalePrice = 16
let type = 'retail'
let showTxt = ''
if(type === 'retail'){
  showTxt = '購(gòu)買的單價(jià)是' + retaiPrice
}else{ showTxt = '您此次的批發(fā)價(jià)是：' +wholesalePrice}

在ES6中的反引號(hào)

`string text` 
`string text line 1 
  string text line 2`
` string text ${expression} string text`

在反引號(hào)中可以插入變量或者表達(dá)式，只需要用${}包起來(lái)就好

ES5中對(duì)于換行的字符串的處理

console.log('string text line 1\n' + `string text line 2`);
//利用\n起到換行作用

ES6中對(duì)于換行的字符串的處理

console.log(`string text line 1 
string text line 2`)

Tag Literals

用于處理復(fù)雜邏輯的字符串

function Price(strings,type){
//函數(shù)可以接受多個(gè)參數(shù)第一個(gè)參數(shù)是字符串模板中片段的數(shù)組用索引取值
//函數(shù)第二個(gè)參數(shù)開(kāi)始是字符串模板中的傳遞的參數(shù),可以傳多個(gè)變量
  let s1 = strings[0]
  let retaiPrice = 20
  let wholesalePrice = 16
  let txt = ''
  if(type === 'retail'){
    txt = `購(gòu)買的單價(jià)是:${retaiPrice}`
    //這里用了反引號(hào)傳遞參數(shù) 變量可以直接放在${}中 
  }else{ 
    txt = `購(gòu)買的單價(jià)是:${wholesalePrice}`
  }
  return `${s1}${txt}`
  //返回處理后的字符串
}

let showTxt = Price`您此次的${`retail`}`
//這里的Price是函數(shù)是操作的字符串模板 傳遞參數(shù)等傳遞參數(shù)的時(shí)候里面要加反引號(hào)

console.log(showTxt)

結(jié)構(gòu)賦值

在ES5中給將數(shù)組中的值放到以些變量里

let arr =['baby','child']
let data1 = arr[0]
let data2 = arr[1]
console.log(`${data1}:${data2}`)

在ES6中的結(jié)構(gòu)賦值

let arr =['baby','child']
let [data1,data2] = arr
console.log(`${data1}:${data2}`)

結(jié)構(gòu)賦值重點(diǎn)是在賦值，賦值的元素是要拷貝出來(lái)賦值給變量，賦值的元素本身是不會(huì)被更改的

結(jié)構(gòu)賦值最多的就是Object 和Array

數(shù)組的解構(gòu)

1、可以跳過(guò)賦值的元素

如果想忽略數(shù)組的某個(gè)元素對(duì)變量進(jìn)行賦值，可以使用逗號(hào)來(lái)處理。

let [data1,,data3] = ['child1','child2','child3','child4','child5']
//為了代碼可讀性可在逗號(hào)前面加空格
console.log(`${data1}:${data3}`)

2、賦值的元素可以是任意可遍歷的對(duì)象

賦值的元素不僅是數(shù)組，它可以是任意可遍歷的對(duì)象

 let [data1,data2,data3] ="abc" 
 console.log(data1+data2+data3)
 
 let[data1,data2,data3] = new Set([1,2,3])
 console.log(data1+data2+data3)

3、左邊的變量
被賦值的變量還可以是對(duì)象的屬性，不局限于單純的變量

let user = {};
[user.name,user.name2] ="kobe curry".split(' ')
console.log(user.name)

4、循環(huán)體
結(jié)構(gòu)賦值在循環(huán)體中的應(yīng)用，可以配合entries使用

let user = { name: 'kobe',age: 40 };
for (let [item,key] of Object.entries(user)) {
  //在遍歷對(duì)象的時(shí)候?qū)⑴浜螼bject.entries將user對(duì)象變成可遍歷的 并用結(jié)構(gòu)賦值取除對(duì)應(yīng)的鍵值
    console.log(`${key}:${item}`)
} 

map對(duì)象

let user = new Map()
user.set('name','kobe')
user.set('age','30')

for(let [key,value] of user.entries()){
//entries()是將對(duì)象返回成一個(gè)有鍵和值的迭代器
  console.log(`${key}:${value}`)
}

rest 參數(shù)

let [name1,name2,...rest] = [1,2,3,4,5,6,7,8,9]
console.log(name1)
console.log(name2)
//rest是將剩下為賦值給變量的值組合成一個(gè)數(shù)組  不過(guò)需要確保rest參數(shù)是放在被賦值變量的最后一個(gè)位置上
console.log(rest[0])
console.log(rest)

默認(rèn)值

如果數(shù)組的內(nèi)容少于變量的個(gè)數(shù)，并不會(huì)報(bào)錯(cuò)，沒(méi)有分配到內(nèi)容的變量會(huì)是undefined

let [data1,data2] = []

console.log(data1) //undefined
console.log(data2) //undefined

也可以給變量賦予默認(rèn)值，防止undefined的情況出現(xiàn)

let [name="kobe",age = 40] = ["curry"]
//賦予默認(rèn)值
console.log(name)
console.log(age)

對(duì)象的解構(gòu)

let obj = {name:'kobe',age:40}
let {name:name1 ,age:age1} = obj
//對(duì)象的結(jié)構(gòu)賦值將  變量名寫在鍵值中 鍵帽寫賦值對(duì)象的鍵帽
console.log(name1) //kobe
console.log(age1)  //40
----------------------------
let obj = {name:'kobe',age:40}
let {name , age} = obj 
//若變量名和賦值對(duì)的鍵帽名一樣的話 可以簡(jiǎn)寫
console.log(name) 
console.log(age)

也可以指定默認(rèn)值

let obj = {age:40}
let {name:name1="curry" ,age:age1} = obj
//可以定義默認(rèn)值
console.log(name1) //kobe
console.log(age1)  //40
----------------------------
let obj = {age:40}
let {name="curry" , age} = obj 
//可以定義默認(rèn)值
console.log(name) 
console.log(age)

rest運(yùn)算符

對(duì)于一個(gè)對(duì)象 只需要取到它的某個(gè)值 剩下的需要保存在一個(gè)變量中
可以用拓展運(yùn)算符即將剩余的鍵值對(duì)放在一個(gè)對(duì)象中

let obj = { name:'kobe',age:40,width:100}
let {name,...rest} = obj
console.log(name)  // kobe
console.log(rest) //  {age: 40, width: 100}

嵌套對(duì)象的解構(gòu)

let obj = {
  size:{
   width:100,
   heigh:200
  },
  items:["cake","Donut"],
  extra:true
}
let { size:{width,heigh},items:[items1,items2],extra} = obj
//復(fù)雜的結(jié)構(gòu)賦值
console.log(`${width}、${heigh}、${items1}、${items2}、${extra}`)

ES5中的回調(diào)地獄(ES6Promise)

JS 中的異步操作的寫法，比如加載一個(gè)腳本資源，可以將這個(gè)操作封裝在一個(gè)函數(shù)中

function loadScript(src) {
 let script = document.createElement('script')
 script.src = src
 document.head.append(script)
}
//這里的異步操作是加載一個(gè)新的腳本。

//loadScript('./script.js')

函數(shù)是異步調(diào)用的因此操作不是此刻(加載腳本) 完成的，而是放在最后執(zhí)行

假設(shè)加載的腳本中定義了新的函數(shù) 想要在腳本加載結(jié)束之后調(diào)用會(huì)發(fā)現(xiàn)無(wú)法調(diào)用

loadScript('./script.js')
//調(diào)用script.js中腳本的函數(shù) 假設(shè)名字是test
test() //會(huì)報(bào)錯(cuò) 說(shuō)函數(shù)不存在 
//由于加載是異步的test()在它被加載進(jìn)來(lái)之前就已經(jīng)定義了

要在腳本引入之后執(zhí)行test 只能利用回調(diào)函數(shù)

function loadScript(src,callback) {
 let script = document.createElement('script')
 script.src = src
 script.onload = ()=>{ 
    callback()
  }
 document.head.append(script)
}
//這里的異步操作是加載一個(gè)新的腳本。
loadScript('./script.js',test())

但是如果異步加載完之后的操作還是要異步加載的話就會(huì)造成回調(diào)地獄

function loadScript(src,callback) {
 let script = document.createElement('script')
 script.src = src
 script.onload = ()=>{ 
    callback()
  }
 document.head.append(script)
}
//這里的異步操作是加載一個(gè)新的腳本。
loadScript('./script.js',loadScript('./script1.js'))
//若一直嵌套 復(fù)雜程度可想而知 若某一環(huán)發(fā)生錯(cuò)誤就更不好操作

所以ES6引出了Promise

function loadScript(src){
 return new Promise((resolve,reject)=>{
   let script = document.createElement('script')
   script.src = src
   script.onload = ()=>{ resolve()}
   script.onerror = (err)=>{ reject(err)}
   document.head.append(script)
  })
}

 loadScript('./1.js')
 .then(()=>{
   loadScript('./2.js')
   test1() //假設(shè)test()是./1.js中定義的函數(shù)
  },(err)=>{console.log(err)})
  .then(()=>{
    loadScript('./3.js')
   test2() //假設(shè)test()是./2.js中定義的函數(shù)
   })

用定時(shí)器模擬一個(gè)異步操作展示Promise的效果

  function test(type,timeout){
    return new Promise((resolve,reject)=>{
       setTimeout(() => {
        resolve(type)
       }, timeout); 
    })
   }
 test(1,1000).then((type)=>{
     console.log(type)
     return test(2,2000)
 }).then((type)=>{
     console.log(type)
     return test(3,3000)
 }).then((type)=>{
     console.log(type)
     console.log('不調(diào)了 不調(diào)了 下班')
 })
//會(huì)依次輸出1，2，3 ,不調(diào)了 不調(diào)了 下班

用promise 實(shí)現(xiàn)一個(gè)AJAX

 function getURL(URL){

    return new Promise((resolve,reject)=>{
        let req = new XMLHttpRequest()
        req.open('GET',URL,true)
        req.onload = function(){
           if(req.status === 200){
               resovle(req.responseText)
           }else{
               reject(new Error(req.statusText))
           }
        }
        req.onerror = ()=>{
            reject(new Error(req.statusText))
        }
        req.send()
    })
 }

 let URL = 'http://httpbin.org/get'

 getURL(URL).then((data)=>{
     console.log(data)
 },(err)=>{
     console.log(err)
 })

Promise.prototype.then()的用法

let promise = new Promise((resolve,reject)=>{
       resolve('傳遞給then的值')
       reject('傳遞給error的值')
  })
  promise.then((value)=>{
    console.log(value)
  },(error) =>{ cnonsole.log(error)})

Promise.resolve()

一般情況下我們都會(huì)使用new Promise()來(lái)創(chuàng)建Promise對(duì)象，但是除此之外也可用其他方法。
靜態(tài)方法Promise.resolve(value) 可以認(rèn)為是new Promise() 方法的快捷方式

比如Promise.resolve(42) 可以認(rèn)為是以下代碼的語(yǔ)法糖

new Promise(function(resolve){
  resolve(42)
})

在這段代碼中的resolve(42) 會(huì)讓這個(gè)Promise對(duì)象立即進(jìn)入確定(即resolved)狀態(tài)，并將42傳遞給
后面的then里所指定的onFullied函數(shù)。
方法Promise.resovle(value)的返回值也是一個(gè)Promise對(duì)象，所以可以直接調(diào)用then

Promise.resolve(42).then(function(value){
  console.log(value)
})

Promise.reject()

Promise.reject(error)是和Promise.resolve(value)類似的靜態(tài)方法，是new Promise() 方法的快捷方式

Promise.reject(new Error('出錯(cuò)了')) 是以下代碼的語(yǔ)法糖

 new Promise(function(){resolve,reject}{
   reject(new Error('出錯(cuò)了'))
  })

代碼的功能是調(diào)用該P(yáng)romise對(duì)象通過(guò)指定then指定的onRejected函數(shù)，并將錯(cuò)誤(Error)對(duì)象
傳遞給這個(gè)onRejected函數(shù)

Promise.reject(new Error('BOOM'))

Promise.prototype.catch()

function test(){
  return new Promise((resolve,reject)=>{
   reject(new Error('es'))
  })
}

test().catch((e) =>{
  console.log(e.message)
})
 

Promise.all()

Promise.all()

示例

 let p1 = Promise.resolve(1)
 let p2 = Promise.resolve(2)
 let p3 = Promise.resolve(3)
Promise.all([p1,p2,p3]).then((res)=>{
  console.log(res) //[1,2,3]
 })
 // p1 p2 p3 分別是三個(gè)異步請(qǐng)求
 //當(dāng)三個(gè)Promise的狀態(tài)都是resolve的時(shí)候 該方法才會(huì)返回對(duì)應(yīng)的值
 // 將三個(gè)異步請(qǐng)求到的數(shù)據(jù)放到一個(gè)res中 是一個(gè)數(shù)組 可以分別取出處理
--------------------------------
 let p1 = Promise.resolve(1)
 let p2 = Promise.resolve(2)
 let p3 = Promise.reject(new Error('錯(cuò)誤消息'))
Promise.all([p1,p2,p3]).then((res)=>{
  console.log(res) //[1,2,3]
 }).catch((err)=>{console.log(err)})
 //當(dāng)三個(gè)Promise的狀態(tài)都是resolve的時(shí)候 有一個(gè)請(qǐng)求不成功就處理不了 該方法才會(huì)返回對(duì)應(yīng)的值

Promise.race()

let p1 = Promise.resolve(1) 
let p2 = Promise.resolve(2)
let p3 = Promise.resolve(3)
Promise.race([p1,p2,p3]).then((res)=>{
  console.log(res)
})
//三個(gè)異步請(qǐng)求 哪個(gè)快用哪個(gè) 場(chǎng)景就是相同的資源放在不同的服務(wù)器上