study in bilibili:
es6视频教程(无废话版)
关键字:
let
代码块内起作用,不会代码提升
const
常量
ES6结构赋值
作用:解析解构,然后自动赋值,简化程序员代码编写;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 let obj={ 3 username:'java', 4 pwd:'123' 5 }; 6 7 //first 8 //定义变量 9 let {username,pwd}=obj; 10 console.log(username,pwd); 11 12 //second 13 // function func(obj){ 14 // console.log(obj.username,obj.pwd); 15 // } 16 17 //third 18 function func({username,pwd}){ 19 console.log(username,pwd); 20 } 21 func(obj); 22 23 24 //fourth 25 let arr=[1,4,2,'ccc',false,'llll']; 26 // let[a,b,c,d,e,f]=arr; 27 // console.log(a,b,c,d,e,f); 28 //只输出4,5位 29 let[,,,a,b,]=arr; 30 console.log(a,b); 31 32 </script>
对象简写
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 3 //属性简写: 4 let username='java'; 5 let pwd='123'; 6 7 /* let obj={ 8 // username:username, 9 // pwd:pwd 10 //属性名和变量名一致,可以这样写 11 username, 12 pwd, 13 getUsername:function(){ 14 return this.username; 15 } 16 }; 17 console.log(obj.username); 18 console.log(obj.getUsername());*/ 19 20 //方法简写,省略了:function 21 let obj={ 22 username, 23 pwd, 24 getUsername(){ 25 return this.username; 26 } 27 }; 28 console.log(obj.getUsername()); 29 </script>
模板字符串
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 let obj={ 3 name:'jack', 4 age:25 5 }; 6 //传统拼接方式 7 console.log('我的名字是:'+obj.name+',今年'+obj.age+'岁了'); 8 //ES6写法,推荐 9 console.log(`es6:我的名字是${obj.name},今年${obj.age}岁了`); 10 </script>
箭头函数及this
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript"> 2 let func1 = function() { 3 console.log("普通无参匿名函数") 4 } 5 func1(); 6 7 //无参 箭头函数 8 /* let func2 = () => { 9 console.log("箭头函数"); 10 } */ 11 //只有一条语句,可省略花括号 12 let func2 = () => 13 console.log("箭头函数"); 14 func2(); 15 16 //一个参数 箭头函数 17 let func3 = a => console.log(a); 18 func3('abc'); 19 20 //两个参数 箭头函数 21 let func4 = (a,b) => console.log(a,b); 22 func4('abc','def'); 23 24 //特殊情况,表达式 返回最终结果 25 let func5 = (a,b) => a+b; 26 console.log(func5(1,2)); 27 </script>