ES6使用總結

WinMin發表於2018-10-12

簡單回顧總結一下使用ES6的知識點。詳細教程請看阮一峰的教程

1. let&const

  • 在塊級作用域內有效；
  • 不存在變數提升，宣告後才能使用；
  • 不可重複宣告；
  • 在全域性作用域下，不會被新增到全域性物件中。
var b =[];
// ES5寫法
for(var i =0;i<5;i++){
    b[i] = function(i){
        return function(){
            console.log(i)
        }
    }(i)
}

// ES6寫法
for(let i =0;i<5;i++){
    b[i] = function(){
        console.log(i)
    }
}


b[0](); //0
b[1](); //1
b[2](); //2
b[3](); //3
複製程式碼

2. 箭頭函式

  • 常用於函式表示式，將箭頭函式賦給變數；
  • 取定義時上下文的this值；
  • 簡寫語法；
// 簡寫
const sayHello = name => `hello, ${name}`;
console.log(sayHello('jack')) // hello, jack

// 閉包
const people = {
    name : 'jack',
    getName() {
        return () => {console.log(this.name)}
    }
}
const printName = people.getName();
printName(); //jack
複製程式碼
  1. 函式
  • 引數預設值寫法
  • 引數使用擴充套件符
  • 解構賦值取值
function box(content='apple', color='black', ...rest){ // 預設值和擴充套件符...
    const [width, height] = rest; //解構
    console.log(`${content} -> ${color} ->${width} -> ${height}`)
}
box('origin'); // origin -> black ->undefined -> undefined
box('origin','red',20,10) // origin -> red ->20 -> 10
複製程式碼

4. 迴圈 & 遍歷

  • for of （陣列的項、物件的值）
  • for in （陣列的下標、物件的鍵） 遍歷可列舉屬性

5. Map & Set

  • Map 鍵值對陣列。new Map -> .set(key,value); .get(key); .size(); .has(key) .key(); .value()
  • Set 唯一值陣列。 new Set([array]) -> .add(value); .has(value)

6. 類

  • 簡單的語法糖，更像物件導向的程式設計；
  • 靜態屬性和方法，只有類和它的子類能呼叫；
  • getter 和 setter，用直接取值賦值替代使用方法操作例項的屬性；
  • 繼承 extends 。 super()呼叫父類構造方法，super.fn()呼叫父類宣告的方法

7. Promise

  • 非同步程式設計 padding resolved rejected
  • new Promise(fn(resolve,reject)) -> .then -> .catch
  • async await async函式返回Promise物件，可正常呼叫後使用then或catch 處理。await 呼叫Promise物件也可使用then和catch單獨處理。
  • 避免濫用await ,使用 Promise.all([promise1,promise2]).then(function(resolve1,resolve2))

8. 陣列

  • map 對陣列元素依次進行操作，並將返回值組成一個新的陣列。操作函式格式為fn(element,index,array){return newelement}
  • filter 以某個條件依次過濾陣列元素，將返回true表示滿足條件的陣列組成新陣列，返回false的元素被過濾掉。操作函式格式為fn(element,index,array){return true or false}
  • reduce 聚合陣列，操作後最終返回一個值。

9. 模板字串。

  • 字串拼接
  • 保留格式（空格、換行、引號）
  • 動態獲取變數

10. 匯入匯出。

  • import
  • export、 export default

相關文章