前言

ES6全稱ECMAScript是2015年發(fā)布的第六版本意述，因?yàn)榘姹靖绿笏员皇熘壳耙呀?jīng)更新到第八個(gè)版本）

一志秃、聲明變量

1. let關(guān)鍵字

概括：聲明變量關(guān)鍵字，解決var關(guān)鍵字存在的問(wèn)題

優(yōu)點(diǎn)：

1. 存在塊級(jí)作用域

   {
       let str = 'kuaijizuoyongyu'
   }
   console.log(str) // 無(wú)法訪問(wèn)作用域里面的變量 str is not defined
   

2. 不存在變量提升

   console.log(str)
   let str = 'bianliangtisheng' // 無(wú)法訪問(wèn)未聲明的let變量 str is not defined
   

3. 不可以重復(fù)聲明

   let str = 'chongfushengming'
   let str = 'chongfushengming1' // 無(wú)法重復(fù)聲明 Identifier 'str' has already been declared
   

var關(guān)鍵字缺點(diǎn)：

1. 沒(méi)有塊級(jí)作用域

   {
       var str = 'kuaijizuoyongyu';
   }
   console.log(str); // 不存在塊級(jí)作用域 'bianliangtisheng'
   

2. 不可以限制修改

   var str = 'xianzhixiugai'
   str = 'xiugaiguohou'
   console.log(str) // 可以修改 xiugaiguohou
   

3. 可以重復(fù)聲明

   var str = 'chongfushengming'
   var str = 'chongfushengming1'
   console.log(str) // 可以重復(fù)聲明,重復(fù)聲明做賦值操作 chongfushengming1
   

4. 存在變量提升

   console.log(str) // 變量提升但是賦值不提升 undefined
   var str = 'bianliangtisheng' 
   

2. const關(guān)鍵字

概括：聲明常量關(guān)鍵字

優(yōu)點(diǎn)：

1. 一旦聲明不可改變舔株，避免var關(guān)鍵存在的變量污染問(wèn)題

    const str = 'changliang'
    str = 'xiugai'
    console.log(str) // 無(wú)法修改 Assignment to constant variable.
   

2. 和let關(guān)鍵字一樣存在塊級(jí)作用域

    {   
       const str = 'changliang'
    }
    console.log(str); // 無(wú)法訪問(wèn)作用域里面的常量 str is not defined
   

3. 不存在變量提升

    console.log(str) // 無(wú)法訪問(wèn)未聲明的常量 str is not defined
    const str = 'bianliangtisheng'
   

4. 無(wú)法重復(fù)聲明

    const str = 'shengmingchangliang'
    const str = 'shengmingchangliang1'
    console.log(str) // 無(wú)法重復(fù)聲明 Identifier 'str' has already been declared
   

二首启、箭頭函數(shù)

概括：將原生函數(shù)的function改為 => 箭頭方式進(jìn)行聲明

優(yōu)點(diǎn)：減少代碼量，提高代碼執(zhí)行效率

缺點(diǎn)：

1. 會(huì)出現(xiàn)this指向問(wèn)題（由于箭頭函數(shù)本身沒(méi)有this指向驻龟，它指向的是宿主this温眉，一旦沒(méi)有this，將會(huì)指向window對(duì)象）
2. 語(yǔ)法過(guò)于激進(jìn)翁狐，初學(xué)者不易懂

使用方法：

1. 如果只有一個(gè)參數(shù),可以去掉括號(hào)(注意沒(méi)有參數(shù)時(shí)也要加上()占位)

    const fun = x =>{return x * x}
    console.log(fun(3))  // 輸出9
   

2. 如果只有一條返回語(yǔ)句,可以再去掉return和{ }

    const fun = x => x * x
    console.log(fun(3))  // 輸出9
   

3. 箭頭函數(shù)在返回對(duì)象時(shí)必須在對(duì)象外層多加一個(gè)()

    const fun = id=>{({id:id, name:'張三'})}
    console.log(fun(10).name)
   
    // 相當(dāng)于:
    //const fun = id=>{ 
    //    return ({id:id, name:'張三'})
    //}
    // 因?yàn)閷?duì)象有{},如果不括起來(lái)無(wú)法識(shí)別這是一個(gè)對(duì)象(變量)還是函數(shù)體內(nèi)容
   

三类溢、新增數(shù)組方法

1. filter 方法

概括：過(guò)濾數(shù)組（過(guò)濾出返回為true的數(shù)據(jù)）

參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

1. 參數(shù)1：數(shù)組單元數(shù)據(jù)
2. 參數(shù)2：每個(gè)單元索引
3. 參數(shù)3：數(shù)組本身

返回值：返回過(guò)濾后的新數(shù)組

 let arr = [1,2,3,4]
 arr.filter((data,index,array) => {
     console.log(data) // 數(shù)組每個(gè)單元數(shù)據(jù)
     console.log(index) // 數(shù)組下標(biāo)
     console.log(array) // 原數(shù)組本身
     return data == 1 // 過(guò)濾返回為true的數(shù)據(jù)
 })

2. reduce 方法

概括：迭代數(shù)組所有項(xiàng)(累加器)

參數(shù)：兩個(gè)參數(shù)

1. 參數(shù)1（入?yún)⒑瘮?shù)參數(shù)）：回調(diào)函數(shù)（必選）
   • 回調(diào)參數(shù)1：上一次回調(diào)返回值，或者初始值（必選）
   • 回調(diào)參數(shù)2：數(shù)組中被處理的數(shù)據(jù)項(xiàng)（必選）
   • 回調(diào)參數(shù)3：數(shù)據(jù)項(xiàng)在數(shù)組中的索引（可選）
   • 回調(diào)參數(shù)4：原數(shù)組（可選）
2. 參數(shù)2：初始值（可選）

返回值：返回?cái)?shù)組計(jì)算后的結(jié)果

 let arr = [1,2,3,4]
 arr.reduce((pre,data,index,array) => {
     console.log(pre) // 數(shù)組上一次計(jì)算結(jié)果露懒，如果未計(jì)算則是初始值
     console.log(data) // 數(shù)組中被處理的數(shù)據(jù)項(xiàng)
     console.log(index) // 數(shù)據(jù)項(xiàng)在數(shù)組中的索引
     console.log(array) // 原數(shù)組
     return pre + data // 將每次累加結(jié)果進(jìn)行累加下一項(xiàng)
 }, 0) // 設(shè)置遍歷初始值

