ES6

內容

• 語法

  • 定義變數 const let
  • 結構解析

• 增強

  • 字串增強

    • 模板字串

    • repeat()
      

    • padEnd() padStart()
      

      • length 引數
      • str 引數

    • trim()
      

    • for of
      

    • includes
      

    • startsWith() endsWith()
      

  • 陣列增強

  • 函式增強

1 語法

• 定義變數
• 結構解析

1.1 定義變數

• 塊級作用域 作用的範圍
• 優點
  • 具有塊級作用域
  • 防止變數全域性汙染
  • 防止變數提升帶來的問題

1.1.1 let 定義

• 在for迴圈中可以使用
• 可以不賦值,只定義

let a = 10
let b

1.1.2 const 定義

• 需要定義並且賦值
• 在閉包或者函式中使用較多

const b = 10

1.2 結構解析

• 取值比較方便
• 又稱結構賦值
• 開發中呼叫介面取值的時候使用較多

1.2.1 使用

let a = {
    data: {
        message: [1,3,4]
    }
}
let res = { data: { message: } } 

2 增強

2.1 字串增強

• trim()
• includes()
• startsWith() 和endsWith()
• padEnd() 和 padStart() ES7
• repeat()

2.1.1 trim()

• 去掉字串前後空白

2.1.2 includes()

• 判斷字元是否存在
• 返回值為boolean型別

2.1.3 startsWith() 和 endsWith()

• 判斷第一個字元或者最後一個字元是否為引數
• 返回值為boolean型別

2.1.4 padEnd() 和 padStart()

• ES7語法

• 以第二個引數填充

• 兩個引數

  • 第一個引數為:length 填充後的字元長度

  • 第二個引數為:str 要填充的字元

     let str= "hello"
     console.log( str.padStart(9,'0')) // 0000hello
    

2.1.5 repeat()

• 重複

2.1.6 模板字串*

• ${}
• 在開發中使用較多

2.2 陣列增強

2.2.1 ES5的高階函式

some

• 無返回值 boolean

• 可以寫一些業務邏輯

• 只要有滿足的就返回true

  let res3= obj.some((el,index)=>{
          if(el.id===2){
              return true
          }
      })
      console.log(res3)// true
  

filter

• 有返回值 返回一個新的陣列 並且每一項不能修改

   let res= arr.filter((el,index)=>{
        if(el > 4){
            return true
        }
    })
    console.log(res)// [5, 7]

every

map

• 有返回值 返回一個新的陣列 並且每一項可以修改

 let  a =arr.map((el,index)=>{
        if(el > 4) {
            return el + 1
        }
    })
    console.log(a) // [undefined, undefined, 6, 8]

forEach

• 無返回值
• 不會終止函式

 let arr = [1,3,5,7]
    arr.forEach((el,index)=>{
        console.log(el)
    })

2.2.2 ES5 的其他函式

indexOf 和 lastIndexOf

indexOf

lastIndexOf

reduce 和 reduceRight

reduce

reduceRight

find 和 findIndex

find

• 返回查詢的結果

• 有返回值

  let res=obj.find((el,index)=>{
          if(el.id===1){
              return true
          }
      })
      console.log(res) // {id: 1, name: "lay"}
  

findIndex

• 返回查詢結果的索引

• 有返回值

  let res2=obj.findIndex((el,index)=>{
          if(el.id===1){
              return true
          }
      })
      console.log(res2)// 1
  

2.2.3 ES6陣列方法

includes

• 與字串的方法用法相同

fill

• 填充 將字串的所有元素都替換(初始化陣列)

• 可以傳參 —>第一個引數是填充的元素 第二個引數是被填充元素的起始位置,第三個引數是結束位置

• 會改變原來陣列

  let arr = [1,3,2]
          arr.fill(7)
          console.log(arr) // [7,7,7]
          let arrs = [1,3,2,2]
          arrs.fill(7,2,3)
          console.log(arrs)//[1, 3, 7, 2]
  

2.2.4 偽陣列的處理

Array.from

• 將偽陣列變成陣列,從而可以使用陣列的方法

Array.from(arr)

Array.of

• 將元素合併成為一個陣列

  Array.of(1,2,3)// [1,2,3]
  

2.3 物件增強

簡化

鍵和值相同時可以合併

可以直接寫方法和函式

