小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

es6新特性——前端技术栈

作者：小丑西瓜9 | 2024-02-22 19:00:23

踩

es6新特性——前端技术栈

ES6 基本介绍

ES6 是什么?

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布。
ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语言
ECMAScript 和 JavaScript 的关系：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是ECMAScript 的一种实现

let 声明变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let 的基本使用</title>
  <script type="text/javascript">
    let name = "Tom 哇嘎";
    console.log("name=", name); //使用+, 字符串的拼接, 如果 name 是一个对象, 会输出 object, 而不会输出对象的完整信息
  </script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

注意事项和使用细节

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

const 声明常量/只读变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const 的基本使用</title>
  <script type="text/javascript">
      /**老韩解读
       1. 常量在定义时，需要赋值
       2. 常量赋值后不能修改
       */
      const PI = 3.14;
      console.log("PI=", PI)
  </script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意事项和使用细节

常量在定义时，需要赋值
常量赋值后不能修改

解构赋值

基本介绍

解构赋值是对赋值运算符的扩展
是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
主要有两种形式：数组解构和对象解构

数组解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组解构学习 </title>
    <script type="text/javascript">
        let arr = [1, 2, 3];
        //数组解构[取出元素]

        //1.传统
        let x = arr[0], y = arr[1], z = arr[2];
        console.log(x, y, z);

        //2. ES6 风格
        let [a, b, c] = arr;
        console.log("==================================");
        console.log(a, b, c);
    </script>
</head>
<body>

</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

对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象解构</title>
    <script type="text/javascript">
        let monster = {name: '牛魔王', age: 800};
        //传统方式取出属性-解构 对象名.属性名
        console.log(monster.name, " ", monster.age);


        //ES6 对象解构
        /*
        * 细节解读
        * {name,age} 的取名 name 和 age 要和 monster 对象的属性名保持一致
        * 使用{} 包括, 不要使用[]
        * . {name,age} 顺序是无所谓
        * */
        let {name, age} = monster;
        console.log("========================");
        console.log("name=", name, " age=", age);



        //还有其它的形式,比如方法上使用对象解构
        //如果这样使用，仍然要保证名称和对象的属性名一致
        function f1({name, age}) {
            console.log("f1-name=", name, " ", "f1-age=", age)
        }
        f1(monster);
    </script>
</head>
<body>

</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

模板字符串

基本介绍