擴(kuò)展用法：

1. 計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)

 let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
 let nameNum = names.reduce((pre,cur)=>{
    if(cur in pre){
       pre[cur]++
    }else{
       pre[cur] = 1 
    }
    return pre
 },{})
 console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

2. 數(shù)組去重

 // 單數(shù)組去重
 let arr = [1,2,3,4,4,1]
 let newArr = arr.reduce((pre,cur)=>{
     if(!pre.includes(cur)){
       return pre.concat(cur)
     }else{
       return pre
     }
 },[])
 console.log(newArr);// [1, 2, 3, 4]

 // 數(shù)組對(duì)象去重
 let arr = [{a: 0, name: 'zhangsan'}, {b: 0, name: 'lisi'}]
 let Obj = {}
 person = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
 },[]) 

3. 將二維數(shù)組轉(zhuǎn)化為一維數(shù)組

 let arr = [[0, 1], [2, 3], [4, 5]]
 let newArr = arr.reduce((pre,cur)=>{
     return pre.concat(cur)
 },[])
 console.log(newArr); // [0, 1, 2, 3, 4, 5]

4. 將多維數(shù)組轉(zhuǎn)化為一維數(shù)組

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
 const newArr = function(arr){
    return arr.reduce((pre,cur)=>{
        pre.concat(Array.isArray(cur) ? newArr(cur) : cur   
    }),[])
 }
 console.log(newArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7]

5. 對(duì)象里面屬性求和

 var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
 ];

 var sum = result.reduce(function(prev, cur) {
     return cur.score + prev;
 }, 0);
 console.log(sum) //60

3. reduceRight 方法

概括：迭代數(shù)組所有項(xiàng)（從右至左進(jìn)行計(jì)算闯冷，同數(shù)組reduce方法）

參數(shù)：同數(shù)組的reduce方法參數(shù)

返回值：數(shù)組計(jì)算結(jié)果

 let arr = [1,2,3,4]
 arr.reduceRight((pre,data,index,array) => {
     console.log(pre) // 數(shù)組上一次計(jì)算結(jié)果，如果未計(jì)算則是初始值
     console.log(data) // 數(shù)組中被處理的數(shù)據(jù)項(xiàng)
     console.log(index) // 數(shù)據(jù)項(xiàng)在數(shù)組中的索引
     console.log(array) // 原數(shù)組
     return pre + data // 將每次累加結(jié)果進(jìn)行累加下一項(xiàng)
 }, 0) // 設(shè)置遍歷初始值

4. Array.from 方法

概括：將偽數(shù)組轉(zhuǎn)化成數(shù)組懈词，只要含length屬性的都可轉(zhuǎn)化成數(shù)組（ES6）

參數(shù)：需要轉(zhuǎn)化的偽數(shù)組

返回值：轉(zhuǎn)化后的數(shù)組

 let str = 'asdf'
 console.log(Array.from(str)) // 將字符串轉(zhuǎn)化成數(shù)組 [a,s,d,f]

 let obj = {0:'a',1:'b',length:2}
 console.log(Array.from(obj))   // 含索引并length屬性的對(duì)象也可以轉(zhuǎn)化成數(shù)組 ['a', 'b']

5. Array.of 方法

概括：將一組值轉(zhuǎn)化成數(shù)組蛇耀，類似于生明數(shù)組（ES6）

參數(shù)：需要轉(zhuǎn)化的值

返回值：轉(zhuǎn)化后的數(shù)組

 console.log(Array.of('11')) // 將字符串轉(zhuǎn)化成數(shù)組 ['11']
 console.log(Array.of({a:1,b:2})) // 將對(duì)象轉(zhuǎn)化成數(shù)組 [{a:1,b:2}]
 console.log(new Array('11')) // 類似于構(gòu)造函數(shù)聲明數(shù)組
 console.log(new Array(2)) // 構(gòu)造函數(shù)生明因?yàn)槿雲(yún)?wèn)題容易容易引起重載  [empty × 2] 空數(shù)組

6. copyWithin 方法

概括：在數(shù)組內(nèi)部將指定位置的數(shù)組賦值到其他位置，會(huì)覆蓋原數(shù)組項(xiàng)坎弯，返回當(dāng)前數(shù)組

參數(shù)：三個(gè)參數(shù)

1. 參數(shù)1：開(kāi)始位置纺涤，從該位置開(kāi)始替換數(shù)組項(xiàng)（必傳）
2. 參數(shù)2：從指定索引開(kāi)始讀取數(shù)組項(xiàng)译暂，默認(rèn)為0，如果為負(fù)值洒琢，則從右往左讀（可選）
3. 參數(shù)3：從指定索引結(jié)束讀取數(shù)組項(xiàng)秧秉，默認(rèn)為數(shù)組長(zhǎng)度，如果是負(fù)值表示倒數(shù)（可選）

