花生_TL007

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

热门标签

❤️《大前端—了解与使用ES6》_前端谈谈对es6的了解

作者：花生_TL007 | 2024-02-22 19:14:38

踩

前端谈谈对es6的了解

《大前端—ES6》(建议收藏)

1、ES6的概述

ECMAScript的快速发展：

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。

[类型]– 布尔型、数字、字符串、对象等。

[原型和继承]

内建对象和函数的

[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言，并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。

ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2、ES6的语法：let和const命令

变量和常量的严格区分。

核心代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>
        // 1： 在javascrit定义数据类型只有一种标识 - var
        var name = "k";
        var link = "baidu.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);
        //ES6定义的方法
        let name2 = "kkk";
        let link2 = "http://blog.codinglabs.org/articles/theory-of-mysql-index.html";

        //定义常量
        const PI2 = Math.PI;

        console.log(name2);
        console.log(link2);
        console.log(PI2);




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

let和const区别

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        //let 和 const  
        //1.解决var的变量穿透的问题 
        //2.常量修改问题

        /*for (var i = 0; i < 5; i++) {
           console.log(i);
        }
        //这里就造成变量穿透
        console.log(i);*/


        //当使用let后 穿透会没有
        for (let i = 0; i < 5; i++) {
            console.log(i);
        }
        //这里就造成变量穿透
        //console.log(i);

        //var PI = Math.PI;  //使用const 无法修改PI的值
        const PI = Math.PI
        PI = 100;
        console.log(PI);


        //在实际开发和生成中 如果是小程序或者uuiapp或者一些脚手架中的  可以大胆的去使用let和const
        //但是如果在web开发  建议使用var  因为一些低版本的浏览器还是不支持let和const


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

3、ES6的语法：模板字符串

以前：我们都是使用 ‘’ 或者 “” 来把字符串套起来

现在： `` 【反引号】

第一个用途：基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//es5    
let name = 'kk'    
console.log('kk ' + name)    //es6    
const name = 'kk'    
console.log(`kk ${name}`) //hello itcast
1
2
3
4
5

第二个用途：在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <script>

        //字符串会牵涉到动态部分

        var name = "kk";
        var address = "广东";
        var link = "http://www.baidu.com"


        let address1 = "传统的" + name + "," + address + "," + link + "https://dev.mysql.com/doc/refman/8.0/en/functions.html";
        console.log(address1);


        //使用es6
        let address2 = `ES6--${name} , 
        ${address}  ,
         ${link},https://dev.mysql.com/doc/refman/8.0/en/functions.html`;
        console.log(address2);
    </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

4、ES6的语法：函数默认参数与箭头函数

函数默认参数
在方法的参数后面加上一个默认值即可
核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        //函数默认参数
        function sum(a, b) {
            return a + b;
        }

        var result = sum(100, 100);
        console.log(result);


        //函数默认参数
        function sum(x = 200, y = 500) {
            return x + y;
        }
        var result = sum();
        console.log(result);
    </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

箭头函数

箭头函数简化函数的定义，可以让我们不用使用function关键字

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <script>
        //箭头函数 在未来的项目开发中 比如小程序 uniapp 一些常见的脚手架大量使用
        var sum = function (a, b) {
            return a + b;

        }

        //箭头函数
        var sum = (a, b) => {
            return a + b;
        }

        //改进
        var sum = (a, b) => a + b;

        console.log(sum(100, 100));





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

5、ES6的语法：对象初始化简写

它是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个。

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>


        let info1 = {
            title: "kk",
            link: "baidu",
            go: function () {
                console.log("你好");
            }
        }


        //es6简写
        var title = "kk";
        var link = "baidu.com"
        let info2 = {
            title,
            link,
            go: function () {
                console.log("你好");
            }
        }
        console.log(info2);
        console.log(info2.title);
        console.log(info2.link);
        info2.go();
    </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

对象简写案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <p>账号：<input type="text" id="account"></p>
        <p>密码：<input type="password" id="password"></p>
        <p><input type="button" value="登录" id="loginbtn"></p>
    </form>


    <script>
        //document.getElementById("loginbtn").οnclick=function(){}

        $("#loginbtn").on("click", function () {
            var account = $("#account").val();
            var password = $("#password").val();

            //对象简写
            var param = { account, password }
            //执行异步请求
            $.ajax({
                type: "post",
                url: "xxx",
                data: param,
                success: function () {

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

5、ES6的语法：对象解构

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        //对象时key：value粗壮乃 获取对象属性和方法的方式有两种
        //1.通过  . 
        //2.通过 []

        //es6简写
        var title = "kk";
        var link = "baidu.com"
        let info2 = {
            title,
            link,
            go: function () {
                console.log("你好");
            }
        }
        //1.通过  . 
        console.log(info2.title);
        console.log(info2.link);
        info2.go();

        //2.通过 []
        console.log(info2["title"]);
        console.log(info2["link"]);
        info2["go"]();

        //es6 对象结构-其实就是快速获取属性和方法的一种形式
        var { title, link, go } = info2;
        //还原代码
        var title = info2.title;
        var link = info2.link;
        console.log(title, link);
        go();

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

7、ES6的语法：传播操作符【…】

把一个对象的属性传播到另外一个对象中

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //传播对象操作符
        var person = {
            name: "kk",
            address: "广东",
            link: "baidu.com",
            phone: "123456",
            go() {
                console.log("1111111111111111");
            }
        };

        //解构处理啊
        var { name, address, ...person2 } = person;
        console.log(name);
        console.log(address);
        console.log(person2);



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

对象传播操作符案例

<!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>ES6的语法：传播操作符</title>
</head>

<body>
    <script>

        // =================场景分析 -----伪代码========================
        // 模拟后台：异步查询返回用户数据 如下：
        function FindUser() {
            $.get("xxxxx", function (res) {
                var res = {
                    pages: 11,
                    pageSize: 10,
                    pageNo: 1,
                    firstFlag: true,
                    lastFlag: false,
                    total: 123,
                    data: [{}, {}, {}, {}],
                };
                // ==========================对象 ... 取值===============
                var { data: users, ...pagesjon } = res;
                //等价于
                /*  var users = res.data;
                   var pagesjon = {
                    res = {
                        pages:11,
                        pageSize:10,
                        pageNo:1,
                        firstFlag:true,
                        lastFlag:false,
                        total:123,
                    }; */
            })
        }
    </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

8、ES6的语法：数组map和reduce方法使用

数组中map方法的应用场景
数组中新增了map和reduce方法。

Map核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        //要对数组的每个元素*2
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        //传统方式
        let newarr = [];
        for (let i = 0; i < arr.length; i++) {
            newarr.push(arr[i] * 2)
        }
        console.log(newarr);


        //map方法  map里有个自带的循环功能  并且会把处理的值回填到对应的位置
        var newarr2 = arr.map(ele => ele * 2)
        console.log(newarr2);


        //map处理对象的书
        var users = [{ age: 10, name: "k1" }, { age: 12, name: "k2" }, { age: 15, name: "k3" }];
        var newusers = users.map(ele => {
            ele.age = ele.age + 1;
            ele.check = true;
            return ele;
        });
        console.log(newusers);
    </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

reduce核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        //a=1 b=2   3
        //a=3  b=3  6
        //a=6 b=4  .....
        var result = arr.reduce(function (a, b) {
            return a + b;
        })
        console.log("return=", result);
    </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

拓展：nodejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        //a=1 b=2   3
        //a=3  b=3  6
        //a=6 b=4  .....
        var result = arr.reduce(function (a, b) {
            return a + b;
        })
        console.log("return=", result);
    </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

[外链图片转存中…(img-UQgP7BFA-1631519205152)]

拓展：nodejs

学习视频：B站学相伴

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