ES6新特性

ES6新特性

1、let与var

var可能会越域

let声明的变量有严格的作用域

var可以声明多次

let只能声明一次

var m=1
var m=2
let n=1
1
2
3

var会变量提升

let不存在变量提升

console.log(x);//undefined
var x=1;

console.log(y);//y is not defind
let y=20;
1
2
3
4
5

2、const

const声明变量，声明之后不能修改

一旦声明，必须初始化，否则会报错

3、解构表达式

数组解构

    
1
2
3
4
5
6
7
8
9
10

对象解构

    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

对象解构后赋值

    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、字符串扩展

1、几个新的API

    
1
2
3
4
5
6
7
8
9
10
11

2、字符串模板

多行字符串

    
1
2
3
4
5
6
7
8
9

字符串插入变量和表达式。变量名写在$中，${}中可以放入JavaScript表达式

1
2
3
4
5
6
7
8
9
10
11
12

5、函数优化

函数参数的默认值

1
2
3
4
5
6
7
8
9

不定参数

1
2
3
4
5
6
7
8
9
10

箭头函数

• 一个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 多个参数

1
2
3
4
5
6
7

6、对象优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Object.assign将用于对象之间的合并

1
2
3
4
5
6
7
8

声明对象简写

1
2
3
4
5
6
7
8

对象的函数属性简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用函数的优化简写

 let person3={
     name:"jack",
     eat(food){
         console.log(this.name+"在吃"+food)
     }
 }
person3.eat("橘子");
1
2
3
4
5
6
7

对象的扩展运算符

//拷贝对象(深拷贝)
let people1={name:"Jack",age:16}

let some={...people1};
console.log(some)
1
2
3
4
5

//合并对象

let people={name:"Jack"};
let people2={age:18};
let people3={age:20}
people3={...people,...people2}
console.log(people3)
1
2
3
4
5
6
7

6、map，reduce

let arr=['1','2','4','3'];

//map():接受一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回

// arr=arr.map((item)=>{
// return item*2;

// })
arr=arr.map(item=>item*2)


console.log(arr);
1
2
3
4
5
6
7
8
9
10
11
12

//reduce():为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
let arr=['1','2','4','3'];
arr=arr.map(item=>item*2)
let result=arr.reduce((a,b)=>{
    console.log("上一次正在处理"+a);
    console.log("当前正在处理"+b);
    return a+b;

})

console.log(result)
1
2
3
4
5
6
7
8
9
10
11

let arr=['1','2','4','3'];
arr=arr.map(item=>item*2)
let result=arr.reduce((a,b)=>{
    console.log("上一次正在处理"+a);
    console.log("当前正在处理"+b);
    return a+b;

//指定初始值
},100)

console.log(result)
1
2
3
4
5
6
7
8
9
10
11

7、promise异步编排

mock下有三个json数据

user.json

{
   "id":"1",
    "name":"张三"
    
}
1
2
3
4
5

user_corse_1.json

{
    "id":10,
    "corse":"数学"
}
1
2
3
4

corse_sorce_10.json

{
    "id":10,
    "score":"100"
}
1
2
3
4

原始写法

    //查询当前用户的信息
        //根据当前用户的id查出他的课程
        //根据课程的id查出分数
        $.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_sorce_${data.id}.json`,
                            success(data) {
                                console.log("查询到的分数为", data)
                            }
                        })
                    }
                })

            }

        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hMgQIDnB-1663125264982)(D:\笔记\a\image-20220904202411400.png)]

使用promise异步编排

  //Promise可以封装异步操作
        let p = new Promise((resolve, reject) => {

            $.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);
                    },
                    err:function(err){
                    reject(err);
                    }
                })
               


                }).then((data)=>{
                    $.ajax({
                            url: `mock/corse_sorce_${data.id}.json`,
                            success(data) {
                                console.log("查询到的分数为", data)
                            }
                        })
                   
                })
            
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

将其封装为一个函数进行调用

        //封装为一个函数
        function get(url,data){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:url,
                data:data,
                success:function(data){
                    resolve(data);
                },
                error:function(err){
                    reject(err);
                }
                })

            })
        }


        //调用函数
        get("mock/user.json").then((data)=>{
            console.log("查询用户成功", data)

            return get( `mock/user_corse_${data.id}.json`,data);


        }).then((data)=>{
            console.log("查询课程成功", data)
       return get( `mock/corse_sorce_${data.id}.json`,data);
        })
        .then((data)=>{
            console.log("查询到的分数为", data)

        }).catch((err)=>{
            console.log("出现异常",err)
        })


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

8、模块化

export不仅可以导出对象，一切js变量都可以导出

hello.js

let name="张三"
let age=20

//可以直接在前面加上export导出
export function add(a,b){
    return a+b;
}

export{name,age};
1
2
3
4
5
6
7
8
9

test.js

import{name,age,add}from"./hello.js"
console.log(name,age)
console.log(add(1,2));
1
2
3