返回值：處理好的數(shù)組

 let arr = [1,2,3,4,5]
 arr.copyWithin(3) // 從下標(biāo)3的位置上開(kāi)始衰抑，默認(rèn)將整個(gè)數(shù)組作為數(shù)據(jù)項(xiàng)進(jìn)行替換象迎，長(zhǎng)度不夠默認(rèn)截取 [1, 2, 3, 1, 2]
 arr.copyWithin(0, 2) // 從下標(biāo)為0位置開(kāi)始，默認(rèn)將從下標(biāo)2位置截取到末尾作為數(shù)據(jù)項(xiàng)進(jìn)行替換呛踊，長(zhǎng)度不夠默認(rèn)截取  [3, 4, 5, 4, 5]
 arr.copyWithin(0, 2, 3) // 從下標(biāo)0位置開(kāi)始砾淌，默認(rèn)將從下標(biāo)2位置截取到下標(biāo)3位置之前作為數(shù)據(jù)項(xiàng)進(jìn)行替換，長(zhǎng)度不夠默認(rèn)截取 [3, 2, 3, 4, 5]

 arr.copyWithin(-1) // 從倒數(shù)倒數(shù)第一位開(kāi)始谭网，默認(rèn)將整個(gè)數(shù)組作為數(shù)據(jù)項(xiàng)進(jìn)行替換汪厨，長(zhǎng)度不夠默認(rèn)截取 [1, 2, 3, 4, 1]
 arr.copyWithin(-1, -2) // 從倒數(shù)第一位置開(kāi)始，默認(rèn)將從倒數(shù)第二位置默認(rèn)截取到末尾作為數(shù)據(jù)項(xiàng)進(jìn)項(xiàng)替換愉择，長(zhǎng)度不夠默認(rèn)截取 [1, 2, 3, 4, 4]
 arr.copyWithin(-1, -4, -2) // 從倒數(shù)第一位置開(kāi)始劫乱，默認(rèn)將從倒數(shù)第四的位置開(kāi)始截取到倒數(shù)第二的位置作為數(shù)據(jù)項(xiàng)項(xiàng)進(jìn)項(xiàng)替換，長(zhǎng)度不夠默認(rèn)截取 [1, 2, 3, 4, 2]

7. find 方法

概括：找到第一個(gè)符合條件的數(shù)組數(shù)據(jù)項(xiàng)

參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

1. 參數(shù)1：數(shù)組數(shù)據(jù)項(xiàng)
2. 參數(shù)2：數(shù)據(jù)項(xiàng)下標(biāo)
3. 參數(shù)3：原數(shù)組

返回值：符合條件的數(shù)組數(shù)據(jù)項(xiàng)

 let arr = [1,2,3,4,5]
 arr.find((item, index, array) => {
     console.log(item) // 數(shù)組數(shù)據(jù)項(xiàng)
     console.log(index) // 數(shù)據(jù)項(xiàng)下標(biāo)
     console.log(array) // 原數(shù)組
     return item > 1 // 此條件不會(huì)校驗(yàn)數(shù)組所有數(shù)據(jù)項(xiàng)锥涕，只會(huì)校驗(yàn)第一條符合條件的數(shù)據(jù)
 })

8. findIndex 方法

概括：找到第一個(gè)符合條件的數(shù)組數(shù)據(jù)項(xiàng)下標(biāo)

參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：同數(shù)組find方法

返回值：符合條件數(shù)據(jù)項(xiàng)下標(biāo)

 let arr = [1,2,3,4,5]
 arr.findIndex((item, index, array) => {
     console.log(item) // 數(shù)組數(shù)據(jù)項(xiàng)
     console.log(index) // 數(shù)據(jù)項(xiàng)下標(biāo)
     console.log(array) // 原數(shù)組
     return item > 1 // 此條件不會(huì)校驗(yàn)數(shù)組所有數(shù)據(jù)項(xiàng)衷戈，只會(huì)校驗(yàn)第一條符合條件的數(shù)據(jù)
 })

9. fill 方法

概括：使用指定值填充整個(gè)數(shù)組

參數(shù)：

1. 參數(shù)1：待填充的數(shù)據(jù)
2. 參數(shù)2：開(kāi)始填充的位置
3. 參數(shù)3：結(jié)束填充的位置（該位置前一位）

返回值：填充后的數(shù)組

 let arr = [1,2,3,4]
 arr.fill(1) // 默認(rèn)將數(shù)組所有項(xiàng)填充成該數(shù)據(jù) [1,1,1,1]
 arr.fill(1,2) // 以參數(shù)1為填充項(xiàng)，將數(shù)據(jù)從坐標(biāo)為2位置開(kāi)始填充至數(shù)組末尾 [1,2,1,1]
 arr.fill(1,2,4) // 以參數(shù)1為填充項(xiàng)层坠，將是數(shù)據(jù)從坐標(biāo)2位置開(kāi)始填充至下標(biāo)為4位置 [1,2,1,4]

10. keys 方法

概括：遍歷數(shù)組的鍵名（一般針對(duì)于Set殖妇、Map數(shù)據(jù)集合使用）

參數(shù)：無(wú)

返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器），在數(shù)據(jù)層面顯示數(shù)組下標(biāo)

 let arr = [1,2,3,4]
 let arr2 = arr.keys()
 console.log(arr2) // Array Iterator {}

 for (let key of arr2) {
    console.log(key);   // 0,1,2,3
 }

11. value 方法

概括：遍歷數(shù)組鍵名（一般針對(duì)于Set破花、Map數(shù)據(jù)集合使用）

參數(shù)：無(wú)

返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器）谦趣，在數(shù)據(jù)層面顯示數(shù)組每個(gè)數(shù)據(jù)項(xiàng)

 let arr = [1,2,3,4]
 let arr2 = arr.value()
 console.log(arr2) // Array Iterator {}

 for (let val of arr2) {
    console.log(val);   // 1,2,3,4
 }

12. entries 方法

概括：遍歷數(shù)組的鍵值和鍵名（迭代數(shù)組，一般針對(duì)于Set座每、Map數(shù)據(jù)集合使用）

參數(shù)：無(wú)

返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器）前鹅，在數(shù)據(jù)層面顯示數(shù)組每個(gè)單元的數(shù)據(jù)項(xiàng)和下標(biāo)作為一個(gè)數(shù)組

 let arr = [1,2,3,4]
 let arr1 = arr.entries()
 console.log(arr1) // Array Iterator {}

 for (let e of arr1) {
     console.log(e);   // [0,1] [1,2] [2,3] [3,4]
 }

13. map 方法

概括：遍歷數(shù)據(jù)（映射數(shù)組）

參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

1. 參數(shù)1：數(shù)組單元數(shù)據(jù)
2. 參數(shù)2：每個(gè)單元索引
3. 參數(shù)3：數(shù)組本身

返回值：返回映射后的新數(shù)組

 let arr = [1,2,3,4]
 arr.map((data,index,array) => {
    console.log(data) // 數(shù)組每個(gè)單元數(shù)據(jù)
    console.log(index) // 數(shù)組下標(biāo)
    console.log(array) // 原數(shù)組本身
 })

14. for...of

