补脑：ES6常用知识点

1、var 与 let的区别：

（1）var 声明的变量往往会越域，let 声明的变量有严格的局部作用域，如下：

（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 = `
Hello,jack.I'm 23.
`;

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) {
        }
    });
})