补脑：ES6常用知识点

小灰灰 2023-05-21 12:51 13阅读 0赞

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