ES6 常用知識彙總

ES6模組化如何使用，開發環境如何打包？

1.模組化的基本語法

/* export 語法 */
// 預設匯出
export default {
  a: '我是預設匯出的',
}
// 單獨匯出
export function fn1() {
  console.log('我是函式1')
}
export function fn2() {
  console.log('我是函式2')
}

/* import 語法 */
// 匯入
// 預設匯入
import util1 from './demo'
// 單獨匯入
import { fn1, fn2 } from './demo'

console.log(util1)
fn1()
fn2()

2.開發環境配置

• Babel
  ES6新語法需要進行編譯，即轉換為ES5或者更早版本的語法，這個時候就需要Babel來進行轉換
  Babel是什麼？Babel是一個 JavaScript 編譯器，主要用於將 ECMAScript 2015+ 版本的程式碼轉換為向後相容的 JavaScript 語法，以便能夠執行在當前和舊版本的瀏覽器或其他環境中。Babel中文網
• Webpack模組化工具

3.關於JS眾多模組化標準

class和普通建構函式有何區別？

1.JS建構函式

function MathHandle(x, y) {
  this.x = x
  this.y = y
}
MathHandle.prototype.add = function () {
  return this.x + this.y
}
var m = new MathHandle(1, 2)
console.log(m.add()) // 3

2.class基本語法

class MathHandle {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  add() {
    return this.x + this.y
  }
}
const m = new MathHandle(1, 2)
console.log(m.add()) // 3

3.語法糖

/* 本質只是一個語法糖 */
console.log(typeof MathHandle) // 'function'
console.log(MathHandle === MathHandle.prototype.constructor) // true
console.log(m.__proto__ === MathHandle.prototype) // true

4.繼承

// class 的繼承
class Father {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  money() {
    console.log('我有100元錢')
  }
  sum() {
    console.log(this.name + '有' + this.age + '歲')
  }
}
// extends 繼承父類
class Son extends Father {
  constructor(name, age) {
    super(name, age) // super 呼叫了父類中的建構函式
  }
}
var son = new Son('小鑫', 22)
//可以使用父類的方法
son.money() // 我有100元錢
son.sum() // 小鑫有22歲

5.總結

class更加貼合物件導向的寫法；更加易讀、理解；本質還是語法糖，還是使用 prototype 實現的

Promise的基本使用和原理

為了解決“回撥地獄”（鏈式傳送ajax請求）而出現的一種解決方案，比如下面這種情況

$.ajax({
    url: 'http:/localhost:3000/data',
    success: function (response) {
        console.log(response);
        $.ajax({
            url: 'http:/localhost:3000/data2',
            success: function (response) {
                console.log(response);
                $.ajax({
                    url: 'http:/localhost:3000/data3',
                    success: function (response) {
                        console.log(response);
                    }
                })
            }
        })
    }
})

這個時候就需要使用promise來處理ajax請求，主要分為以下四個步驟：

• new Promist例項，而且要return；
• new Promist時要傳入函式，函式有resolve reject兩個引數；
• 成功時執行resolve()，失敗時執行reject()
• .then .catch監聽結果

/**
 * @description 基於Promise傳送Ajax請求
 * @param {String} url 請求地址
 */
function queryDate(url) {
  const promise = new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.send()
    if (xhr.onload) {
      // onload 只有狀態碼為4時才能回撥一次函式
      xhr.onload = function () {
        if (xhr.status === 200) {
          // 處理正常情況
          resolve(xhr.responseText)
        } else {
          // 處理異常的情況
          reject('伺服器錯誤')
        }
      }
    } else {
      // 支援低版本ie
      // onreadystatechange是隻要返回的狀態碼只要變化時就回撥一次函式
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 處理正常情況
          resolve(xhr.responseText)
        } else {
          // 處理異常情況
          reject('伺服器錯誤')
        }
      }
    }
  })
  return promise
}

// 傳送多個ajax請求並且保證順序 鏈式呼叫
// 第一次ajax請求
queryData('http://localhost:3000/data')
  .then(function (data) {
    console.log(data)
    // 第二次ajax請求
    return queryData('http://localhost:3000/data2')
  })
  .then(function (data) {
    console.log(data)
    // 第三次ajax請求
    return queryData('http://localhost:3000/data3')
  })
  .then(function (data) {
    console.log(data)
  })

ES6其他常用的功能

• let/const
• 多行字串/模板變數
• 結構賦值
• 塊級作用域
• 函式預設引數
• 箭頭函式(注意：是普通js函式的補充，修正this的指向)

附帶上一張學習ES6基礎時的思維導圖