zoukankan      html  css  js  c++  java
  • ES6语法基本使用

    什么是ES6?

    • ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
    • ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。
    • ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。

    ES6官方中文网(http://es6.ruanyifeng.com/


    变量定义(var,let,const)

    • 一般函数中都是用var去定义变量,因为它是关键字可以预解析。
    • ES6中推荐使用let去定义变量,let定义的是一般变量。
    • const定义的是常量,是不可修改的。
    <script type="text/javascript">
            <!--定义var值-->
            var ht=20;
            <!--定义let值-->
            let nn=30;
            <!--定义const值-->
            const pcl=183;
            alert(ht);  //20
            alert(nn);    //30
            alert(pcl);    //183
            
             ht=21;
             nn=31;
           //pcl=184;//报错,const定义的常量是不可修改的
            alert(ht);  //21
            alert(nn);  //31
            alert(pcl); //183
        </script>

    箭头函数,

    // 通过箭头函数的写法定义
    var fnRs = (a,b)=>{
        var rs = a + b;
        alert(rs);
    }        
    // fnRs(1,2);
    // 一个参数可以省略小括号
    var fnRs2 = a =>{
        alert(a);
    }
    fnRs2('本是青灯不归客');
     
    // 箭头函数的作用,可以绑定对象中的this(这里的this不是window而是对象)
    var person = {
        name:'tom',
        age:18,
        showName:function(){
            setTimeout(()=>{
                alert(this.name);
            },1000)            
        }
    }
    person.showName();

     

    class

    ES6中也提出了类用法,类用法es5中就可以实现了,不过既然是新规则那就更加清晰明了啦

    class Poetry {
      constructor(){
        console.log('山有木兮木有之');
      }
    }
    class Person extends Poetry{
      constructor(){
        super();
        console.log('本是青灯不归客');
      }
    }
    let ht = new Person();
    

      效果:

    解构

    var ht1 = someArray[0];
    var ht2 = someArray[1];
    var ht3 = someArray[2];
    //解构赋值
    let [ht1, ht2, ht3] = someArray; 
    //还有下面例子
    let [,,ht3] = [1,2,3];
    console.log(ht3); //3
    
    let [ht1,...last] = [1,2,3];
    console.log(last); //[2,3]
    
    //对象解构
    let {name,age} = {name: "ht", age: "17"};
    console.log(name); //ht
    console.log(age); //17
    //注意
    let {ept1} = {};
    console.log(ept1); //undefined
    let {ept2} = {undefined};
    console.log(ept2); //undefined
    let {ept3} = {null};
    console.log(ept3); //null

    Rest+ Spread

    详解(https://segmentfault.com/a/1190000009992594

    import 和 export

    • 通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
    • 不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
    <script type="text/javascript">
            // 简写成下面的形式
        var sex="boy";
        var echo=function(value){
          console.log(value)
        }
        export {sex,echo} 
        </script>
    • 通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
    import {sex,echo} from "a.js" 
        console.log(sex)   // boy
        echo(sex) // boy

    谢谢观看!

  • 相关阅读:
    CentOS虚拟机和物理机共享文件夹实现
    集训第六周 数学概念与方法 概率 数论 最大公约数 G题
    集训第六周 数学概念与方法 概率 F题
    集训第六周 E题
    集训第六周 古典概型 期望 D题 Discovering Gold 期望
    集训第六周 古典概型 期望 C题
    集训第六周 数学概念与方法 UVA 11181 条件概率
    集训第六周 数学概念与方法 UVA 11722 几何概型
    DAG模型(矩形嵌套)
    集训第五周 动态规划 K题 背包
  • 原文地址:https://www.cnblogs.com/huangting/p/11275502.html
Copyright © 2011-2022 走看看