ES6 第一天

study in bilibili: 

es6视频教程(无废话版)

 

关键字：

let 

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

const

　　常量

---

ES6结构赋值

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

            <script type="text/javascript">
            let obj={
                username:'java',
                pwd:'123'
            };
            
            //first
            //定义变量
            let {username,pwd}=obj;
            console.log(username,pwd);
            
            //second
            // function func(obj){
            //     console.log(obj.username,obj.pwd);
            // }
            
            //third
            function func({username,pwd}){
                console.log(username,pwd);
            }
            func(obj);
            
            
            //fourth
            let arr=[1,4,2,'ccc',false,'llll'];
            // let[a,b,c,d,e,f]=arr;
            // console.log(a,b,c,d,e,f);
            //只输出4,5位
            let[,,,a,b,]=arr;
            console.log(a,b);
            
        </script>            

对象简写

        <script type="text/javascript">
            
            //属性简写:
            let username='java';
            let pwd='123';
            
            /* let obj={
                // username:username,
                // pwd:pwd
                //属性名和变量名一致,可以这样写
                username,
                pwd,
                getUsername:function(){
                    return this.username;
                }
            }; 
            console.log(obj.username);
            console.log(obj.getUsername());*/
            
            //方法简写,省略了:function
            let obj={
                username,
                pwd,
                getUsername(){
                    return this.username;
                }
            };
            console.log(obj.getUsername());
        </script>

模板字符串

            <script type="text/javascript">
            let obj={
                name:'jack',
                age:25
            };
            //传统拼接方式
            console.log('我的名字是：'+obj.name+',今年'+obj.age+'岁了');
            //ES6写法,推荐
            console.log(`es6:我的名字是${obj.name},今年${obj.age}岁了`);
        </script>

箭头函数及this

        <script type="text/javascript">
            let func1 = function() {
                console.log("普通无参匿名函数")
            }
            func1();

            //无参 箭头函数
            /* let func2 = () => {
                console.log("箭头函数");
            } */
            //只有一条语句,可省略花括号
            let func2 = () =>
                console.log("箭头函数");
            func2();

            //一个参数 箭头函数 
            let func3 = a => console.log(a);
            func3('abc');
            
            //两个参数 箭头函数
            let func4 = (a,b) => console.log(a,b);
            func4('abc','def');
            
            //特殊情况,表达式 返回最终结果
            let func5 = (a,b) => a+b;
            console.log(func5(1,2));
        </script>