ECMAScript6 语法

  • 声明变量 var let const

    • var(声明变量,有局部外可用缺陷(可越界))

      • 代码
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
        </body>
        <script>
            for (let i = 0; i < 5; i++) {
                console.log(i);
            }
        
            console.log("我在循环外"+i);
        
        </script>
        </html>

         

      • 显示结果ECMAScript6 语法

         

    • let(声明变量,同var,不能局部外使用(不会越界))

      • 代码:把上面var改为let
        <script>
            for (let i = 0; i < 5; i++) {
                console.log(i);
            }
        
            console.log("我在循环外"+i);
        
        </script>

         

      • 显示结果ECMAScript6 语法

         

    • const声明一个常量

      • ECMAScript6 语法

         

  • 字符串扩展 includes() startsWith() endsWith()

    • includes()
      startsWith()
      endsWith()

      ECMAScript6 语法

       

    • `` 带有换行可以正常声明,正常打印
      "" 带有换行不能正常声明

      ECMAScript6 语法

       

  • 结构表达式

    • 解构数组 ECMAScript6 语法

       

    • 解构对象ECMAScript6 语法

       

       

  • 函数优化

    • 函数NaN问题

      • 代码
        <script>
            function fun1(a,b) {
                console.log(a/b);
            }
        
            fun1(10);
        </script>

         

      • 结果ECMAScript6 语法

         

    • 函数参数默认值

      • 代码
        <script>
            function fun1(a, b) {
                /*如果b为空,就会把1赋值给b*/
                /*如果b不为空,b值不变*/
                if (!b) {
                    b = 1;
                }
                console.log(a / b);
            }
        
            fun1(10);
        </script>
        
        <!--等同于-->
        
        <script>
            function fun1(a, b) {
                b = b || 1;
                console.log(a / b);
            }
        
            fun1(10);
        </script>
        
        <!--等同于-->
        
        <script>
            function fun1(a, b = 1) {
                console.log(a / b);
            }
        
            fun1(10);
        </script>

         

      • 结果ECMAScript6 语法

         

    • 箭头函数

      • 一个参数
        • 代码
          <script>
              let fun1=i=>console.log("输出i的值:"+i);
              fun1(100);
          </script>

           

        • 输出ECMAScript6 语法

           

      • 多个参数,参数用()括起来
        • 代码
          <script>
              let fun2=(i,j)=>console.log("输出i的值:"+i);
              fun2(100,200);
          </script>

           

        • 输出ECMAScript6 语法

           

      • 代码不止一行,逻辑用{}括起来
        • 代码
          <script>
              let fun2=(i,j)=>{
                  console.log("输出i的值:"+i);
                  console.log("输出j的值:"+j);
              }
              fun2(100,200);
          </script>

           

        • 输出ECMAScript6 语法

           

    • 对象的函数属性简写

      • 代码
        <script>
            const person = {
                name: "daniu",
                //以前
                eat1: function (food) {
                    console.log(this.name + "吃了" + food);
                },
                //箭头函数版
                //这里需要用person.name,this.name会获取不到name="daniu"
                eat2: food => console.log(person.name + "吃了" + food),
                //简写版
                eat3(food) {
                    console.log(this.name + "吃了" + food);
                }
            }
        
            person.eat1("香蕉");
            person.eat2("苹果");
            person.eat3("菠萝");
        </script>

         

      • 输出ECMAScript6 语法

         

    • 箭头函数结合解构表达式

      • 代码
        <script>
            const person = {
                name: "daniu",
                age: 25
            }
        
            //普通
            function fun1(person1) {
                console.log("fun1 姓名:" + person1.name + ",年龄:" + person1.age);
            }
        
            //箭头函数
            const fun2=person2=>console.log("fun2 姓名:" + person2.name + ",年龄:" + person2.age);
        
            //箭头函数+解构表达式
            const fun3 = ({name, age}) => console.log("fun3 姓名:" + name + ",年龄:" + age);
        
            fun1(person);
            fun2(person);
            fun3(person);
        </script>

         

      • 输出ECMAScript6 语法

         

  • map和reduce方法

    • map方法

      • 代码
        <script>
            let sz = ['1', '20', '-5', '3'];
            //map前输出
            console.log(sz)
        
            sz = sz.map(index => parseInt(index));
            //map后前输出
            console.log(sz)
        </script>

         

      • 输出ECMAScript6 语法

         

    • reduce方法

      ECMAScript6 语法

       

  • 对象扩展

    ECMAScript6 语法

     

  • 数组扩展

    • find方法ECMAScript6 语法

    • findIndex方法ECMAScript6 语法

    • includes方法ECMAScript6 语法

       

  • 111

上一篇:filter函数


下一篇:关于用String Calender类 计算闰年的Demo