0
点赞
收藏
分享

微信扫一扫

❤️《大前端—了解与使用ES6》

丹柯yx 2022-12-27 阅读 102
javascriptnode.jshtmlES6字符串


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

1、ES6的概述

❤️《大前端—了解与使用ES6》_字符串

ECMAScript的快速发展：

❤️《大前端—了解与使用ES6》_javascript_02

编程语言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>

❤️《大前端—了解与使用ES6》_字符串_03

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>

❤️《大前端—了解与使用ES6》_javascript_04

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

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

现在： `` 【反引号】

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

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

第二个用途：在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>

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>

❤️《大前端—了解与使用ES6》_javascript_05

箭头函数

箭头函数简化函数的定义，可以让我们不用使用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>

❤️《大前端—了解与使用ES6》_javascript_06

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>

❤️《大前端—了解与使用ES6》_javascript_07

对象简写案例

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

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>

❤️《大前端—了解与使用ES6》_javascript_08

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>

❤️《大前端—了解与使用ES6》_javascript_09

对象传播操作符案例

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

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

  1. 数组中map方法的应用场景
  2. 数组中新增了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>

❤️《大前端—了解与使用ES6》_字符串_10

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>

❤️《大前端—了解与使用ES6》_html_11

拓展：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>

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

拓展：nodejs

❤️《大前端—了解与使用ES6》_ES6_12


学习视频：B站学相伴


举报

相关推荐

〖大前端 - ES6篇①〗- ES6简介

智能路由器网络

前端es6

前端javascript开发语言

〖大前端 - ES6篇②〗- let和const

网络labviewLabVIEW开发LabVIEW编程LabVIEW

ES6前端技术

ES6运算符正则表达式JavaScript前端开发

ES6 | （一）ES6 新特性（上） | 尚硅谷Web前端ES6教程

前端es6ecmascript

ES6初步了解迭代器

hadooplinux大数据1024程序员节

ES6 新特性 ES6使用 超实用

数组for循环回调函数JavaScript前端开发

【ES6 教程】第三章 全面了解 ES6 模块

javascript标识符html云平台云计算

【ES6】ES6语法入门

javascript前端开发语言参考资料快速开发平台虚拟化云计算

ES6初步了解Symbol的用法

数据仓库
0 条评论