随着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>