ES6特性一覽

class類

constructor()：構造函數，new命令生成實例時自動調用
extends：繼承父類
super：新建父類的this
static：定義靜態屬性方法
get：取值函數，攔截屬性的取值行爲
set：存值函數，攔截屬性的存值行爲

私有屬性方法

const name = Symbol("name");
const print = Symbol("print");
class Person {
    constructor(age) {
        this[name] = "Bruce";
        this.age = age;
    }
    [print]() {
        console.log(`${this[name]} is ${this.age} years old`);
    }
}

繼承混合類

function CopyProperties(target, source) {
    for (const key of Reflect.ownKeys(source)) {
        if (key !== "constructor" && key !== "prototype" && key !== "name") {
            const desc = Object.getOwnPropertyDescriptor(source, key);
            Object.defineProperty(target, key, desc);
        }
    }
}
function MixClass(...mixins) {
    class Mix {
        constructor() {
            for (const mixin of mixins) {
                CopyProperties(this, new mixin());
            }
        }
    }
    for (const mixin of mixins) {
        CopyProperties(Mix, mixin);
        CopyProperties(Mix.prototype, mixin.prototype);
    }
    return Mix;
}
class Student extends MixClass(Person, Kid) {}

Module

export：規定模塊對外接口
- 默認導出：export default Person(導入時可指定模塊任意名稱，無需知曉內部真實名稱)
- 單獨導出：export const name = "Bruce"
- 按需導出：export { age, name, sex }
- 改名導出：export { name as newName }
import：導入模塊內部功能
- 默認導入：import Person from "person"
- 整體導入：import * as Person from "person"
- 按需導入：import { age, name, sex } from "person"
- 改名導入：import { name as newName } from "person"
- 自執導入：import "person"
- 複合導入：import Person, { name } from "person"

模塊方案

CommonJS：用於服務器(動態化依賴)
AMD：用於瀏覽器(動態化依賴)
CMD：用於瀏覽器(動態化依賴)
UMD：用於瀏覽器和服務器(動態化依賴)
ESM：用於瀏覽器和服務器(靜態化依賴)

加載實現

傳統加載：通過<script>進行同步或異步加載腳本
- 同步加載：<script src=""></script>
- Defer異步加載：<script src="" defer></script>(順序加載，渲染完再執行)
- Async異步加載：<script src="" async></script>(亂序加載，下載完就執行)
模塊加載：<script type="module" src=""></script>(默認是Defer異步加載)

promise

定義：包含異步操作結果的對象
狀態
- 進行中：pending
- 已成功：resolved
- 已失敗：rejected
特點
- 對象的狀態不受外界影響
- 一旦狀態改變就不會再變，任何時候都可得到這個結果
聲明：new Promise((resolve, reject) => {})
出參
- resolve：將狀態從未完成變爲成功，在異步操作成功時調用，並將異步操作的結果作爲參數傳遞出去
- reject：將狀態從未完成變爲失敗，在異步操作失敗時調用，並將異步操作的錯誤作爲參數傳遞出去

方法

then()：分別指定resolved狀態和rejected狀態的回調函數
- 第一參數：狀態變爲resolved時調用
- 第二參數：狀態變爲rejected時調用(可選)
catch()：指定發生錯誤時的回調函數

let p = new Promise(function(resolve, reject) {
  // 封裝異步操作，傳入成功時執行的resolve函數和失敗執行的reject函數
  $.ajax({
    url: "https://xxx",
    success(data) {
      resolve("success", data);
      // 成功的話執行resolve函數，並傳入一個狀態和對應的數據，在後面then的時候調用
    },
    error(data) {
      reject("error", data);
      // 失敗執行reject函數，在後面catch的時候調用
    }
  });
});

// 在這裏進行異步操作的回調處理
p.then(function(status, data) {
  // 成功時的回調函數，相當於此時執行resolve方法
  console.log(status, ":", data);
}).catch(function(status, data) {
  // 失敗時的回調函數，相當於此時執行reject方法
  console.log(status, ":", data);
});

Promise.all()：將多個實例包裝成一個新實例，返回全部實例狀態變更後的結果數組(齊變更再返回)
- 入參：具有Iterator接口的數據結構
- 成功：只有全部實例狀態變成fulfilled，最終狀態纔會變成fulfilled
- 失敗：其中一個實例狀態變成rejected，最終狀態就會變成rejected

new Promise.all([
    // 傳入一個包含多個異步操作的數組
    $.ajax({ url: "https://xxx", dataType: "json"}),
    $.ajax({ url: "https://yyy", dataType: "json"}),
    $.ajax({ url: "https://zzz", dataType: "json"}),
]).then(
    // 通過then方法調用後續操作，分別傳入一個成功和失敗的處理方法
    ([data1, data2, data3]) => {
        // 返回的數組分別是data1,data2,data3，通過結構方式接受
        console.log(data1, data2, data3);
    }, res => {
        console.log("失敗");
    })