鍵可以放拼接的值(包裹)

• ['a'+'b']:"拼接"
• 常量可以包裹

方法

Object.is() 嚴格相等===

• 物件為引用型別 不全等

Object.assign() 拷貝

• Object.assign({},obj1,obj2)
• 將物件的賦給第一個物件上面 會改變原來的物件

2.4 函式增強

預設引數

普通預設引數

test(x=1){}

結構解析預設引數

test({x,y=1}){}

不定引數

ES5

• 在ES5當中用arguments(偽陣列),但是不能使用陣列方法

ES6

• reset引數+擴充套件運算子

   let arr = [1,3,2,5,2]
              function test (...reset){
                  let res=0
                  reset.forEach((el)=>{
                      res+=el
                  })
                  return res
              }
              let [ , ,...newArr]= arr
              console.log(test(...newArr)) //9 後三項和為9 
  

箭頭函式

• 箭頭函式使函式看起來更加簡單

3 ES6模組化

3.1 Number

• 減少全域性屬性的方法
• 屬於Number方法的掛載到Number的原型上,使其模組化

3.1.1 isFinite()

• 判斷是不是無限數

3.1.2 isNaN()

• 判斷是否是一個數

3.1.3 parseInt()

• 取整 一般可以去掉單位方便計算

3.1.4 parseFloat()

• 取小數

3.1.5 EPSILON

• 精確浮點數

3.2 Math

3.2.1 trunc()

• 去除一個數的小數部分

3.2.2 sign()

• 判斷一個數是正數 負數 0

3.2.3 cbrt()

• cbrt() 計算一個數的立方根

3.2.4 ** 指數

• 計算一個數的指數

  2 ** 2  = 4
  

3.3 全域性

• isInteger()
• isSafeInteger()

4 遍歷

4.1 ES6前

4.1.1 遍歷物件

for in

  let obj= {
            id:0,
            name:'sheep'
        }
        for ( let el in obj){
            console.log(el,obj[el])
        }
// id 0
// name sheep

4.1.2 遍歷陣列

for

forEach

4.2 ES6

for of

• 可以遍歷物件
• 可以遍歷陣列
• 遍歷索引(keys) 遍歷值(value) 遍歷索引和值(entries)

遍歷物件

let obj= {
            id:0,
            name:'sheep'
        } 
for ( let el of Object.entries(obj)){
            console.log(el)//["id", 0] ["name", "sheep"]
        }

遍歷陣列

let arr = [1]
        for (let el of Object.entries(arr)){
             console.log(el)// ["0", 1]
        }

5 新增類的繼承

ES5繼承

• ES5中沒有類的概念
• ES5 組合繼承
  • 冒充繼承(call)
  • 原型繼承(子類的原型指向父類的例項)

原生繼承

• 子類可以繼承父類的屬性
• 子類不能繼承父類的方法
• 子類以冒充的形式繼承(call)

實現

 		// 父類
        function Person(name,age){
            this.name=name
            this.age=age
        }
        //子類
        function Son(name,age){
            Person.call(this,name,age) // 繼承
        }
        // 使用
        let son=new Son("lay",12);
        console.log(son)//Son{name: "lay", age: 12}

原生繼承+原型繼承

• 子類可以繼承父類的屬性
• 子類可以繼承父類的方法
• 子類原型指向父類的例項

實現

• 子類的原型=父類的例項

    		// 父類
          function Person(name,age){
              this.name=name
              this.age=age
          }
          Person.prototype.say=()=>{
              console.log("hhhh")
          }
          //子類
          function Son(name,age){
              Person.call(this,name,age) // 繼承
          }
          // 原型繼承
          Son.prototype= new Person()
          // 使用
          let son=new Son("lay",12);
          console.log(son)//Son{name: "lay", age: 12}
          son.say() // hhhh
  

ES6 類繼承

• 關鍵字 extends super class constructor

實現

       // 父類
        class Person{
            constructor(name,age) {
                this.name=name
                this.age=age
            }
            say(){
                console.log('hello')
            }
        }
        // 子類
        class Son extends Person{
            constructor(name,age,hobby) {
                super(name,age);
                this.hobby=hobby
            }
        }
        // 例項化
        let son = new Son('lay',12,'sing')
        console.log(son)//Son{name: "lay", age: 12}
        console.log(son.hobby)// sing
        son.say()// hello