概括：遍歷數(shù)據(jù)

參數(shù)：無(wú)

與for...in的區(qū)別：

1. for...of 只能遍歷數(shù)組，而for...in能遍歷對(duì)象和數(shù)組
2. for...in 遍歷的是對(duì)象key（數(shù)組也是對(duì)象峭梳，下標(biāo)是鍵嫡纠，數(shù)據(jù)項(xiàng)是值），for...of遍歷的是數(shù)組的每一項(xiàng)
3. 如果動(dòng)態(tài)給數(shù)組添加一個(gè)鍵值對(duì)延赌，for...in會(huì)將數(shù)組的鍵包括添加的屬性名一起遍歷除盏，而for...of只會(huì)遍歷原數(shù)組數(shù)據(jù)項(xiàng)

 let arr = [1,2,3,4]
 let obj = {name: '張三', age: 50}
 arr.name = '張三'
 
 for(let item of arr) {
     console.log(item) // 返回的數(shù)組的每一個(gè)單元 1,2,3,4
 }
 for(let item of obj) {} // 不是可迭代對(duì)象 obj is not iterable

 for(let item in arr) {
     console.log(item) // 返回的是數(shù)組的key 0,1,2,3,name
 }
 for(let item in obj) {
     console.log(item) // 返回的是對(duì)象的每一個(gè)key name,age
 }

返回值：返回?cái)?shù)組 length 長(zhǎng)度

 let arr = [1,2,3,4]
 for(let i of arr) {
    console.log(i) // 1,2,3,4
 }

四、Map和Set數(shù)據(jù)結(jié)構(gòu)

1. Set 數(shù)據(jù)結(jié)構(gòu)

概括：Set數(shù)據(jù)結(jié)構(gòu)挫以，是由一些不重復(fù)的元素組成的內(nèi)存結(jié)構(gòu)（類似于數(shù)組）者蠕，統(tǒng)稱為集合

參數(shù)：接收一個(gè)數(shù)組

屬性：size（集合中包含元素的數(shù)量）

操作方法：

1. add(value)：向集合中添加一個(gè)新的項(xiàng)
2. delete(value)：從集合中刪除一個(gè)值
3. has(value)：校驗(yàn)集合中是否包含該元素
4. clear()：移出集合中所有項(xiàng)

 let set = new Set([1,2])
 set.add(3) // Set {1,2,3}
 set.has(2) // true
 set.delete(2) // Set {1,3}
 set.clear() // Set {}

遍歷方法：

1. keys(): 返回鍵名的遍歷器
2. values(): 返回鍵值的遍歷器
3. entries(): 返回鍵值對(duì)的遍歷器
4. forEach(): 使用回調(diào)函數(shù)遍歷每個(gè)成員

 let set = new Set([1,2,3,4])  
 // 由于set只有鍵值，沒(méi)有鍵名掐松，所以keys() values()行為完全一致  
 console.log(Array.from(set.keys())) // [1,2,3,4]  
 console.log(Array.from(set.values())) // [1,2,3,4]  
 console.log(Array.from(set.entries())) //  [[1,1],[2,2],[3,3],[4,4]]  
 set.forEach((item) => { console.log(item)}) // 1,2,3,4 

返回值：Set數(shù)據(jù)集合（可以去除重復(fù)數(shù)據(jù)）

let set = new Set([1,2,1,2])
console.log(Set) // Set數(shù)據(jù)集合 {1, 2}

2. Map 數(shù)據(jù)結(jié)構(gòu)

概括：Map數(shù)據(jù)結(jié)構(gòu)踱侣，是有一些不重復(fù)的鍵和值組成的內(nèi)存結(jié)構(gòu)（類似于對(duì)象）粪小，鍵只能是字符串類型，統(tǒng)稱為字典

參數(shù)：二維數(shù)組 [[ 鍵: 值 ], [ 鍵: 值 ]]

屬性：size（Map對(duì)象中所有鍵值對(duì)的數(shù)量）

操作方法：

1. set( key: value )：向Map對(duì)象中加入或更新鍵值對(duì)
2. get( key )：讀取Map對(duì)象中對(duì)應(yīng)key的值抡句，如果沒(méi)有返回 undefined
3. has( key )：校驗(yàn)?zāi)硞€(gè)key是否在Map對(duì)象中探膊，再返回true 否則返回 false
4. delete( key )：刪除Map對(duì)象中的某個(gè)key，返回 true待榔，如果刪除失敗返回 false
5. clear()：清除Map對(duì)象中的所有值

 let map = new Map([['name','vue3js.cn']])  
 map.set('age','18') // Map {"name" => "vuejs.cn", "age" => "18"}  
 map.get('name') // vue3js.cn   
 map.has('name') // true  
 map.delete('name') // Map {"age" => "18"}  
 map.clear() // Map {}  

遍歷方法：同Set數(shù)據(jù)對(duì)象

返回值：Map數(shù)據(jù)字典（可以去除重復(fù)數(shù)據(jù)）

let map new Map([[1,2],[1,2]])
console.log(map) // Map {1 => 2}

五逞壁、字符串新增方法與模板字符串

1. includes()

概括：校驗(yàn)字符串中是否包含指定字符

參數(shù)：參數(shù)1（指定字符）、參數(shù)2（起始位置）

返回值：Boolean（布爾值）

let str = 'asdfghjkl'
str.includes('a') //  包含指定字符 " 返回  true
str.includes('x') // 不包含指定字符 返回  false
str.includes('a', 1) // 從字符串下標(biāo)為1開(kāi)始查找指定字符 返回  false

2. startsWith()

概括：校驗(yàn)字符串是否以特定字符開(kāi)頭

參數(shù)：參數(shù)1（指定字符）參數(shù)2（起始位置）

返回值：Boolean（布爾值）

let str = 'asdfghjkl'
str.startsWith('a') // 校驗(yàn)原字符串以a字符開(kāi)頭  true
str.startsWith('s') // 校驗(yàn)原字符串以s字符開(kāi)頭  false
str.startsWith('a', 1) // 從下標(biāo)為1的位置校驗(yàn)字符串是否以a字符開(kāi)頭  false

3. endsWith()

