ES6快速入門

時間 2021-08-14

標籤 es6 編程數組 app 異步 ide 函數 this es5 spa 欄目 JavaScript 简体版

原文原文鏈接

一、變量聲明let和constes6

　　在es6以前，聲明變量都是用var關鍵字，不管聲明在何處，都會被視爲聲明在函數的最頂部，或者是在全局做用域的最頂部，這就是變量提高，例如：編程

    function fun(bool) {
      if (bool) {
        var test = 'hello man'
        console.log(test)
      } else {
        console.log(test)
      }
    }
    fun() // undefined
    fun(true) // hello man

　　以上代碼實際爲：數組

    function fun1(bool) {
      var test // 變量提高
      if (bool) {
        test = 'hello man'
        console.log(test)
      } else {
        //此處訪問test 值爲undefined
        console.log(test)
      }
      //此處訪問test 值爲undefined
    }
    fun1() // undefined
    fun1(true) // hello man

　　因此，無論bool是否爲true或false，test都會被聲明。若是用了var關鍵字，那就是局部變量；若是沒有用var關鍵字，就是全局變量，特麼的這就是所謂的變量提高。app

　　接下來，es6的let和const登場，let表示變量，const表示常量，let和const都是塊級做用域。怎麼理解這個塊級做用域？異步

在一個函數內部
在一個代碼塊內部

　　其實就是 {} 內的代碼塊就是let和const的做用域ide

    function fun(bool) {
      if (bool) {
        let test = 'hello man'
        console.log(test)
      } else {
        //test 在此處訪問不到
        console.log(test) // 報錯：test is not defined
      }
    }
    fun(true)
    fun()

　　const就是一旦定義過的變量不能夠再次賦值：函數

    const name = '吳小明'
    console.log(name)
    name = '孫藝珍'
    console.log(name) // 報錯：Assignment to constant variable

　　可是要注意：const定義的變量，若是是引用類型的話，這個變量的值是能夠改變的，可是這個變量的引用不能夠改變，例如：this

    const person = {
      name: '吳小明',
      age: 18
    }
    console.log(person) // {name: "吳小明", age: 18}
    person.name = '孫藝珍'
    console.log(person) // {name: "孫藝珍", age: 18}
    person = { name: '孫藝珍' }
    console.log(person) // 報錯：Assignment to constant variable

    const arr = [1, 2, 3]
    console.log(arr) // [1, 2, 3]
    arr[1] = 20
    console.log(arr) // [1, 20, 3]
    arr = [10, 20, 30]
    console.log(arr) // 報錯：Assignment to constant variable

二、模板字符串es5

　　這個語法很好的解決了es5在字符串功能上的痛點，並且寫法更簡單了。spa

　　第一個用途：基本的字符串格式化，將表達式嵌入字符串中進行拼接，用 ${} 來界定

    // es5
    let name = '吳小明'
    console.log('姓名：' + name)
    // es6
    let age = 18
    console.log(`年齡：${age}歲`)

　　第二個用途，多行字符串拼接：

    const template = `<div>
        <span>hello world</span>
        <span>hello world</span>
        <span>hello world</span>
        <span>hello world</span>
    </div>`

　　es6還有一些其餘的經常使用的字符串的方法，例如：

    let name = '吳小明'
    console.log(name.includes('吳')) // true
    console.log(name.includes('孫')) // false

    console.log(name.repeat(3)) // 吳小明吳小明吳小明

三、函數

　　函數默認參數的定義：

　　es5中，當傳了num時，取傳入的值，沒有傳入時取默認值200。可是傳入0時，由於0==false，因此不是咱們要的效果，須要單獨作判斷

    function fun(num) {
      num = num || 200
      return num
    }

    console.log(fun()) // 200
    console.log(fun(100)) // 100
    console.log(fun(0)) // 200

　　es6爲參數提供了默認值，在定義函數時就能夠初始化這個參數：

    function fun(num = 200) {
      return num
    }

    console.log(fun()) // 200
    console.log(fun(100)) // 100
    console.log(fun(0)) // 0

　　箭頭函數：

　　三個特色：

　　　　不須要function關鍵字來建立函數

　　　　省略return關鍵字

　　　　繼承當前上下文的this

    let arr = [1, 2, 3, 4, 5]
    // es5
    arr.forEach(function (item) {
      console.log(item)
    })
    // es6
    arr.forEach(item => {
      console.log(item)
    })

四、拓展的對象功能

　　對象初始化簡寫：

　　es5中對於對象都是以鍵值對的形式書寫，是有可能出現鍵值對的重名的，es6能夠對其簡寫例如：

    // es5
    function fun(name, age) {
      return {
        name: name,
        age: age
      }
    }
    // es6
    function fun1(name, age) {
      return {
        name,
        age
      }
    }
    console.log(fun('吳小明', 18)) // {name: "吳小明", age: 18}
    console.log(fun1('吳小明', 18)) // {name: "吳小明", age: 18}

　　爲對象添加方法：

    // es5
    const people = {
      name: '吳小明',
      getName: function () {
        console.log(this.name)
      }
    }
    // es6
    const people1 = {
      name: '吳小明',
      getName() {
        console.log(this.name)
      }
    }
    people.getName()
    people1.getName()

五、解構-更方便的數據訪問

　　es5中提取對象信息：

    let obj = {
      name: '吳小明',
      age: 18
    }
    let name = obj.name
    let age = obj.age
    console.log(name, age)

　　es6中提取對象信息：

    let obj = {
      name: '吳小明',
      age: 18
    }
    let { name, age } = obj
    console.log(name, age)

　　es6中提取數組信息：

    let arr = ['red', 'green', 'blue']
    let [one, two, thre] = arr
    console.log(one, two, thre) // red green blue

    let arr = [
      { name: '吳小明', age: 18 },
      { name: '孫藝珍', age: 17 }
    ]
    let [one, two, thre] = arr
    console.log(one, two, thre) // {name: "吳小明", age: 18} {name: "孫藝珍", age: 17} undefined

六、展開運算符 ...

　　鏈接數組和對象：

    let arr = [1, 2, 3]
    let newArr = [...arr, 4, 5, 6]
    console.log(newArr) // [1, 2, 3, 4, 5, 6]

    let obj = { one: 'one', two: 'two' }
    let newObj = { ...obj, three: 'three', four: 'four' }
    console.log(newObj) // {one: "one", two: "two", three: "three", four: "four"}

　　...rest的使用：

    let arr = [1, 2, 3, 4, 5]
    let [one, ...rest] = arr
    console.log(one, rest) // 1 [2, 3, 4, 5]

    let obj = {
      name: '吳小明',
      age: 18,
      sex: '男'
    }
    let { name, ...rest1 } = obj
    console.log(name, rest1) // 吳小明 {age: 18, sex: "男"}

　　對於Object而言，還能夠用於組合成新的Object，若是有重複的屬性名，右邊覆蓋左邊：

    let obj = {
      name: '吳小明',
      age: 18,
      sex: '男',
      love: 'apple'
    }
    let obj1 = {
      love: 'banana',
      color: 'red'
    }
    let newObj = { ...obj, ...obj1 }
    console.log(newObj) // {name: "吳小明", age: 18, sex: "男", love: "banana", color: "red"}