美文网首页
es6---js的下一代标准,抓紧学起来

es6---js的下一代标准,抓紧学起来

作者: 2dcc2b155e1e | 来源:发表于2017-12-21 21:05 被阅读0次

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

    1、let命令
    基本用法

    ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

    {
    let x=10;
    var y=20;
    console.log(x,y);
    }
    console.log(x);//不可以打印,会报错
    console.log(y);//可以打印
    

    这表明,let声明的变量只在它所在的代码块有效。

    2、const命令
    基本用法

    const声明一个只读的常量。一旦声明,常量的值就不能改变。
    //常量:不能被重复定义,再次定义会报错 es6

    const PI="3.14159";
    console.log(PI);
    

    3、模板字符串---${}包裹变量,``包裹模板

    let name="王五";
    let stres6=`姓名是${name}年龄是20`;
    console.log(stres6);//姓名是王五年龄是20
    

    4、es6定义对象
    (1)es5写法:

    var myname="莉莉";
    var pwd="123”;
    var obj={
    name:myname,
    pwd:pwd
    }
    console.log(obj);
    (2)es6写法:
    var myname="莉莉";
    var pwd="123”;
    var obj6={
        myname,
        pwd
    }
    console.log(obj6);
    
    
    es5定义对象属性和方法并调用                 
    var Dog={
    name:"妞妞",
    sex:"母",
    action:function(){
    console.log("我爱吃骨头");
    }
    }
    //调用属性
    console.log(Dog.name);
    //调用方法
    Dog.action();
    
    es6定义对象属性和方法并调用--在方法的定义上简化
    var Dog={
    name:"妞妞",
    sex:"母",
    action(){
    console.log("我爱吃骨头");
    }
    }
    //调用属性
    console.log(Dog.name);
    //调用方法
    Dog.action();
    
    

    5、箭头函数
    es6 :箭头函数(自带return)

    //有参函数es5写法
    function test1(str){
    return str;
    }
    console.log(test1("你好"));
    //有参函数es6写法
    var test2=(str)=>str;
    console.log(test2("你也好"));
    //无参函数es5写法
    var test3=function(){
    var str="哈哈";
    return str;
    }
    console.log(test3());
    //无参函数es6写法
    var test4=()=>{
    var str="哈哈";
    return str;
    };
    console.log(test4());
    

    6、es6——this穿透

    //this穿透
    var objThis1={
    name:"七宝",
    age:22,
    action:function(){
    console.log(this);
    }
    }
    objThis1.action();//es5 打印的就是这个对象
    var objThis2={
    name:"七宝",
    age:22,
    action:()=>{
    console.log(this);
    }
    }
    objThis2.action();//es6  this穿透到上一层  Window
    

    相关文章

      网友评论

          本文标题:es6---js的下一代标准,抓紧学起来

          本文链接:https://www.haomeiwen.com/subject/czlzwxtx.html