• ES6 新特性重点部分

    目录

    一、ES6简介

    二、ES6新特性

            1.let变量声明 : 

            2.const常量声明 : 

            3.解构赋值 : 

                3.1 解构赋值简介

                3.2 数组解构 

                3.3 对象解构

            4.模板字符串 : 

            5.对象简写 : 

            6.运算符扩展 : 

            7.箭头函数 : 

                7.1 简介

                7.2 实例

            8.ES6---Promise : 

            9.ES6---模块化编程 : 

    一、ES6简介

            ECMA(European Computer Manufacturers Association)Script 6.0，简称ES6，是JavaScript语言的下一代标准，目的是使JavaScript语言可以用来编写复杂的大型程序，并成为企业级开发语言，ES6于2015年6月发布。

            ECMAScript是JavaScript的规范 or 规则，JavaScript则是ECMAScript的一种实现。

    二、ES6新特性

            1.let变量声明 : 

                    let用于声明变量与var声明时相比——
                    ①let声明的变量有严格的局部作用域；
                    ②let变量只能声明一次，而var可以声明多次；
                    ③let不存在变量提升，而var存在变量提升.

                    let.html 演示代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>let demonstrationtitle>
    6.     <script type="text/javascript">
    7.     // (1)let声明的变量有严格的局部作用域；
    8.         //定义一个代码块
    9.         {
    10.             var name = "Cyan_RA9";
    11.             let color = "cyan";
    12.             console.log("name = ", name);
    13.             console.log("color = ", color);
    14.         }
    15.         console.log("name = ", name);
    16.         /*
    17.             输出下面这行时会报错：
    18.             console.log("color = ", color);
    19.             Uncaught ReferenceError: color is not defined
    20.          */
    21.         console.log("-------------------------------------------------");
    22.  
    23.     // (2)let变量只能声明一次，而var可以声明多次；
    24.         var fruit = "apple";
    25.         var fruit = "grape";
    26.         let food = "meat";
    27.         /*
    28.             下面这行代码会报错：
    29.             let food = "flour";
    30.             Uncaught SyntaxError: Identifier 'food' has already been declared
    31.          */
    32.  
    33.         console.log("fruit = ", fruit);
    34.         console.log("food = ", food);
    35.         console.log("-------------------------------------------------");
    36.  
    37.     // (3)let不存在变量提升，而var存在变量提升.
    38.         //变量提升举例:
    39.         /*
    40.             1> 直接输出一个未定义的变量会报错——
    41.             Uncaught ReferenceError: symbol is not defined.
    42.             2> 但是，如果在输出语句的下面追加一条对改变量的定义，
    43.             编译器会认为该变量已经定义，只不过在输出行还拿不到定义的变量，
    44.             此时就会输出undefined
    45.             3> "提升"指编译器从“不承认该变量” --> “承认该变量已经定义”
    46.          */
    47.         console.log("symbol = " + symbol);
    48.         var symbol = "RA9";
    49.  
    50.         //如果使用let来声明变量，不存在变量提升:
    51.         /*
    52.             输出下面这行时会报错——
    53.             console.log("symbol_EX = " + symbol_EX)
    54.             Uncaught ReferenceError: Cannot access 'symbol_EX' before initialization
    55.          */
    56.         let symbol_EX = "TY";
    57.     script>
    58. head>
    59. <body>
    60.     <h2 style="color: deepskyblue">总结——let方式声明变量比var方式声明变量更加严谨。h2>
    61. body>
    62. html>

                    运行结果 : 

            2.const常量声明 : 

                    const使用中的注意事项——
                    ①常量在定义时需要对其赋值；
                    ②常量一经赋值后便不可修改；

                    const.html 演示代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>const demonstrationtitle>
    6.     <script type="text/javascript">
    7.         const e = 2.71828;
    8.         console.log("e = ", e);
    9.         /*  (1)
    10.             const e;
    11.             如果定义了const常量却没有给其赋值，会报错————
    12.             Uncaught SyntaxError: Missing initializer in const declaration
    13.          */
    14.  
    15.         /*  (2)
    16.             e = 2.72;
    17.             如果已经正确定义了一个const常量，对其再次赋值时会报错————
    18.             Uncaught TypeError: Assignment to constant variable.
    19.          */
    20.  
    21.     script>
    22. head>
    23. <body>
    24.     <textarea style="width: 500px; height: 100px">
    25.         const使用中的注意事项——
    26.         (1)常量在定义时需要对其赋值；
    27.         (2)常量一经赋值后便不可修改；
    28.     textarea>
    29. body>
    30. html>

                    运行结果 : 

            3.解构赋值 : 

                3.1 解构赋值简介

            解构赋值是对赋值运算符的扩展，它针对数组或者对象进行模式匹配，然后对其中的变量进行赋值操作。

            解构赋值常见两种形式——数组解构和对象解构。

                3.2 数组解构 

                    array_deconstruct.html 演示代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Array deconstructing demonstrationtitle>
    6.     <script>
    7.         let array = [1, 2, 3, 4, 5];
    8.         console.log("array = ", array);
    9.  
    10.         //数组解构(取出数组中的元素，并进行匹配赋值)
    11.             //通过下标来取出
    12.             let x = array[0];
    13.             let y = array[1];
    14.             let z = array[2];
    15.             console.log("array[0] = ",x, ",array[1] = ",y, ",array[2] = ",z);
    16.  
    17.             //通过ES6新特性——解构赋值来取出
    18.             let [a, b, c, d, e] = array;
    19.             console.log(a, b, c, d, e);
    20.             
    21.             let [m, n] = ["Cyan", "RA9"];
    22.             console.log(m, n)
    23.     script>
    24. head>
    25. <body>
    26.  
    27. body>
    28. html>

                    运行结果 : 

                3.3 对象解构

                    object_deconstruct.html 演示代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Object deconstructing demonstrationtitle>
    6.     <script type="text/javascript">
    7.         //对象解构(首先定义一个对象类型)
    8.         let blogger = {
    9.             name:"Cyan_RA9",
    10.             color:"cyan"
    11.         };
    12.             //传统方式解构对象(取出对象的属性)
    13.             console.log("name=",blogger.name, ",color=",blogger.color);
    14.  
    15.             //ES6新特性方式解构对象
    16.             let {name, color} = blogger;
    17.             console.log("name=",name, ",color=",color);
    18.                 /*
    19.                     (1)用{},属性名要对应一致，否则无法匹配(undefined)
    20.                     (2)只需保证名称一致，顺序无所谓。
    21.                  */
    22.  
    23.             //ES6新特性解构方式在方法上的应用(注意———别忘了{})
    24.             function logInfo ({name, color}) {
    25.                 console.log("info-name =",name);
    26.                 console.log("info-color =",color)
    27.             };
    28.             logInfo(blogger);
    29.  
    30.     script>
    31. head>
    32. <body>
    33.  
    34. body>
    35. html>

                    运行结果 : 

            4.模板字符串 : 

                    模板字符串类似于MySQL中——在定义或使用字段时用到的反引号``.
                    template_str.html演示代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Template String Demonstrationtitle>
    6.     <script type="text/javascript">
    7.         //(1)换行会直接原生输出
    8.         let forStr = `for (int i = 0; i < 11; ++i {
    9.             System.out.println("i = " + i);
    10.         }`;
    11.         console.log(forStr);
    12.  
    13.         //(2)可以在模板字符串中插入变量和表达式，格式: ${就近原则}
    14.             //插入变量
    15.         let name = `Cyan_RA9`;
    16.         let nameInfo = `name = ${name}`;
    17.         console.log("nameInfo =",nameInfo);
    18.             //插入表达式
    19.         let val1 = 233.33;
    20.         let val2 = 11;
    21.         let expression = `val1 + val2 = ${val1 + val2}`
    22.         console.log(expression);
    23.  
    24.         //(3) 可以在模板字符串中调用函数
    25.         function getName(name) {
    26.             return name;
    27.         }
    28.  
    29.         let name_EX = "Eisen";
    30.         let funStr = `The result of getName function is ${getName('Cyan_RA9')}`;
    31.         let funStr_EX = `The result of getName function is ${getName(name_EX)}`;
    32.         console.log(funStr)
    33.         console.log(funStr_EX)
    34.     script>
    35. head>
    36. <body>
    37.  
    38. body>
    39. html>

                    运行结果 : 

            5.对象简写 : 

                    在传统JS中通过{}方式来定义对象的基础上，ES6允许我们对定义对象中的属性和方法进行简写。
                    abbreviation.html演示代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Shorttitle>
    6.     <script type="text/javascript">
    7.  
    8.     //1.对象声明简写
    9.         const name = "grape";
    10.         const color = "a blaze of color";
    11.  
    12.         //传统方式定义JS对象
    13.         let fruit = {
    14.             name:name,
    15.             color:color
    16.         };
    17.         console.log(fruit.name, ", ", fruit.color)
    18.         console.log("fruit =",fruit)
    19.  
    20.         //ES6新特性——简化
    21.             //属性具体的值由前面定义的变量或者常量来赋值
    22.             //此处的name，默认是""
    23.         let fruit_EX = {name, color};
    24.         console.log(fruit_EX.name, ", ", fruit_EX.color)
    25.         console.log("fruit_EX =",fruit_EX)
    26.  
    27.     //2.对象方法简写
    28.         console.log("------------------------------------------------------------")
    29.  
    30.         //传统方式定义对象方法
    31.         let animal = {
    32.             name:'Dog',
    33.             eat:function() {
    34.                 console.log("Dogs relish the bone.")
    35.             }
    36.         };
    37.         animal.eat()
    38.  
    39.         let animal_EX = {
    40.             name:"Cat",
    41.             //方法的简写————可以去掉中间部分的":function"
    42.             eat() {
    43.                 console.log("Cats relish the fish.")
    44.             }
    45.         }
    46.         animal_EX.eat()
    47.  
    48.     script>
    49. head>
    50. <body>
    51.  
    52. body>
    53. html>

                    运行结果 : 

            6.运算符扩展 : 

                    (1)深拷贝，指拷贝出来的对象指向新的内存空间，与原对象不冲突；
                    (2)合并对象，将多个对象合并成一个新的对象，合并对象也需要用到深拷贝；
                    operator_extension.html演示代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Object's operator extension demonstrationtitle>
    6.     <script type="text/javascript">
    7.     //1.拷贝对象(深拷贝---独立的内存空间)
    8.         let blogger = {
    9.             name:"Cyan_RA9",
    10.             age:21
    11.         };
    12.         console.log("blogger =",blogger)
    13.         //深拷贝语法
    14.         let blogger_EX = {...blogger};
    15.         blogger_EX.name = "WangwuEX"
    16.         console.log("blogger_EX =",blogger_EX)
    17.  
    18.     //2.合并对象(实际是深拷贝的延伸)
    19.         console.log("---------------------------------------------------")
    20.         let animal1 = {
    21.             name:"dog",
    22.             relish:"meat"
    23.         }
    24.         console.log("animal1 =",animal1);
    25.         let animal2 = {
    26.             averageAge:10.5,
    27.             color:"yellow"
    28.         }
    29.         console.log("animal2 =",animal2);
    30.         //合并对象语法
    31.         let animal = {...animal1, ...animal2};
    32.         console.log("animal =",animal);
    33.     script>
    34. head>
    35. <body>
    36.  
    37. body>
    38. html>

                    运行结果 : 

            7.箭头函数 : 

                7.1 简介

            (1) 箭头函数多用于匿名函数的定义，它提供了更加简洁的函数书写形式，其基本语法如下——

                    (形参列表) => { 函数体 }

            (2) 当箭头函数没有形参，或者有多个形参时，必须用()；当箭头函数只有一个形参时，可以省略()。

            (3) 当箭头函数的函数体内有多行语句时，必须用{}，表示代码块；当箭头函数的函数体中只有一条语句，并且需要返回结果时，可以省略{}，结果会自动返回。

                7.2 实例

                    arrow_function.html代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Arrow Function Demonstrationtitle>
    6.     <script type="text/javascript">
    7.     //1.传统方式定义函数
    8.         var f1 = function () {
    9.             return 233;
    10.         };
    11.         var result1 = f1();
    12.         console.log("f1 =",f1);
    13.         console.log("f1()'s result =",result1);
    14.  
    15.     //2.ES6新特性———箭头函数形式
    16.             /*
    17.                 箭头函数的基本语法演示————
    18.              */
    19.         let f2 = () => {
    20.             return 11.5;
    21.         };
    22.         let result2 = f2();
    23.         console.log("f2 =",f2);
    24.         console.log("f2()'s result =",result2);
    25.             /*
    26.                 只有一个形参时，可以省略()
    27.                 只有一条语句时，可以省略{}
    28.              */
    29.         let f3 = t => t * 2 + 1;
    30.         let result3 = f3(11);
    31.         console.log("f3 =",f3);
    32.         console.log("f3()'s result =",result3)
    33.  
    34.             /*
    35.                 箭头函数可以作为参数进行传递;
    36.                 联系Java中的匿名内部类
    37.              */
    38.         function test(t1) {     //这是JS中定义函数的第一种方式
    39.             console.log(t1(220));
    40.         };
    41.         test(n => 2 * n + 1);
    42.  
    43.             /*
    44.                 PS : 箭头函数亦可以与解构赋值————“对象解构”配合使用。
    45.              */
    46.     script>
    47. head>
    48. <body>
    49.  
    50. body>
    51. html>

                    运行结果 : 

            8.ES6---Promise : 

            2023.10.16---待更新，更新后放出链接🌹

            2023.10.24---已更新，链接如下 : 

    https://blog.csdn.net/TYRA9/article/details/133912776?spm=1001.2014.3001.5501icon-default.png?t=N7T8https://blog.csdn.net/TYRA9/article/details/133912776?spm=1001.2014.3001.5501

            9.ES6---模块化编程 : 

            2023.10.16---待更新，更新后放出链接🌹

            2023.10.24---已更新，链接如下 : 

    https://blog.csdn.net/TYRA9/article/details/133965237?spm=1001.2014.3001.5501icon-default.png?t=N7T8https://blog.csdn.net/TYRA9/article/details/133965237?spm=1001.2014.3001.5501

  • 相关阅读:
    基于SSM的宿舍管理系统【附源码文档】
    Java基础 - 练习（一）打印等腰三角形
    【ARC机制和Java中C#中垃圾回收机制的区别 构造方法里面必须用setter方法赋值 Objective-C语言】
    方舟生存进化开服需要多少钱
    【c++刷题Day2】专题2T4
    供应化学试剂BHQ-1 氨基|BHQ-1 amine|1308657-79-5
    C++那些事儿 —— 名字空间（三分钟带你了解using namespace std到底是个啥？）
    《QT实用小工具·四十二》圆形发光图像
    使用第三方账号认证（一）：钉钉扫码登录
    当鼠标移入一个元素时、其它隐藏部分的元素展示出来【如何将隐藏的操作展示、将只读信息变为可输入的内容】
  • 原文地址：https://blog.csdn.net/TYRA9/article/details/133796034