前端打怪之旅=>Es6入门(对象简化写法、函数)

对象的简化写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法 这样的书写更加简洁

登录后复制

            let name = '浅辄';
            let change  = function(){
                console.log('我可以改变世界');
            }
            const school ={
                name,
                change,
                improve(){
                    console.log('提高编程水平')
                }
            }
            console.log(school)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

箭头函数

1.形式如下

登录后复制

        let fn = function() {

        }
        let fn = (形参) => {
            //省略了function关键字
            return xxx;
        }
        //调用函数
        let result = fn(实参);
        console.log(result);

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

2.特性

• this是静态的.this始终指向函数声明时所在作用域下的this的值

登录后复制

            function getName1(){
              console.log(this.name)
            }

            let getName2=()=>{
              console.log(this.name)
            }
	
            //设置window对象的name属性
            window.name='浅辄';
            const SCHOOL ={
                    name:"Lee"
            }
            //直接调用
            getName1()
            getName2()
            //call调用
            getName1.call(SCHOOL)
            getName2.call(SCHOOL)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.

• 不能作为构造实例化对象

登录后复制

            let Persnotallow=(name,age)=>{
                this.name = name;
                this.age = age;
            }
            
            let me = new Person("Lee",18);
            console.log(me);

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

• 不能使用arguments变量

登录后复制

                        let fn=()=>{
                                console.log(arguments);
                        }
                        fn(1,2,3)

• 1.
• 2.
• 3.
• 4.

• 箭头函数的简写

• 省略小括号，当形参且只有一个的时候

登录后复制

            let add = n =>{
                return n+n;
            }
            console.log(add(2));

• 1.
• 2.
• 3.
• 4.

• 省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值

登录后复制

            let pow=(n)=>n*n;
            
            console.log(pow(2));

• 1.
• 2.
• 3.

函数参数默认值

形参初始值

登录后复制

        function add(a,b,c){
            return a+b+c
        }
        let result = add(1,2);
        console.log(result);

• 1.
• 2.
• 3.
• 4.
• 5.

这里的c是没有给它赋值的

登录后复制

        function add(a,b,c=10){
                return a+b+c
        }
        let result = add(1,2);
        console.log(result);

• 1.
• 2.
• 3.
• 4.
• 5.

 这里要注意要把赋值过的参数放在后面，否则你在下面写入实参的时候，第二个

与解构赋值结合使用

登录后复制

            function connect({
                host = "127.0 .0 .1",
                username,
                password,
                port
            }) {
                console.log(host);
                console.log(username)
                console.log(password)
                console.log(port)
            }
            connect({
                host: 'localhost',
                username: 'root',
                password: 'root',
                port: 3306
            })

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.

rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

获取实参

Es5获取

登录后复制

        function data(){
            console.log(arguments);
        }
        
        data('小a','小b','小c')

• 1.
• 2.
• 3.
• 4.
• 5.

这是一个对象

Es6获取

登录后复制

    function data(...args){
			console.log(args);
		}
		
		data('小a','小b','小c')

• 1.
• 2.
• 3.
• 4.
• 5.

这是一个数组，因为他是一个数组，所以一些关于数组的API是可以调用的，比如filter some every map 

注意：rest参数必须要放到参数最后

原创作者: u_15915681 转载于: https://blog.51cto.com/u_15915681/7884271