Promise.race()：將多個實例包裝成一個新實例，返回全部實例狀態優先變更後的結果(先變更先返回)
- 入參：具有Iterator接口的數據結構
- 成功失敗：哪個實例率先改變狀態就返回哪個實例的狀態

Promise.race([
    $.ajax({ url: "https://xxx", dataType: "json"}),
    $.ajax({ url: "https://yyy", dataType: "json"}),
    $.ajax({ url: "https://zzz", dataType: "json"}),
]).then(
    (data) => {
        // 只對第一個完成的操作進行回調
        console.log(data);
    }, res => {
        console.log("失敗");
    })

Promise.resolve()：將對象轉爲Promise對象(等價於new Promise(resolve => resolve()))
- Promise實例：原封不動地返回入參
- Thenable對象：將此對象轉爲Promise對象並返回(Thenable爲包含then()的對象，執行then()相當於執行此對象的then())
- 不具有then()的對象：將此對象轉爲Promise對象並返回，狀態爲resolved
- 不帶參數：返回Promise對象，狀態爲resolved
Promise.reject()：將對象轉爲狀態爲rejected的Promise對象(等價於new Promise((resolve, reject) => reject()))

Async

聲明
- 具名函數：async function Func() {}
- 函數表達式：const func = async function() {}
- 箭頭函數：const func = async() => {}
- 對象方法：const obj = { async func() {} }
- 類方法：class Cla { async Func() {} }
await命令：等待當前Promise對象狀態變更完畢
- 正常情況：後面是Promise對象則返回其結果，否則返回對應的值
- 後隨Thenable對象：將其等同於Promise對象返回其結果

async function aaa() {
    console.log(0);
    let x = await $.ajax({ url: "https://xxx", dataType: "json" }, function(data) { console.log(data); })
    // x接收異步操作返回的數據
    // 由於這裏使用了await等待，所以在該步會等待異步操作執行
    // 如果異步操作失敗成功則執行後續步驟，否則不會進行後面的操作
    console.log(1);
    let y = await $.ajax({ url: "https://yyy", dataType: "json" }, function(data) { console.log(data); })
    console.log(2);
    let z = await $.ajax({ url: "https://zzz", dataType: "json" }, function(data) { console.log(data); })
    console.log(3);
}

錯誤處理：將await命令Promise對象放到try-catch中(可放多個)

async function aaa() {
  console.log(0);
  try{
    let x = await $.ajax({ url: "https://xxx", dataType: "json" }, function(data) { console.log(data); })
    console.log(x);
  } catch(e) {
    // 捕捉失敗的請求
    console.log(e);
  }
}

重點難點

Async函數返回Promise對象，可使用then()添加回調函數

function ajax() {
  // 封裝成Promise對象
  return new Promise((resolve, reject) =>
    $.ajax({
      url: "https://xxx",
      dataType: "json",
      success(data) {
        // then裏調用
        resolve(data);
      },
      error(e) {
        // 失敗時catch捕捉
        reject(e);
      }
    })
  );
}

async function aaa() {
  console.log(0);
  let x = await ajax().then(data => data).catch(e => false);
  // 異步成功則只執行then，返回data，失敗則捕捉並返回false
  console.log(x);
}

內部return返回值會成爲後續then()的出參
內部拋出錯誤會導致返回的Promise對象變爲rejected狀態，被catch()接收到
返回的Promise對象必須等到內部所有await命令Promise對象執行完纔會發生狀態改變，除非遇到return語句或拋出錯誤
任何一個await命令Promise對象變爲rejected狀態，整個Async函數都會中斷執行
希望即使前一個異步操作失敗也不要中斷後面的異步操作
- 將await命令Promise對象放到try-catch中
- await命令Promise對象跟一個catch()
await命令Promise對象可能變爲rejected狀態，最好把其放到try-catch中
多個await命令Promise對象若不存在繼發關係，最好讓它們同時觸發
await命令只能用在Async函數之中，否則會報錯
數組使用forEach()執行async/await會失效，可使用for-of和Promise.all()代替
可保留運行堆棧，函數上下文隨着Async函數的執行而存在，執行完成就消失

箭頭函數

1.沒有自己的this，導致內部的this就是外層代碼塊的this

2.因爲沒有this，因此不能用作構造函數

a = {
    name: "aaa",
    fn: function() {
        console.log(this, this.name + "bbb")
        // 使用function定義的this會綁定到當前對象，因此輸出爲當前對象a和"aaabbb"
    },
    fn1: () => {
        console.log(this, this.name + "bbb")
        // 箭頭函數使得this綁定在window對象，因此輸出爲window對象和"bbb"
    }
}
a.fn()
a.fn1()

let和const

const:聲明常量，必須立即賦值

let:聲明變量

特點：

不允許重複聲明
未定義就使用會報錯：const命令和let命令不存在變量提升
暫時性死區：在代碼塊內使用const命令和let命令聲明變量之前，該變量都不可用

