ES6

84 阅读2分钟

常用的解构:

如果函数的返回值是一个数组或对象,直接将函数进行赋值解构;

  function fn(){
            return['111',100,'男'];
        }
            let [name,age,gander]=fn();

            function fn2(){
                return {
                    name:'111',
                    age:100,
                    gander:'男'
                }
            }
            let{name,age,gander}=fn();

当函数进行参数传递的时候,可以进行数组和对象字面量方式的传参

function fn([name,age,gander]){
                console.log(name);

            }
            fn(['111',100,'男']);

            function fn({name,age,gander}){
                console.log(name);
            }

            fn2({
                name : '111';
                age:100,
                gander:'男'
            });

除了对象和数组可以使用解构,字符串类型的数据也可以解构

let [x,y,z] = 'ABC';
            console.log(x);//A

            let {length : len} = 'ABC';  //长度
            console.log(len);            //输出

函数的参数

ES6之前函数时无法给参数设置默认值的,而ES6支持了这个特性

function fn(name,
        age = 100,
        arr = [],
        obj = {},
        callback = function () {}){
            //参数1是必须传传递
            //其余参数有默认值,可选传递
            console.log(arr);
            console.log(obj);
            console.log(callback('callback'));
        }

        fn('111',200,[1,2,3],{key : 1 }, function (info) {
            return info;
        });

函数参数的默认值,也可以是另一个函数的返回值

function pi() {
            return 3.14;
        }

        function fn(r, p =pi()){  //pi()返回值交给p
            console.log(r * r * p);
        }
        fn(10);

如果只想传递第二往后的参数,参数一保持默认值,可以用undefined占位

function fn(name = '111', age){   //null   空都不行
            console.log(name);
            console.log(age);
        }
        fn(undefined,100);

支持参数二使用参数一的值作为默认值,反之不可以

  function fn(x,y = x){
            console.log(y);
        }
        fn(1);

解构变量有不定元素,那么函数的参数也可以有不定参数

            console.log(other);
        }
        fn('111',100,'男');

箭头函数和this

ES6新增了一个使用(=>)箭头符号定义函数的语法特性,

let fn = name => name;
        console.log(fn(''));
        //翻译成函数代码为
        let fn = function (name){
            return name;
        };

箭头函数也可以传递两个或以上的参数,并实现运算后返回

let fn =(x,y) => x + y;
        console.log(fn(10,20));
        //翻译成函数代码为:
        let fn =function (x,y) {
            return x+y;
        }

如果你定义的函数,并不需要传递参数,可以用()括号方式直接返回

 let fn=()=>'111';
        console.log(fn());
        //翻译成函数代码为:
        let fn = function (){
            return '111';
        };

如果函数体需要更复杂的操作,可以将将头符号右边使用传统函数体

let fn = (x,y)=>{
            return x+y;
                };
                console.log(fn(10,20));

如果箭头函数右边是对象,返回的是对象,则需要用圆括号包含着

 let fn =name=>({name:name,age:100});
        console.log(fn('111').name);
        //翻译成函数代码为:
        let fn=function (name){
            return{
                name:name,
                age:100
            }
        };

如果箭头函数左边是对象作为参数,右边是对象的属性运算,也支持

let fn = ({name,age})=> name + ',' +age;
        console.log(fn({name:'111',age:100}));

自我立即执行函数,也可以使用箭头符号来创建

((name) =>{
            console.log(name);
        })('111');
        //翻译成函数代码为:
        (function (name){
            console.log(name);
        })('111');