補腦：ES6常用知識點

1、var 與 let的區別：

（1）var 聲明的變量往往會越域，let 聲明的變量有嚴格的局部作用域，如下：

<script>
{
    var a = 1;
    let b = 2;
}
console.log(a) // 1
console.log(b) // undefined
</script>

（2）var 可以聲明多次，let只能聲明一次
（3）var 會變量提升，let不存在變量提升

2、const 聲明的變量爲不可改變的常量

3、解構表達式

（1）數組解構

 let arr = [1,2,3]
 使用 let [a,b,c]=arr 替代 a = arr[0],b=arr[1],c=arr[2]

（2）對象解構

const person = {
  name:"jack",
  age:21,
  language:{'java','go','php'}
}
使用 const {name,age,language} = person 替換逐個獲取
若需將對象 person 中的 name 賦值給其它變量，
則，const{name:var1,age,language} = person;

4、字符串擴展

startsWith(str)
endsWith(str)
includes(str)

5、字符串模塊

let html = `<p>Hello,jack.I'm 23.</p>`;

6、字符串中插入變量、表達式、函數

let html = `${hello()}，${name},我今年${age + 10}了`

    function hello(){
        return "hello";
    }

7、函數優化

（1）函數定參數

function add(a,b){
        b = b || 1;//默認 b=1
        return a + b;
    }
    console.log(add(10)) // 11

    // 對 add() 優化
    function add2(a,b=1){
        return a+b;
    }

（2）函數不定參數   

 function fun(...values){
        console.log(values.length)
    }
    fun (1,2) // 2
    fun(1,2,3,4) // 4

（3）箭頭函數（lamda）   

 // 案例 1 一個參數一步到位
    var print = function (obj){
        console.log(obj)
    }
    print("hello") // 調用

    // 對上函數進行優化
    var print = obj => console.log(obj);
    print("hello") 

    // 案例 2 二個參數一步到位
    var sum2 = function(a,b){
        return a+b;
    }
    // 對sum2優化
    var sum2 = (a,b) => a+b;

    // 案例 3 兩個參數多步到位
    var sum3 = (a,b) => {
        c = a+b;
        return a + c;
    }

    // 案例 4 對象參數
    var hello2 = (obj) => console.log("hello",obj.name);
    hello2(person); // hello,jack
   
       // 案例 5 對象參數並解構
       // 直接獲取對象中的屬性 name 
       var hello3 = (name) => console.log("hello",obj.name);
       hello2(person); // hello,jack

8、對象優化

（1）讀取對象    

const person = {
        name:"jack",
        age:21,
        language:{'java','go','php'}
    }
    console.log(Object.keys(person)) // ['name','age','language']
    console.log(Object.values(person)) // ['jack',21,Array(3)]
    console.log(Object.entries(person)) // [Array(2),Array(2),array(2)]

（2）合併集合對象    

const target = {a:1}
    const source1 = {b:2}
    const source2 = {c:3}
    // 合併target,source1,source2，變成{a:1,b:2,c:3}
    Object.assign(target,source1,source2)
    console.log(target)  // {a:1,b:2,c:3}

（3）聲明對象

const age = 23
    const name = mrdjun
    // 以前
    const person1 = {age:age,name:name}
    // 優化，若屬性與變量名一直，則可寫成如下
    const person2 = {age,name}
    console.log(person2)

（4）對象函數屬性簡寫   

 let person3={
        name:'jack',
        eat:function(food){
            console.log(this.name+"吃"+food)
        },
        eat2: food => console.log(this.name+"吃"+food),
        eat3 : food => console.log(person3.name+"吃"+food),
        eat4 (food) {
            console.log(this.name+"吃"+food);
        }
    }

    person3.eat("香蕉") // jack吃香蕉
    person3.eat2("香蕉") // 吃香蕉
    person3.eat3("香蕉") // jack吃香蕉
    結果說明箭頭函數 this 不能使用，需要使用對象.屬性的方式調用。
    person3.eat4("香蕉") // jack吃香蕉

（5） 對象拓展運算符

拓展運算符 (...) 用於取出參數對象所有的可遍歷屬性然後拷貝到當前對象。

 // 案例 1 拷貝對象（深拷貝）
    let obj1 = {name:'jack',age:18}
    let obj2 = {...person}
    console.log(obj2) // {name:'jack',age:18}

    // 案例 2 合併對象
    let age1 = {age : 18}
    let name1 = {name : "jack"}
    let obj3 = {...age1,...name1}
    console.log(obj3) // {name:'jack',age:18}
    obj3 = {age : 19,name : "mrdjun"}
    console.log(obj3) // {age : 19,name : "mrdjun"}

9、map和reduce方法

  // 將 arr 數組中的每個元素處理後放回原來的數據
    let arr = [1,20,-5,3]
    // 案例 1
    arr = arr.map((item)=>{
        return item * 2;
    })
    // 案例 2
    arr = arr(item => item*2)

    /**
     * reduce() 方法接收一個函數作爲累加器，
     * 數組中的每個值（從左到右）開始縮減，最終計算爲一個值
     * 四個參數：
     * 1、initialValue 初始值（或者上一次回調函數的返回值 previousValue）
     * 2、currentValue 當前元素值
     * 3、index 當前索引
     * 4、array 調用 reduce 的數組
     */
    let res = arr.reduce((a,b)=>{
        console.log("上一次處理後："+a)
        console.log("當前正在處理："+b)
        return a+b;
    })
    console.log(res) // 19 

10、Promise

• 在JS中，所有代碼都是單線程的，也就是同步執行的。而Promise 就爲異步編程提供了 一 種解決方案。
• Promise 一 共有三種狀態，分別爲 pending（進行中）、fulfilled（已成功）和 rejected（已失敗）。
• 一旦狀態改變，就不會在變。狀態改變的過程只可能是：從 pending 變爲 fulfilled 和從 pending 變爲 rejected。
• 如果狀態發生上述變化後，此時狀態就不會在改變了，這時就稱爲 resolved（已定型）

// 若多次嵌套ajax，如下
$.ajax({
    url: "mock/user.json",
    success(data) {
        console.log("查詢用戶：", data);
        $.ajax({
            url: `mock/user_corse_${data.id}.json`,
            success(data) {
                console.log("查詢到課程：", data);
                $.ajax({
                    url: `mock/corse_score_${data.id}.json`,
                    success(data) {
                        console.log("查詢到分數：", data);
                    },
                    error(error) {
                        console.log("出現異常了：" + error);
                    }
                });
            },
            error(error) {
                console.log("出現異常了：" + error);
            }
        });
    },
    error(error) {
        console.log("出現異常了：" + error);
    }
});

// 使用 Promise 的方式來替代以上方法
let p = new Promise((resolve, reject) => {
    //1、異步操作
    $.ajax({
        url: "mock/user.json",
        success: function (data) {
            console.log("查詢用戶成功:", data)
            resolve(data);
        },
        error: function (err) {
            reject(err);
        }
    });
});

p.then((obj) => {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: `mock/user_corse_${obj.id}.json`,
            success: function (data) {
                console.log("查詢用戶課程成功:", data)
                resolve(data);
            },
            error: function (err) {
                reject(err)
            }
        });
    })
}).then((data) => {
    console.log("上一步的結果", data)
    $.ajax({
        url: `mock/corse_score_${data.id}.json`,
        success: function (data) {
            console.log("查詢課程得分成功:", data)
        },
        error: function (err) {
        }
    });
})