字符串方法

includes:判斷字符串是否存在於其中

"abc".includes('a')
// true
"abc".includes('d')
// false

startsWith:判斷字符串是否以其開頭,endsWith:結尾

"abc".startsWith('a')
// true
"abc".startsWith('b')
// false

repeat:將字符串複製成原來的幾倍

"abc".repeat(3)
// "abcabcabc"

數組方法

for of:遍歷數組

a = [1,2,3,4,5]
a.forEach((item, index) => {console.log(item, index)})
// 循環輸出：1 0、2 1、...

forEach:遍歷數組(使用throw中斷循環)

var arr = ['a','b','c','d'];
for(var item of arr){	
    console.log(item);
}
//輸出a,b,c,d

map:對數組數據進行統一操作

a = [1,2,3,4,5]
a.map(function(item){return item>=3})
// 統一操作判斷每個數據是否大於等於3，[false, false, true, true, true]
// 由於上面的函數符合一個參數，且只有一條return語句，因此可以簡寫如下：
// 簡寫後：a.map(item=>item>=3)
// 這裏容易看混掉的是第一個=>是代表箭頭函數，第二個=>代表大於等於運算符


a.map(function(item, index){return [item, index]})
// [[1,0],[2,1],[3,2],[4,3],[5,4]]

reduce:對整個數組進行循環某運算，其下有三個參數爲：tmp/item/index，分別代表上一次操作返回的結果（第一次默認爲數組的第一個數）、下一個傳入的值（即數據的下一個數）、循環的索引

a = [1,2,3,4,5]
a.reduce(function(tmp, item, index) {
    console.log(tmp, item);
    return tmp + item;
    // 返回結果爲當前數和下一個數的求和
})
// 最後的結果爲15

filter:根據條件過濾數據

a = [1,2,3,4,5]
a.filter(item => item%2==0)
// 返回所有偶數，結果爲[2, 4]

some:循環判斷數組中是否存在滿足條件的數據，只要有一個滿足就返回true

a = [1,2,3,4,5]
a.some(item=>item>=3)
// 有大於等於3的數，返回true

every:循環判斷數組中是否全部滿足條件，是則返回true

a = [1,2,3,4,5]
a.every(item=>item>=3)
// 有不大於等於3的數，返回false

對象方法

for in:遍歷對象數組的鍵值

var obj={
    name:'abc',
    age:13
}
 
for(var key in arr){
    console.log(key+': '+arr[key]);	
}
//name: abc
  age: 13

Object.keys():將對象的所有鍵以數組形式輸出

o = {a:1, b:2, c:3}
Object.keys(o)
// ["a", "b", "c"]

Object.values():將對象的所有值以數組形式輸出

o = {a:1, b:2, c:3}
Object.values(o)
// [1, 2, 3]

Object.entries():將對象的所有鍵和值以數組形式輸出，數組中的子元素是長爲2的數字，分別爲鍵和值

o = {a:1, b:2, c:3}
Object.entries(o)
// [Array(2), Array(2), Array(2)]
Object.entries(o)[0]
// ["a", 1]

Object.assign()：合併對象(淺拷貝)，返回原對象

Object.is()：對比兩值是否相等

...操作符

1.將數組展開傳入

function test(a, b, c) {
    console.log(a + b + c);
}
test(...[1, 2, 3])
// 將數組展開成1, 2, 3賦值給a, b, c

2.數組拼接

a = [1,2,3]
b = [4,5,6]
[...a, ...b]
// [1, 2, 3, 4, 5, 6]

3.對象拼接

a = {name: 111, pwd: 222}
{...a, b:1}
// 通過對象{b: 1}存放...a，結果爲：{name: 111, pwd: 222, b: 1}

Set

成員值都是唯一且沒有重複的值

去重字符串：[...new Set(str)].join("")
去重數組：[...new Set(arr)]或Array.from(new Set(arr))
集合數組
- 聲明：const a = new Set(arr1)、const b = new Set(arr2)
- 並集：new Set([...a, ...b])
- 交集：new Set([...a].filter(v => b.has(v)))
- 差集：new Set([...a].filter(v => !b.has(v)))
映射集合
- 聲明：let set = new Set(arr)
- 映射：set = new Set([...set].map(v => v * 2))或set = new Set(Array.from(set, v => v * 2))

參考：https://www.jianshu.com/p/84de9a0f961f

參考：https://juejin.im/post/5d9bf530518825427b27639d

class類

Module

promise

Async

箭頭函數

let和const

字符串方法

數組方法

對象方法

...操作符

Set

認知提升的方法

C#開源的兩款功能強大的錄屏神器

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

前端 Vue yarn.lock文件：詳解和使用指南

JavaScript base64

新版Iconfont-阿里巴巴矢量圖標庫支持三種引用方式

前端TypeScript初解

cordova適配android虛擬按鍵

ES6特性一覽

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結