ES6新特性

1. let

• let有作用域，声明的变量有严格局部作用域；var声明的变量可以越域
• let只能声明一次；var可以声明多次
• let不存在变量提升；var会变量提升

2. const

常量

• 声明后不允许改变
• 一旦声明就必须进行初始化，否则会报错

3. 解构表达式

// 数组解构
let arr = [1,2,3,4,5,6];
let [a,b,c] = arr;
console.log(a,b,c);

// 对象解构
const person={
   name:"jack",
   age:21,
   language:['java','c++','c']
}

const {name,age,language} = person;
console.log(name,age,language);

const {name:name1,age,language} = person;  // 可以给变量重命名
console.log(name1,age,language);  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4. 字符串扩展

const str = "hello.vue"
console.log(str.startsWith(hello));  // true
console.log(str.endWith(.vue))  	// true
console.log(str.includes("e")) 		// true
console.log(str.includes("hello"))   // true
1
2
3
4
5

5. 字符串模板

let str = `
	

		hello world
	
`
console.log(str);

// 字符串插入变量和表达式,函数
function fun(){
    return "这是一个函数";
}

let name = "summer",age=15
let info = `我是${name},年龄${age},我想说${fun()}`

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

6. 函数优化

函数默认值

function add(a,b=1){  // 没有给b传值的时候,赋值为1
    return a+b;
}
1
2
3

不定参数

function fun(...args){
    console.log(args.length);
}

fun(1,2,3)  	 // 3
fun(7,8,9,10,45) // 5
1
2
3
4
5
6

箭头函数

// 1. 单个参数
// 之前的写法
var print = function(obj){
    console.log(obj);
}
// 箭头函数
var print = obj => console.log(obj);

// 2. 多个参数 方法体只有一行
var add = function(a,b){
    return a+b;
}
// 箭头函数
var add = (a,b) => a+b;

// 3. 多个参数 方法体多行
var add = function(a,b){
    c = a+b;
    return a+c;
}

var add = (a,b) =>{
    c = a+b;
    return a+c;
}

// 4. 复杂
const person={
   name:"jack",
   age:21,
   language:['java','c++','c']
}
function hello(obj){
    console.log("hello,"+obj.name);
}

var hello = (obj) => console.log("hello,"+obj.name);
hello(preson);
// 或者  解构+箭头函数
var hello = ({name}) => console.log("hello,"+name);
hello(person);
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

7. 对象优化

const person={
   name:"jack",
   age:21,
   language:['java','c++','c']
}

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)]
1
2
3
4
5
6
7
8
9

// 对象合并
const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};

Object.assign(target,source1,source2);  // target = {a:1,b:2,c:3}
1
2
3
4
5
6

// 声明对象简写
const age = 23
const name = "张三"

const person1 = {age:age,name:name}
const person2 = {age,name}  // 属性名和变量名相同,可以简写
1
2
3
4
5
6

// 声明对象函数简写
const person={
   name:"jack",
    // 之前
   eat:function(food){
       console.log(this.name+"在吃"+food);
   },
   eat2:food=>console.log(this.name+"在吃"+food)
}
person.eat("香蕉");   // jack在吃香蕉
person.eat2("香蕉");  // 在吃香蕉    this.name 取不到,箭头函数中要使用对象.属性名取值  person.name

const person={
   name:"jack",
    // 之前
   eat:function(food){
       console.log(this.name+"在吃"+food);
   },
   eat2:food=>console.log(person.name+"在吃"+food)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 拷贝对象(深拷贝)
let p1 = {name:"Amy",age:15};
let someone = {...p1}
console.log(someone);  // {name:"Amy",age:15}
1
2
3
4

// 合并对象
let name1 = {name:"Amy"};
let age1 = {age:20};
let person = {...name1,...age1};  // {name:"Amy",age:15}
1
2
3
4

8. Map和reduce

let arr = ["1","2","3","4","5"];
arr = arr.map((item)=>{
    return item*2;
})
// arr = [2,4,6,8,10];
// 或者再简写
arr = arr.map(item => item*2);
1
2
3
4
5
6
7

reduce(),为数组的每个元素依次执行回调函数,

let arr = ["1","2","3","4","5"];
let result = arr.reduce((a,b)=>{   // a就是上一次回调返回的值,或者是提供的初始值,这里没有提供初始值,所以使用数组的第一个
    console.log("上一次处理后:"+a);
    console.log("当前正在处理:"+b);
    return a + b;
});
console.log(result);
// 上一次处理后:1
// 当前正在处理:2
// 上一次处理后:3
// 当前正在处理:3
// 上一次处理后:6
// 当前正在处理:4
// 上一次处理后:10
// 当前正在处理:5
// 15

let arr = ["1","2","3","4","5"];
let result = arr.reduce((a,b)=>{   // 提供初始值,上一次处理后:100 
    console.log("上一次处理后:"+a);
    console.log("当前正在处理:"+b);
    return a + b;
},100);
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

9. promise异步编排

corse_score_10.json 得分
{
    "id": 100,
    "score": 90
}

user.json 用户
{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}


user_corse_1.json 课程
{
    "id": 10,
    "name": "chinese"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>
head>
<body>
    <script>
        1、查出当前用户信息
        2、按照当前用户的id查出他的课程
        3、按照当前课程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_score_${data.id}.json`,
                             success(data) {
                                 console.log("查询到分数：", data);
                             },
                             error(error) {
                                 console.log("出现异常了：" + error);
                             }
                         });
                     },
                     error(error) {
                         console.log("出现异常了：" + error);
                     }
                 });
             },
             error(error) {
                 console.log("出现异常了：" + error);
             }
         });
        //1、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) {
        //         }
        //     });
        // })

        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`);
            }).then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            }).then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            }).catch((err)=>{ //失败的话catch
                console.log("出现异常",err)
            });

    script>
body>

html>


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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115