ES6 再学习

发表于 | 分类于 |

let，const

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

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    // var 声明的变量往往会越域
    // let 声明的变量有严格局部作用域
    // 大括号 {}  是代码块
    {
        var a = 1;
        let b = 2;
    }
    console.log(a);  // 1
    console.log(b);  // ReferenceError: b is not defined

</script>

在这里插入图片描述

2）、var 可以声明多次，let 只能声明一次

1
2
3
4
5
6
7
8
9
10
11
<script>
    // var 可以声明多次
    // let 只能声明一次
    var m = 1
    var m = 2
    let n = 3
    let n = 4
    console.log(m)  // 2
    console.log(n)  // Identifier 'n' has already been declared

</script>

在这里插入图片描述

3）、var 可以在声明之前使用，let 则只能在声明之后使用

1
2
3
4
5
6
7
8
<script>
    // var 会变量提升
    // let 不存在变量提升
    console.log(x);  // undefined
    var x = 10;
    console.log(y);   //ReferenceError: y is not defined
    let y = 20;
</script>

在这里插入图片描述

4）、const 常量：声明之后不允许改变，一但声明必须初始化，否则会报错

1
2
3
4
5
6
7
<script>
    // const
    // 1. 声明之后不允许改变
    // 2. 一但声明必须初始化，否则会报错
    const a = 1;
    a = 3; //Uncaught TypeError: Assignment to constant variable.
</script>

在这里插入图片描述

解构表达式

1）、数组结构

1
2
3
4
5
6
7
8
9
10
<script>
    let arr = [1, 2, 3];
    
    // let a = arr[0];
    // let b = arr[1];
    // let c = arr[2];

    let [a, b, c] = arr;// 等同于注释内容
    console.log(a, b, c)
</script>

2）、对象结构

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
<script>
    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }

    // const name = person.name;
    // const age = person.age;
    // const language = person.language;

    const {name:name, age:age, language:language} = person;// 等同于注释内容 [属性名:变量名]
    // const {name, age, language} = person;// 属性名，变量名 相同时，可以简化
    
    console.log(name, age, language)
</script>

<script>
    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }
    
    // 结构为其他变量名
    const {name: abc, age:def, language} = person;
    console.log(abc, def, language)
</script>

字符串扩展

1）、方法扩展

1
2
3
4
5
6
7
8
<script>
    let str = "hello.vue";
    
    console.log(str.startsWith("hello"));//true
    console.log(str.endsWith(".vue"));//true
    console.log(str.includes("e"));//true
    console.log(str.includes("hello"));//true
</script>

2）、字符串模版（注意：需要是反引号中使用）

1
2
3
4
5
6
7
<script>
    let ss = `
              <div>
                  <span>hello world<span>
              </div>`;
    console.log(ss);
</script>

在这里插入图片描述

3）、字符串插入变量，表达式，方法调用（注意：需要是反引号中使用）

1
2
3
4
5
6
7
8
9
10
<script>
    function fun(){
        return "这是一个函数"
    }

    let abc = '大牛'
    let age = 20
    let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;// 注意：需要是反引号中使用
    console.log(info);
</script>

函数优化

1）、参数默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    // function add(a, b) {
    //     // b为空就给默认值1
    //     b = b || 1;
    //     return a + b;
    // }

    function add(a, b = 1) {
        return a + b;
    }

    console.log(add(10));// 11
</script>

2）、不定参数

1
2
3
4
5
6
7
8
<script>
    function fun(...values) {
        console.log(values.length)
    }

    fun(1, 2)      //2
    fun(1, 2, 3, 4)  //4
</script>

3）、箭头函数（类似 java 8）

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
<!--一个参数-->
<script>
    // var print = function (obj) {
    //     console.log(obj);
    // }

    // var print = (obj) => {
    //     console.log(obj)
    // };

    // 一个参数可省略 ()，一行方法体可省略 {}
    var print = obj => console.log(obj);
    print("hello");
</script>

<!--多个参数-->
<script>
    var sum2 = (a, b) => a + b;
    console.log(sum2(1, 2));// 3

    var sum3 = (a, b) => {
        var c = a + b;
        return a + c;
    }
    console.log(sum3(1, 2))// 4
</script>

<!--箭头函数 + 解构-->
<script>
    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }

    function hello(person) {
        console.log("hello," + person.name)
    }
    hello(person);// hello,jack

    //箭头函数 + 解构
    // var hello2 = (p) => console.log("hello," + p.name);
    var hello2 = ({name}) => console.log("hello," + name);// 把传入的对象解构
    hello2(person);// hello,jack
</script>

对象优化

1）、方法扩展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }
    
    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)]

    
    
    const o1 = {a: 1};
    const o2 = {b: 2};
    const o3 = {c: 3};
    
    Object.assign(o1, o2, o3);// 把 o2，o3 合并到 o1 中
    console.log(o1);// {a: 1, b: 2, c: 3}
</script>

2）、声明对象简写