概括：校驗(yàn)字符串是否以特定字符結(jié)尾

參數(shù): 要查詢的字符

返回值：Boolean（布爾值）

 let str = 'asdfghjkl'
 str.startsWith('l') // 校驗(yàn)原字符串以 l字符結(jié)尾  true
 str.startsWith('s') // 校驗(yàn)原字符串以s字符結(jié)尾  false
 str.startsWith('l', 3) // 從下標(biāo)為3的位置校驗(yàn)字符串是否以a字符結(jié)尾  false

4. repeat()

概括：重復(fù)當(dāng)前字符串

參數(shù)：重復(fù)當(dāng)前字符串的次數(shù)

返回值：重復(fù)后的字符串

 let str = 'a'
 str.repeat(2) // 將原字符串重復(fù)兩次  aa

5. padStart()

概括：字符串首位補(bǔ)全

參數(shù)：參數(shù)1（字符串長(zhǎng)度）锐锣、參數(shù)2（要添加的字符）

返回值：返回補(bǔ)全后的字符串

 let str = 'asdfghjkl'
 str.padStart(12, '123') // 補(bǔ)全字符串首位 123asdfghjkl
 str.padStart(12) // 如參數(shù)二不傳腌闯，默認(rèn)補(bǔ)充空格  "    asdfghjkl"
 str.padStart(10, '123') // 如補(bǔ)充字符串長(zhǎng)度超過(guò)原字符串補(bǔ)充位數(shù)自動(dòng)截取  1asdfghjkl

6. padEnd()

概括：字符串末位補(bǔ)全

參數(shù)：參數(shù)1（字符串長(zhǎng)度）、參數(shù)2（要添加的字符）

返回值：返回補(bǔ)全后的字符串

 let str = 'asdfghjkl'
 str.padEnd(10, '123') // 如補(bǔ)充字符串長(zhǎng)度超過(guò)原字符串補(bǔ)充位數(shù)自動(dòng)截取  asdfghjkl1
 str.padEnd(12, '123') // 補(bǔ)全字符串末位 asdfghjkl123

7. trimStart()

概括：過(guò)濾字符串中首位空格部分

參數(shù)：無(wú)

返回值：過(guò)濾后的字符串

 let str = '  aaa  '
 str.trimStart(2) // 過(guò)濾字符串中首位的空格部分  "aaa  '

8. trimEnd()

概括：過(guò)濾字符串中末位空格部分

參數(shù)：無(wú)

返回值：過(guò)濾后的字符串

 let str = '  aaa  '
 str.trimEnd(2) // 過(guò)濾字符串中末位的空格部分  "  aaa'

9. replaceAll()

概括：替換字符傳中所有指定字符

參數(shù)：參數(shù)1（原始字符）雕憔、參數(shù)2（替換字符）

返回值：返回替換后的字符串

 let str = 'asdfghjklas'
 str.replace('as', 'yz') // 返回替換字符后的字符串 yzdfghjklyz
 str.replace('ad', 'yz') // 如未找到指定字符姿骏，則返回原字符串 asdfghjkl

10. 模板字符串

概括：將傳統(tǒng)字符串（單引號(hào)或者雙引號(hào)）改為反引號(hào) ``

特點(diǎn)：

1. 增加了解析變量功能，通過(guò) ${} 解析模板字符串中的變量
2. 增加解析換行操作

 let str = '
    換行操作
 ' // 語(yǔ)法錯(cuò)誤 Invalid or unexpected token

 let str = `
    支持換行操作
 `
 console.log(str) // 在瀏覽器控制臺(tái)上會(huì)將換行操作轉(zhuǎn)換成換行符 "\n\t支持換行\(zhòng)n"

 let str = '模板變量'
 console.log(`可以解析${str}`) // 可以解析模板變量

六斤彼、解構(gòu)賦值

1. 概括

解構(gòu)賦值是對(duì)賦值運(yùn)算符的擴(kuò)展分瘦。 他是一種針對(duì)數(shù)組或者對(duì)象進(jìn)行模式匹配,然后對(duì)其中的變量進(jìn)行賦值

2. 對(duì)于普通數(shù)組

 let arr = [1,2,3,4]
 let [a,b,c,d] = arr 
 console.log(a,b,c,d) // 1,2,3,4

3. 對(duì)于對(duì)象

 let obj = {
     name: '張三',
     age: '10',
 }
 let { name, age } = obj // 解構(gòu)對(duì)象時(shí)，左側(cè)的變量必須和對(duì)象里面鍵值對(duì)key一樣琉苇，否則返回undefined
 console.log(name, age) // 張三擅腰，10

4. 解構(gòu)變量少于解構(gòu)對(duì)象數(shù)量時(shí)

 let arr = [1,2,3,4]
 let [a,b,c] = arr // 變量少于數(shù)組長(zhǎng)度時(shí)，會(huì)按照順序賦值
 console.log(a,b,c) // 1,2,3

 let obj = {
     name: '張三',
     age: '10',
     sex: '男'
 }
 let { name, age } = obj // 變量少于對(duì)象key時(shí)翁潘，會(huì)按照順序進(jìn)行賦值
 console.log(name, age) // 張三，10

5. 復(fù)合賦值

 let arr = [{name:'張三', age:10}, [1,2,3], 'hello', 9 ];
 let [a,b,c,d] = arr; // 解構(gòu)數(shù)組中包含多種類型的數(shù)據(jù)

 console.log(a);  // {name:'張三', age:10}
 console.log(b); // [1,2,3]
 console.log(c); // hello
 console.log(d); // 9

6. 分解賦值

 let arr = [{name:'張三', age:10}, [1,2,3], 'helloWord', 100 ];
 let[{name,age},[a,b,c],d,e] = arr; // 解構(gòu)數(shù)組中包含多種類型的數(shù)據(jù)

 console.log(name,age);  // 張三 10
 console.log(a,b,c);     // 1 2 3 
 console.log(d,e);       // helloWord 100

7. 聲明和賦值不可分開(kāi)

 let [name, age]; // 報(bào)錯(cuò) Missing initializer in destructuring declaration

七歼争、擴(kuò)展運(yùn)算符和rest運(yùn)算符