模板字符串使用反引号 ` 将字符串包裹
可作为普通字符串
可用来定义多行字符串，即可以将换行字符串原生输出
字符串插入变量和表达式, 使用 ${}
字符串中调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板字符串的演示</title>
    <script type="text/javascript">
        let name = "hspedu 教育";
        //(1) 当解析 ${name}, 就找最近的 name 遍历, 进行替换
        //(2) 然后可以得到最后解析的字符串
        let str2 = `教育名称=${name}`;
        let str3 = `1+2=${1 + 2}`;


        // 字符串中调用函数
        function sayHi(name) {
            return "hi " + name;
        }
        let name2 = "tom";
        let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;
        let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;
    </script>
</head>
<body>

</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

对象相关新特性

声明对象简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>声明对象的简写方式</title>
    <script type="text/javascript">
        const age = 800;
        const name = "牛魔王";
        // 传统 声明/定义对象
        let monster = {name: name, age: age};
        
        // ES6 声明/定义对象
        //老师解读
        //1. {name, age} : 表示对象的属性名是 name 和 age
        //2. 属性 name 的值是从变量/常量 name 来的
        let monster02 = {name, age};
        console.log("monster02=>", monster02);
    </script>
</head>
<body>

</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

对象方法简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象方法的简写形式</title>
    <script type="text/javascript">
        // 传统-对象方法定义
        let monster = {
            name: "红孩儿", age: 100,
            sayHi: function () {
                console.log("信息: name=", this.name, " age=", this.age);
            }
        }
        monster.f10 = function () {
            console.log("哈哈");
        };
        monster.sayHi();
        monster.f10();

        // ES6-对象方法定义
        let monster2 = {
            name: "红孩儿~", age: 900,
            sayHi() {
                console.log("信息: name=", this.name, " age=", this.age);
            },
            f1() {
                console.log("f1()");
            }
        }
        monster2.sayHi();
        monster2.f1();
    </script>
</head>
<body>

</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

对象拓展运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象拓展运算符</title>
    <script type="text/javascript">
        let cat = {name: "小花猫", age: 2};
        // let cat2 = cat;
        // cat2.name = "大花猫";
        // console.log("cat=>", cat);
        // console.log("cat2=>", cat2);//
        // 拷贝对象(深拷贝)
        let cat2 = {...cat};
        cat2.name = "中花猫";
        console.log("cat=>", cat);//小花猫
        console.log("cat2=>", cat2);//中花猫

        // 合并对象[深拷贝]
        let monster = {name: "白骨精", age: 100};
        let car = {brand: "奔驰", price: 800000};
        let monster_car = {...monster, ...car}
        monster_car.name = "狐狸精";
        console.log("monster=>", monster);
        console.log("monster_car=>", monster_car);
    </script>
</head>
<body>

</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

箭头函数

基本介绍

箭头函数提供更加简洁的函数书写方式。
基本语法是：(参数列表) => { 函数体 }
箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
箭头函数多用于匿名函数的定义

箭头函数使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数的使用</title>
    <script type="text/javascript">
        // 传统定义函数
        var f1 = function (n) {
            return n * 2
        }
        console.log("传统= " + f1(2)) //传统= 4

        // ES6 , 箭头函数使用
        let f2 = (n) => {
            return n * 2;
        }
        console.log("f2() 结果= ", f2(100));//200

        //上面的 es6 函数写法，还可以简化
        let f3 = n => n * 3;
        console.log("f3() 结果=", f3(100));//300
        //函数也可以传给一个变量=> 看看 java 基础匿名内部类
        function hi(f4) {
            console.log(f4(900));
        }

        hi((n) => {     //1000
            return n + 100
        });
        hi((n) => {
            return n - 100  //800
        });
    </script>
</head>
<body>

</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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数的使用2</title>
    <script type="text/javascript">
        // 传统
        var f1 = function (n, m) {
            var res = 0
            for (var i = n; i <= m; i++) {
                res += i
            }
            return res
        }
        console.log("传统= " + f1(1, 10))
        
        // ES6 , 箭头函数使用
        let f2 = (n, m) => {
            var res = 0
            for (var i = n; i <= m; i++) {
                res += i
            }
            return res
        };
        console.log(f2(1, 10));
    </script>
    }
</head>
<body>

</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

箭头函数+对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数+对象解构</title>
    <script type="text/javascript">
        const monster = {
            name: "红孩儿", age: 1000, skill: ['红缨枪', '三位真火']
        }
        //要求：在方法形参取出 monster 对象的 skill 属性
        //传统方式
        function f1(monster) {
            console.log("skill=", monster.skill);
        }

        f1(monster);

        //箭头函数
        let f2 = ({skill}) => {
            console.log("skill=", skill);
        }
        //老韩解读
        //1. f2 传入对象 monster
        //2. f2 形参是 {skill} , 所以 es6 的对象解构特性, 会把 monster 对象的 skill 属性赋给skill
        //3. 对象解构的前提就是 {skill}的 skill 和 monster 的 skill 属性是一致
        f2(monster);
        //箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.
        let f3 = ({age, name, skill}) => {
            console.log("skill=", skill, " age=", age, " name=", name);
        }
        f3(monster);
    </script>
</head>
<body>

</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

Promise

也是ES新特性

Promise 基本介绍

传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的 Callback Hell
为了解决上述的问题，Promise 对象应运而生，在 EMCAScript 2015 当中已经成为标准
Promise 是异步编程的一种解决方案。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息
Promise 也是 ES6 的新特性，因为比较重要，老师单独拉出来讲

一句话: Promise 是异步编程的一种解决方案, 可以解决传统 Ajax 回调函数嵌套问题

传统方式 使用ajax多级回调函数嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax完成多次请求</title>
    <script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        console.log("12312344");
        $.ajax({
            url: "data/monster.json",
            dataType:"json",
            // 如果成功，成功的回调函数：
            success(resultData) {
                console.log("第一次ajax请求 monster的基本信息" , resultData); //用 ， 不要用 +
                // 再去调用第二次
                $.ajax({
                    url: `data/monster_detail_${resultData.id}.json`,
                    dataType: "json",
                    success(resultData2) {
                        console.log("第二次ajax请求的信息", resultData2);
                    },
                    error(err) {
                        console.log("失败的回调函数" + err);

                    }
                })
            },
            // 如果失败，失败的回调函数：
            error(err) {
                console.log("失败的回调函数" + err);
            }
        })
    </script>
</head>
<body>

</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

使用回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 promise 完成多次 ajax 请求</title>
    <script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        //1. 创建 Promise 对象
        //2. 构造函数传入一个箭头函数
        //3. (resolve, reject) 参数列表 resolve: 如果请求成功, 调用 resolve 函数
        //4. 如果请求失败, 调用 reject 函数
        //5. 箭头函数体, 仍然是通过 jquery 发出 ajax
        let p = new Promise((resolve, reject) => {
                // 发出ajax
                $.ajax({
                        url: "data/monster.json",
                        // 成功的回调函数
                        success(resultData) {
                            console.log("promise发出的第一次ajax monster基本信息", resultData);
                            resolve(resultData);
                        },
                        error(err) {
                            //console.log("promise 1 发出的异步请求异常=", err);
                            reject(err);
                        }
                    }
                );
            })

            //这里我们可以继续编写请求成功后的业务
            p.then((resultData) => {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: `data/monster_detail_${resultData.id}.json`,
                        success(resultData) { //第 2 次 ajax 请求成功,回调函数
                            console.log(" 第 2 次 ajax 请 求 monster 的 详 细 信 息 =", resultData);
                            resolve(resultData);
                        },
                        error(err) {
                            //console.log("promise2 发出的异步请求异常=", err);
                            reject(err);
                        }
                    })

                })
            }).then((resultData) => {
                // 这里可以发出第3次ajax请求: 获取该妖怪的女友
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: `data/monster_gf_${resultData.gfid}.json`,
                        success(resultData) { //第 3 次 ajax 请求成功,回调函数
                            console.log(" 第 3 次 ajax 请 求 monster 的 详 细 信 息 =", resultData.);
                            resolve(resultData);
                        },
                    })
                })
            })
    </script>
</head>
<body>

</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

模块化编程

传统非模块化开发有如下的缺点：(1)命名冲突 (2)文件依赖[代码演示]
Javascript 代码越来越庞大，Javascript 引入模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块
Javascript 使用"模块"（module）的概念来实现模块化编程, 解决非模块化编程问题
模块化也是 ES6 的新特性

在这里插入图片描述

模块化编程介绍

每个 js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类/对象，
都是私有的，对其他 js 文件不可见
CommonJS 使用 module.exports={} / exports={} 导出模块 , 使用 let/const 名称 = require("xx.js")导入模块
ES6 的模块化无法在 Node.js 中执行，需要用 Babel 转码 ES5 后再执行
export 不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数
组、对象
没有导出的不能使用

导入与导出方式：

方式一
导出：

var name = "北京" var num = 800
function add(a, b) {
return a + b;
}
//批量导出
export {name, num, add}
1
2
3
4
5
6

导入：要求导入导出的名字保持一致

import {num} from "./es6_common.js"
import {name,add} from "./es6_common.js"
1
2

方式二：

导出方式：

export function add(a, b) { //相当于定义方法时，同时导出
	return a + b;
}

export function sub(a, b) { //相当于定义方法时，同时导出
return a - b;
}


//对应导入方式, 要求导入导出的名字保持一致
import {add,sub} from "./es6_common.js"
1
2
3
4
5
6
7
8
9
10
11

方式三
一次导出多个, 导入时，导入变量名可自己指定.（默认导入）

export default {
	sayHello() {
		console.log("abc")
	},
	sayYes() {
		console.log("yes")
	}
}

//对应导入方式, 导入名字自己指定,通过.方式来选择调用函数/变量
import m from "./es6_common" console.log(m.sayHello())
console.log(m.sayYes())
1
2
3
4
5
6
7
8
9
10
11
12

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/131134

es6新特性——前端技术栈

文章目录

ES6 基本介绍

ES6 是什么?

let 声明变量

注意事项和使用细节

const 声明常量/只读变量

注意事项和使用细节

解构赋值

基本介绍

数组解构

对象解构

模板字符串

基本介绍

对象相关新特性

声明对象简写

对象方法简写

对象拓展运算符

箭头函数

基本介绍

箭头函数使用

Promise

Promise 基本介绍

模块化编程

模块化编程介绍

导入与导出方式：