1
2
3
4
5
6
7
8
9
<script>
    const name = "大牛"
    const age = 18

    const person1 = {age: age, name: name}
    const person2 = {age, name}
    console.log(person1);// {age: 18, name: "大牛"}
    console.log(person2);// {age: 18, name: "大牛"}
</script>

3）、对象的函数属性简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    let person = {
        name: "jack",
        // 以前：
        eat: function (food) {
            console.log(this.name + "在吃" + food);
        },
        //箭头函数 中不能使用 “this.属性”，要使用 “对象.属性”
        eat2: food => console.log(person.name + "在吃" + food),
        eat3(food) {
            console.log(this.name + "在吃" + food);
        }
    }

    person.eat("香蕉");// jack在吃香蕉
    person.eat2("苹果")// jack在吃苹果
    person.eat3("橘子");// jack在吃橘子
</script>

4）、对象深拷贝

1
2
3
4
5
<script>
    let person = {name: "大牛", age: 18}
    let someone = {...person}
    console.log(someone)// {name: "大牛", age: 18}
</script>

5）、合并对象

1
2
3
4
5
6
7
8
9
10
<script>
    let age1 = {age: 18}
    let name1 = {name: "大牛"}
    
    let p2 = {name: "二蛋"}
    p2 = {...age1, ...name1}
    
    // 后者会覆盖原有
    console.log(p2)// {age: 18, name: "大牛"}
</script>

map，reduce

1）、map()：将原数组中的所有元素用方法体处理后放入新数组返回。

1
2
3
4
5
6
7
8
9
10
11
<script>
    let arr = ['1', '20', '-5', '3'];

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

    arr = arr.map(item => item * 2);// 简写

    console.log(arr);// [2, 40, -10, 6]
</script>

2）、reduce()：为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    // 语法：reduce(callback函数,[initialValue])
    //
    // callback 函数 4 个参数
    //  1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    //  2、currentValue （数组中当前被处理的元素）
    //  3、index （当前元素在数组中的索引）
    //  4、array （调用 reduce 的数组）
    let arr = ['1', '20', '-5', '3'];

    let result = arr.reduce((a, b) => {
        console.log(`上一次处理后：${a}，当前正在处理：${b}`);// 注意：需要是反引号中使用
        // return a + b;// 当成字符串相加
        return a + parseInt(b);// 当成数字相加
    }, 100);
    console.log(result)
    // 上一次处理后：100，当前正在处理：1
    // 上一次处理后：101，当前正在处理：20
    // 上一次处理后：121，当前正在处理：-5
    // 上一次处理后：116，当前正在处理：3
    // 119
</script>

promise

1）、先在 html 同级目录，新建文件夹 mock，并创建三个 json 文件，来模拟请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#corse_score_10.json
{
    "id": 100,
    "score": 90
}

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

# user_corse_1.json
{
    "id": 10,
    "name": "chinese"
}

2）、创建 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
116
117
118
119
120
121
122
123
124
125
126
127
128
<!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>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>

<script>
    //1、查出当前用户信息
    //2、按照当前用户的id查出他的课程
    //3、按照当前课程id查出分数


    // 1）、原始 JQuery 的 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);
    //     }
    // });


    // 2）、使用 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) {
    //         }
    //     });
    // })

    // 3）、使用方法来封装 Promise
    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) => {
            console.log("出现异常", err)
        });
    // 用户查询成功~~~: {id: 1, name: "zhangsan", password: "123456"}
    // 课程查询成功~~~: {id: 10, name: "chinese"}
    // 课程成绩查询成功~~~: {id: 100, score: 90}

</script>
</body>

</html>

import，export

可参考：export default 与 export

0）、目录结构
在这里插入图片描述

1）、导出 变量和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*user.js*/
var name = "jack"
var age = 21

function add(a, b) {
    return a + b;
}

export {name, age, add}


/*main.js*/
// import {name, age, add} from "./user.js"//接收全部
import {name, add} from "./user.js"//接收部分

// 导入之后，直接可用
console.log(name);
add(1, 3);

2）、直接导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*hello.js*/
// const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }
//
// export {util}

export const util = {
    sum(a, b) {
        return a + b;
    }
}

/*main.js*/
import util from "./hello.js"//正确 需要和导出的名称一致
//import abc from "./hello.js"//错误 没有 abc
import util as abc from "./hello.js"// 正确 起一个别名

3）、默认导出

1
2
3
4
5
6
7
8
9
10
11
/*hello.js*/
// 只能暴露一个
export default {
    sum(a, b) {
        return a + b;
    }
}

/*main.js*/
import util from "./hello.js"//正确 需要和导出的名称一致
import abc from "./hello.js"//正确 接收名称可以自定义（export default）

2021-01-08 20:42:55 整理完es6真不容易啊，今天周五，都早早的下班走了，今天晚上就不去健身了，等会和永坤一起下楼吃饭。今天中午试了一个龙旗，我感觉我今年年底可以达到。

2023-06-29 17:41:32 又过了一遍，像是新知识一样的。前端刚看完了下面这些。

1
2
3
4
5
6
7
8
01_html
02_css
03_js
04_jQuery
05_html进阶
06_css进阶
07_html5
08_css3