概括：將數(shù)組拜马、對(duì)象或字符串里面數(shù)據(jù)進(jìn)行擴(kuò)展平鋪，與其相反的是rest運(yùn)算符

使用場(chǎng)景：

1. 合并數(shù)組

 let arr1 = [1,2]
 let arr2 = [3,4]
 console.log([...arr1, ...arr2]) //  [1, 2, 3, 4]

2. 合并對(duì)象

 let obj1 = {name: '張三'}
 let obj2 = {age: 10}
 console.log({...obj1, ...obj2}) // {name: "張三", age: 10}
 console.log(Object.assign(obj1,obj2)) // 等同于此項(xiàng)操作 {name: "張三", age: 10}

3. 剩余(rest)運(yùn)算符

 function rest (...m) {
    console.log(m) // 將多個(gè)實(shí)參通過(guò)rest運(yùn)算符進(jìn)行合并成一個(gè)形參
    let num = 0; 
    for(let i of m){
        num += i;
    }
    return num;
}
console.log(sumRest(1,2,3)); // 6

4. rest運(yùn)算符于解構(gòu)賦值一起使用

 let arr = [1,2,3,4];
 let [a,b,...c] = array;  // 將數(shù)組前兩項(xiàng)進(jìn)行解構(gòu)沐绒，后兩項(xiàng)機(jī)構(gòu)后在合并成單獨(dú)數(shù)組
 console.log(a); // 1
 console.log(b); // 2
 console.log(c); // [3, 4]

區(qū)別：其實(shí)兩者屬于一種運(yùn)算符方法俩莽。唯一的區(qū)別就是使用場(chǎng)景不一樣，擴(kuò)展運(yùn)算主要做平鋪操作乔遮，rest運(yùn)算符主要做合并操作

八扮超、對(duì)象新語(yǔ)法

1. 面向?qū)ο?/h4>

概括：面向?qū)ο笫且环N編程思想。其中提出了類的概念蹋肮，通過(guò)class類語(yǔ)法的使用提高代碼的執(zhí)行效率

特點(diǎn)：

1. 封裝：將方法中的相同的一類進(jìn)行整合
2. 繼承：一個(gè)類繼承另一個(gè)類的特性稱為繼承出刷，提高復(fù)用性
3. 多態(tài)：通過(guò)不同的入?yún)⒄故静煌男袨?/li>
4. 抽象：將一類的實(shí)體的共同特性抽象出來(lái)封裝在一個(gè)抽象類中

2. class類概念

概括：在ES6中，class作為聲明類的關(guān)鍵字坯辩，相當(dāng)于function的語(yǔ)法糖馁龟。使得對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法

定義：

1. 類定義

 // 匿名類
 let Example = class {
    constructor(a) {
        this.a = a;
    }
 }
 // 命名類
 let Example = class Example {
    constructor(a) {
        this.a = a;
    }
 }

2. 類聲明

 class Example {
    constructor(a) {
        this.a = a;
    }
 }

語(yǔ)法：

