ES6核心知識迷你包

更多內容關注GitHub

1、放棄使用var

不要再使用var，使用：

• let：用於變量，值可變
• const：用於常量，值不可變

let num = 0;
num = 1;
console,log(num); // 1

const NEWNUM = 0;
NEWNUM = 1; // 拋出錯誤

2、使用箭頭函數

• 箭頭函數自動綁定this
• 一個參數時可以不寫括號，其他情況必須帶括號（無參或者多個參數）
• 不使用箭頭函數的{}時，它將自動返回

// 自動綁定this
Class Person {
    arrow () {
        return () => {
            console.log(this); // Person
        }
    }
}

// 一個參數時可以不寫括號，其他情況必須帶括號（無參或者多個參數）
const arrow = () => {}
const arrow = obj => {}
const arrow = (obj) => {}
const arrow = (obj, item) => {}

// 不使用箭頭函數的{}時，它將自動返回
const arrow = num => num + 1;
const arrow = num => {
    return num + 1;
}

3、爲參數定默認值

const arrow = (arg1, arg2 = 1) => arg1 + arg2;

4、解構賦值

通過解構賦值，可以從對象或數組中提取特定的值。

在這裏可以使用命名參數。

// 從對象中獲取特定的值
const obj = {
    one: '1',
    two: '2',
    three: '3'
}
const extractOfObject = myObj => {
    const { one } = myObj;
    console.log(one); 
}
extractOfObject(obj); // 1

// 從數組獲取特定的值
const arr = ['s', 'u', 'e', 'R', 'i', 'm', 'n'];
const extractOfArray = myArr => {
    const [one, two] = myArr;
    console.log(onw, two);
}
extractOfArray(arr); // s u

5、模塊導入/導出

從一個模塊導出一個默認值以及使用析構賦值導入任意多個命名值。

命名值一定要使用解構賦值導入。

// 導出 export ：

// 導出命名對象
export const obj = {
    "name": "sueRimn",
    "age": 22
}

// 導出命名數組
export const arr = ["sueRimn", 22]

// 導出唯一默認值
export default const only = {
    obj, // 等於 obj: obj
    arr  // 等於 arr: arr
}

// 導入 import ：
import { obj, arr } from './data' // 導入命名值
import only form './data'         // 導入默認值
import * as all from './data'     // 整體導入

6、使用...

rest和spread是不同的，概念相似。

用三個點（...）獲取一個對象或數組的剩餘值，叫rest。

用三個點（...）將一個對象或數組轉換成一個新的對象或數組，叫spread，即擴展運算符。

• 使用rest獲取剩餘值

// 數組使用擴展運算符
const arr = ['sueRimn', '八至', 22];
const restOfArr = myArr => {
    const [one,  ...rest] = myArr;
    console.log(one); // sueRimn
    console.log(rest); // 八至 22
}
restOfArr(arr);
// sueRimn
// 八至 22

// 對象使用擴展運算符
const obj = {
    'name': 'sueRimn',
    'age': 22,
    'gender': '女'
}
const restOfObj = myObj => {
    const { one, ...rest } = myObj;
    console.log(one); // sueRimn
    console.log(rest); // 22 女
}
restOfObj(obj);
// sueRimn
// 22 女

• 使用spead轉換對象和數組爲新對象和數字

const my = {
    name: 'sueRimn',
    gender: '女'
}

const myInfo = {
    age: 22,
    ...my
}
console.log(myInfo); // {age: 22, name: 'sueRimn', gender: '女'}

7、使用模塊字符串

反引號包裝字符串，叫模板字符串。在反斜槓內部，使用${}來執行字符串插值。

const str = `sueRimn is beautiful`;
const adj = 'cute';
const my = str +  `and ${adj}`;
console.log(my); // sueRimn is beautiful and cute!（臉皮厚）

8、類

ES6 的class可以看作只是一個語法糖，只是讓對象原型的寫法更加清晰、更加面向對象編程的語法，實現的功能和ES5是一樣的。

• 類的默認方法constructor默認添加

Class Person {
    constructor (x, y) { // 構造方法
        this.name = 'sueRimn'; // this代表實例對象
        this.gender = '女'
    }
    my () {
        return 'my name is ' + this.name + ',' + this.gender;
    }
}

• 類的實例：使用new命令生成類的實例

new people = new Person('八至', '女')

• 類的繼承：通過extends實現，這在react中是常見的組件寫法

class Girl extends from Person {
    constructor(name, gender, age) {
        super(name, gender, age); // super表示父類的構造函數，用來新建父類的this對象
        this.name = name;
        this.gender = gender;
        this.age = age;
    }
    
    my () {
        return super.my() + ',' + this.age;// 調用父類的my()方法
    }
}