ECMAScript6 ES6 语法

  • ECMAScript6语法 使用Typora打开https://pan.baidu.com/s/1LjcOFOfrAHaUgxU9LzKVzg 提取码: 88fb

     

    在线查询ES6语法入门,我也经常看这个 点击进入

     

  • 粗略总结

    1.let:声明一个变量,不会越界 const:声明一个常量
    2.字符串
        includes
        startsWith
        endsWith
        const ss = ``
    3.解构表达式
        数组:let [x,y,z]=arr
        对象: let {name:a, age:b}=person
    4.函数
        赋默认值:方法参数列表赋默认值 (a, b=1)=>{}
        箭头函数:()=>{}
        对象中定义函数:
            传统 eat:function(){}
            箭头 eat:()=>{}
            简写 eat(){}
        箭头函数结合结构表达式:({name})=>{}
    5.map和reduce
        map(fun):处理一个数组,遍历数组中的每一个元素用fun处理,把处理结果放入新的数组
        reduce(fun(a, b)[, 100]):没有初始值(1. a=10 b=20  2. a=30 b=30) 有初始值(1.a=100 b=10  2.a=110 b=206.对象的扩展
        keys
        values
        entries:二维数组
        assign(dest, ...src)
    7.数组扩展
        find findIndex includes

     

  • IDEA对ECMAScript6的支持

    ECMAScript6 ES6 语法_第1张图片

     

  • 创建工程

    • 创建空工程

      • File>>>New>>>Project>>>Empty Project>>>Empty Project>>>Next>>>输入Project Name>>>Finish
    • 创建一个Module

      • File>>>New>>>Module>Static Web>>>Static Web>>>Next>>>输入Module Name>>>Finish
    • 直接在Module中创建一个html文件即可,右击run运行

  • 声明变量 var let const

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

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

         

      • 显示结果ECMAScript6 ES6 语法_第2张图片

         

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

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

         

      • 显示结果ECMAScript6 ES6 语法_第3张图片

         

    • const声明一个常量

      • ECMAScript6 ES6 语法_第4张图片

         

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

    • includes()
      startsWith()
      endsWith()

      ECMAScript6 ES6 语法_第5张图片

       

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

      ECMAScript6 ES6 语法_第6张图片

       

  • 结构表达式

    • 解构数组 ECMAScript6 ES6 语法_第7张图片

       

    • 解构对象ECMAScript6 ES6 语法_第8张图片

       

       

  • 函数优化

    • 函数NaN问题

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

         

      • 结果ECMAScript6 ES6 语法_第9张图片

         

    • 函数参数默认值

      • 代码
        <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 ES6 语法_第10张图片

         

    • 箭头函数

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

           

        • 输出ECMAScript6 ES6 语法_第11张图片

           

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

           

        • 输出ECMAScript6 ES6 语法_第12张图片

           

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

           

        • 输出ECMAScript6 ES6 语法_第13张图片

           

    • 对象的函数属性简写

      • 代码
        <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 ES6 语法_第14张图片

         

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

      • 代码
        <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 ES6 语法_第15张图片

         

  • 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 ES6 语法_第16张图片

         

    • reduce方法

      ECMAScript6 ES6 语法_第17张图片

       

  • 对象扩展

    ECMAScript6 ES6 语法_第18张图片

     

  • 数组扩展

    • find方法ECMAScript6 ES6 语法_第19张图片

    • findIndex方法ECMAScript6 ES6 语法_第20张图片

    • includes方法ECMAScript6 ES6 语法_第21张图片

       

  • 111

转载于:https://www.cnblogs.com/taopanfeng/p/11102908.html

你可能感兴趣的