1. 使用class聲明類漆魔，使用constructor創(chuàng)建構(gòu)造函數(shù)

 // 創(chuàng)建類
 class Person {
    // 創(chuàng)建構(gòu)造函數(shù)
    constructor(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
 }

2. class類中的方法不需要使用function關(guān)鍵字

  // 創(chuàng)建類
 class Person {
    // 創(chuàng)建構(gòu)造函數(shù)
    constructor(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    handleEdit() { // ES6 語(yǔ)法直接可以聲明
        console.log(this.name)
    }
 }

3. 通過(guò)new關(guān)鍵字，來(lái)創(chuàng)建class類的實(shí)例（可以傳入?yún)?shù)）

   // 創(chuàng)建類
 class Person {
    // 創(chuàng)建構(gòu)造函數(shù)
    constructor(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    handleEdit() { // ES6 語(yǔ)法直接可以聲明
        console.log(this.name)
    }
 }
 let person1 = new Person('張三','18','男')

4. class類中方法通過(guò)對(duì)象的 . 語(yǔ)法來(lái)使用

   // 創(chuàng)建類
 class Person {
    // 創(chuàng)建構(gòu)造函數(shù)
    constructor(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    handleEdit() { // ES6 語(yǔ)法直接可以聲明
        console.log(this.name)
    }
 }
 let person1 = new Person('張三','18','男')
 person1.handleEdit()

5. 子類通過(guò)extends繼承父類中的屬性和方法

 // 父類
 class Person {
    // 創(chuàng)建構(gòu)造函數(shù)
    constructor(name, age, sex, id){
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.id = id // 在子類實(shí)例對(duì)象中創(chuàng)建的屬性在父類中也可以獲取到
    }
    handleEdit() { // ES6 語(yǔ)法直接可以聲明
        console.log(this.Id)
    }
 }
 
 // 子類
 class Students extends Person {
     
 }
 let student1 = new Students('張三','18','男', '12138')
 student1.handleEdit() // 可以調(diào)用父類中的方法
 console.log(student1.name) // 可以獲取父類中的屬性

6. 子類通過(guò)super()可以使用父類中的構(gòu)造方法凶异，默認(rèn)使用父類中的構(gòu)造方法瓢湃，如果子類中使用constructor則會(huì)覆蓋繼承父類中構(gòu)造方法

 // 父類
 class Person {
    // 創(chuàng)建構(gòu)造函數(shù)
    constructor(name, age, sex, id){
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.id = id // 在子類實(shí)例對(duì)象中創(chuàng)建的屬性在父類中也可以獲取到
    }
    handleEdit() { // ES6 語(yǔ)法直接可以聲明
        console.log(this.Id)
    }
 }
 
 // 子類
 class Students extends Person {
     construtor(){
        // 子類創(chuàng)建構(gòu)造方法里面沒(méi)有任何屬性和方法，仍會(huì)覆蓋父類的構(gòu)造方法
     }
 }

7. 使用super簡(jiǎn)化子類的構(gòu)造函數(shù)

 // 父類
 class Person {
    // 創(chuàng)建構(gòu)造函數(shù)
    constructor(name, age, sex, id){
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.id = id // 在子類實(shí)例對(duì)象中創(chuàng)建的屬性在父類中也可以獲取到
    }
    handleEdit() { // ES6 語(yǔ)法直接可以聲明
        console.log(this.Id)
    }
 }
 
 // 子類
 class Students extends Person {
     construtor(){
        super(name, age, gender);   // 使用父類的方法給name,age,gender賦值
        // 這里相當(dāng)于:
        // this.name = name;
        // this.age = age;
        // this.gender = gender;
        // 這種情況下直接使用super()可以達(dá)到簡(jiǎn)化的目的

        // 再加上新入的id屬性
        this.id = id
     }
 }

8. 重寫(xiě)父類中的方法

 // 父類
 class Person {
    // 創(chuàng)建構(gòu)造函數(shù)
    constructor(name, age, sex, id){
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.id = id // 在子類實(shí)例對(duì)象中創(chuàng)建的屬性在父類中也可以獲取到
    }
    handleEdit() { // ES6 語(yǔ)法直接可以聲明
        console.log(this.Id)
    }
 }
 
 // 子類
 class Students extends Person {
     construtor(){
        super(name, age, gender);   // 使用父類的方法給name,age,gender賦值
        // 這里相當(dāng)于:
        // this.name = name;
        // this.age = age;
        // this.gender = gender;
        // 這種情況下直接使用super()可以達(dá)到簡(jiǎn)化的目的

        // 再加上新入的id屬性
        this.id = id
     }
     
     // 子類方法中不寫(xiě)任何內(nèi)容系瓢，仍會(huì)覆蓋父類中的方法
     handleEdit() {
         
     }
 }

3. JSON用法

概括：JSON 語(yǔ)法衍生于 JavaScript 對(duì)象標(biāo)記法語(yǔ)法（ JavaScript Object Notation）

語(yǔ)法：

1. 簡(jiǎn)寫(xiě)變量，如果鍵名和變量名相同的話可以簡(jiǎn)寫(xiě)為一個(gè)

 let name = '張三'
 let age = 10
 let sex = "男"

 // 簡(jiǎn)寫(xiě)方式
 let obj = {
    name,
    age,
    sex
 }
 console.log(obj.name) // 張三

2. 簡(jiǎn)寫(xiě)方法句灌，可以省略function聲明函數(shù)關(guān)鍵字

 let obj = {
    say() {
        console.log('簡(jiǎn)寫(xiě)方法')
    }     
 }
 obj.say() // 簡(jiǎn)寫(xiě)方法

3. 對(duì)象轉(zhuǎn) JSON 字符串（串行化）

 let obj = {
     name: '張三',
     age: '李四'
 }
 console.log(JSON.stringify(obj)) // 串行化 {"name":"張三", "age":15}

4. JSON字符串轉(zhuǎn)對(duì)象（反串行化）

 let str = JSON.parse('{"name":"李四","age":"19"}')
 console.log(str.name) // 李四

九夷陋、模塊化編程

1. 概括

將一個(gè)大的程序拆分成多個(gè)互相依賴的小模塊，按需引入所需模塊涯塔，從而提高代碼的復(fù)用性

2. 原始方法

概括：通過(guò)script的src屬性引入文件

缺點(diǎn)：

1. 全局作用域下容易造成變量沖突
2. 文件只能按照js的書(shū)寫(xiě)規(guī)范順序進(jìn)行加載
3. 開(kāi)發(fā)人員必須解決模塊和代碼庫(kù)的依賴關(guān)系
4. 大型項(xiàng)目中資源難以管理肌稻，代碼可維護(hù)性較差

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

3. CommonJs規(guī)范

概括：CommonJs是服務(wù)器端模塊的規(guī)范。由NodeJs推廣使用

規(guī)范：

1. 一個(gè)單獨(dú)的文件就是一個(gè)模塊匕荸。每個(gè)模塊都是一個(gè)單獨(dú)的作用域爹谭，在模塊內(nèi)部定義的變量無(wú)法其他模塊讀取，除非定義全局的global對(duì)象
2. 暴露模塊變量最好方法是使用module.exports對(duì)象
3. 引入模塊使用require方法榛搔，該方法讀取一個(gè)文件并執(zhí)行诺凡，返回文件內(nèi)部的方法

缺點(diǎn)：需要依賴服務(wù)器端，只在瀏覽器端無(wú)法正常加載

語(yǔ)法：通過(guò)define方法封裝一套標(biāo)準(zhǔn)的模塊

 /******************傳統(tǒng)commonJs規(guī)范**********************/
 // a.js文件
 exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
 };

 // b.js文件
 var add = require('math').add;
 exports.increment = function(val) {
    return add(val, 1);
 };

 // c.js文件
 var increment = require('b').increment;
 var a = increment(1); // 2

 /***********************二次封裝commonJs規(guī)范*************************/
 // a.js文件
 define(function(require, exports, module) {
   exports.add = function() {
     var sum = 0, i = 0, args = arguments, l = args.length;
     while (i < l) {
       sum += args[i++];
     }
     return sum;
   };
 });

// b.js文件
define(function(require, exports, module) {
  var add = require('a').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

// c.js文件
define(function(require, exports, module) {
  var inc = require('b').increment;
  inc(1); // 2
});

4. AMD規(guī)范

概括：AMD 異步模塊定義 的意思践惑。他是一個(gè)瀏覽器端模塊化開(kāi)發(fā)規(guī)范腹泌，主要使用的 RequireJs 語(yǔ)法庫(kù)

參數(shù)：AMD也是采用 require() 語(yǔ)法加載模塊的，和CommonJs不同的是需要兩個(gè)參數(shù)

1. 參數(shù)1：是一個(gè)模塊加載的隊(duì)列數(shù)組
2. 參數(shù)2：加載成功之后的回調(diào)函數(shù)

 // a.js文件
 export.add = function(a, b) {
     return a + b
 }
 
 // b.js文件
 require(['a']), function(a) {
     a.add(2, 3)
 }

解決問(wèn)題：

1. 多個(gè)js文件可能有依賴關(guān)系尔觉，被依賴的文件需要早于依賴它的文件加載到瀏覽器
2. js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染凉袱，加載文件越多，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)

語(yǔ)法：

// 定義模塊 b.js
define(['a.js'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加載模塊
require(['b'], function (my){})

5. CMD規(guī)范

概括：CMD 通用模塊定義侦铜。主要使用的是seaJs語(yǔ)法庫(kù)专甩，和AMD規(guī)范類似只是執(zhí)行時(shí)機(jī)不同

規(guī)范：

1. 一個(gè)模塊一個(gè)文件，經(jīng)常以文件名作為模塊Id
2. 推崇依賴就近原則钉稍，所以不在define的參數(shù)中寫(xiě)依賴
3. factory函數(shù)作為define函數(shù)的入?yún)⒑瘮?shù)

參數(shù)：

1. 參數(shù)1：require 是一個(gè)方法涤躲，接受模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口
2. 參數(shù)2：exports是一個(gè)對(duì)象贡未，用來(lái)向外提供模塊接口
3. 參數(shù)3：module是一個(gè)對(duì)象种樱，上面儲(chǔ)存著其他模塊的屬性和方法

 // 定義模塊  a.js
 define(function(require, exports, module) {
   var $ = require('jquery.js')
   $('div').addClass('active');
 });

 // 加載模塊
 seajs.use(['a.js'], function(my){});

區(qū)別（和AMD的區(qū)別）：

1. AMD推崇依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊
2. CMD推崇就近依賴俊卤，只有在用到某個(gè)模塊的時(shí)候再去require

6. ES6模塊化

概括：模塊功能主要是有兩個(gè)命令構(gòu)成export和import嫩挤。export方法規(guī)定模塊對(duì)外暴露，import方法規(guī)定指定模塊導(dǎo)入

語(yǔ)法：

1. 將script標(biāo)簽引入的js文件進(jìn)行模塊化

 <!--可以將每個(gè)js文件的變量進(jìn)行私有化-->
 <script src="./a.js" type="module"></script>
 <script src="./b.js" type="module"></script>
 <script src="./c.js" type="module"></script>

2. 訪問(wèn)不同模塊下訪問(wèn)相同的變量

 // a.js文件
 let name = '張三'
 let age = 10
 export {name, age} // JSON的簡(jiǎn)寫(xiě)方法

 // b.js文件
 import { name, age } from 'a.js'
 console.log(name, age) // '張三', 10

3. 設(shè)置不同模塊下相同變量的別名

 // a.js文件
 let name = '張三'
 let sex = '男'
 export {
    name, sex
 }
 
 // b.js文件
 let name = '花花'
 let sex = '女'
 export {
    name, sex
 }
 
 // c.js文件
 import sex as sex1 from 'a.js'
 import sex as sex2 from 'b.js'
 console.log(sex1) // 男
 console.log(sex1) // 女

4. 匿名直接暴露模塊

 // a.js文件
 export default function(a) {
     console.log(a)
 }
 
 // b.js文件
 import aFun from 'a.js' // 只能引入一次消恍，引入多次會(huì)報(bào)錯(cuò)
 aFun(10) // 調(diào)用a.js 文件中的方法

5. 暴露所有屬性

 // a.js文件
 function add() {
     console.log('add')
 }
 function del() {
     console.log('del')
 }
 function edit() {
     console.log('edit')
 }
 function query() {
     console.log('del')
 }

 export default {
     add,
     del,
     edit,
     query
 }
 
 // b.js文件
 import * as methods from 'a.js'
 methods.add() // add'
 methods.del() // del'
 methods.edit() // edit'
 methods.query() // query

十俐镐、Promise對(duì)象

概括：用來(lái)解決異步操作，解決冗余的回調(diào)地獄

參數(shù)：

1. pending：操作進(jìn)行中
2. resolve：操作成功
3. reject：操作失敗

回調(diào)函數(shù)：

1. 成功時(shí)回調(diào)函數(shù)（then)

 new Promise((pending, resolve, reject) => {
       console.log(resolve, reject)
 }).then((res) => {}) // 成功回調(diào)

2. 失敗時(shí)回調(diào)函數(shù)（catch）

 new Promise((pending, resolve, reject) => {
       console.log(resolve, reject)
 }).then((res) => { // 成功回調(diào)
     console.log(res)
 }).catch((err) => { // 失敗回調(diào)
     console.log(err)
 })

優(yōu)點(diǎn)：

1. 有效的控制了程序的異步操作
2. 解決了回調(diào)地獄的問(wèn)題哺哼，提高了代碼的可讀性
3. 可以對(duì)項(xiàng)目中的接口進(jìn)行統(tǒng)一的封裝管理

缺點(diǎn)：

1. 程序一旦執(zhí)行佩抹，途中無(wú)法停止
2. 當(dāng)其中執(zhí)行程序報(bào)錯(cuò)時(shí)叼风，不會(huì)反應(yīng)到promise程序以外
3. 無(wú)法確定pending狀態(tài)下的程序執(zhí)行到哪一個(gè)階段（開(kāi)始，還是結(jié)束）

擴(kuò)展：

1. Promise.all：所有任務(wù)都執(zhí)行完成再調(diào)用

 // Promise 加載隊(duì)列
 let promises = [1,2,3,4].map(function(id){
   return getJSON("/post/" + id + ".json");
 });
 
 Promise.all(promises).then(function(posts) {
   // ...  
 }).catch(function(reason){
   // ...
 });

2. Promise.race：那個(gè)任務(wù)執(zhí)行完成就先輸出那個(gè)結(jié)果

 // Promise 加載隊(duì)列
 let promises = [1,2,3,4].map(function(id){
   return getJSON("/post/" + id + ".json");
 });
 
 // 加載隊(duì)列中那個(gè)先執(zhí)行完成就先輸出那個(gè)結(jié)果
 Promise.race(promises).then(function(posts) {
   // ...  
 }).catch(function(reason){
   // ...
 });

十一棍苹、總結(jié)

1. 以上是個(gè)人總結(jié)的常用ES6新增匯總无宿，歡迎各位網(wǎng)友斧正??
2. 參考以下各位大神文章
   • https://juejin.cn/post/6964360374359752734
   • https://www.runoob.com/w3cnote/javascript-promise-object.html