ES6语法（一）

随着ES6语法的流行以及ES6的大力支持，现在在前端使用ES6语法编写JS代码开发web前端已成必然的趋势了。

那么本篇介绍ES6的3个小知识点：

1）let与const关键字

<body>

<button>btn1</button>
<button>btn2</button>
<button>btn3</button>

<!--
let:
  01.在块级作用域有效
  02.不会变量提升 （不会污染全局）
  03.不能重复声明一个变量

const:用于定义常量 不能够被修改的
      不能够被重新赋值
-->
<script type="text/javascript">

    //console.log(userName); //ReferenceError: userName is not defined 报错 //因为let不会变量提升
    let userName = "liuqiang";
    // let userName = "kerui"; 重复申明了变量 也会报错
    console.log(userName);

    //let可用于循环监听
    let btns = document.getElementsByTagName("button");
    
    // for (var i=0;i<btns.length;i++){
    //     var btn = btns[i];
    //     //使用闭包解决  传进去的i的作用域得以保存
    //     (function (i) {
    //         btn.onclick = function () {
    //             alert(i)
    //         }
    //     }(i))
    // }

    //申明let解决 因为let有自己的作用域
    for (let i = 0; i < btns.length; i++) {
        let btn = btns[i];
        btn.onclick = function () {
            alert(i)
        }
    }

    //申明常量时（即不可修改的变量）可以用const关键字申明
    const URL = "www.baidu.com";
    console.log(URL);
</script>

</body>

2）变量的结构赋值

<script type="text/javascript">

    /**
     * 对象的结构赋值
     */
    let user = {
        name:"liuqiang",
        pwd:"123456",
        age:23
    };

    let {name,age} = user;
    console.log(name,age); //结果是:liuqiang,123456

    /**
     * 数组的结构赋值
     */
    let arr = [2,5,4,7,"nihao",true];
    let [a,b] = arr;
    console.log(a,b); //结果:2,5

    /**
     * 应用
     */
    //写法一
    // function display(user) {
    //     console.log(user.name,user.pwd)
    // }
    //写法二 对象的结构赋值
    function display({name,pwd}) { // {name,pwd} = user
        console.log(name,pwd) //结果：liuqiang,123456
    }
    display(user);

</script>

3）模板字符串与对象的简写

<!--
模板字符串拼串
 1.``
 2.${xxx}
-->
<script type="text/javascript">

    let user = {
        name:"liuqiang",
        pwd:"123456",
        age:23
    };

    let userInfo = "我的名字叫:"+user.name + ", 我的年龄是:" + user.age;

    console.log(userInfo); 

    userInfo = `我的名字叫: ${user.name} ,我的年龄是: ${user.age}`;

    console.log(userInfo);


//    对象的简写-----主要在于定义方法的简写
    let userName = "kobe";
    let sex = "男";
    //以前的写法
    let person = {
        userName:userName,
        sex:sex,
        getUserName:function () {
            return this.userName;
        }
    };
    //e6的写法
    let person2 = {
        userName, //同名属性可以省略不写
        sex:sex,
        getUserName() { //可以省略函数的function
            return this.userName;
        }
    };
    console.log(person2.sex,person2.getUserName())
</script>

1）let与const关键字

2）变量的结构赋值

3）模板字符串与对象的简写

猜你喜欢