ES6 第一天

study in bilibili:

es6视频教程(无废话版)

关键字：

let

　　代码块内起作用，不会代码提升

const

　　常量

---

ES6结构赋值

作用：解析解构，然后自动赋值，简化程序员代码编写；

 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>            

解构赋值

对象简写

 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>

对象简写

模板字符串

 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

 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>

箭头函数