美文网首页
2019-02-20

2019-02-20

作者: kathyever | 来源:发表于2019-02-20 17:29 被阅读0次

    函数的扩展

    2、rest参数

    ES6引入了rest参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。(arguments 是一个对应于传递给函数的参数的类数组对象。)
    rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

    function add(...values){
        let sum=0;
        for (var val of values){
            sum += val;
        }
        return sum;
    }
    add(2,5,3) //10
    //上面代码的add函数是一个求和函数,利用rest函数,可以向该函数传入任意目的的参数。
    

    下面是一个rest参数代替arguments变量的例子:

    //arguments变量的写法
    function sortNumbers(){
          return Array.prototype.slice.call(arguments).sort();
    
    //rest参数的写法
    const sortNumbers = (...numbers) => numbers.sort();
    }
    

    arguments对象不是数组,而是一个类似数组的对象。所以为了使用数组的方法,必须使用 Array.prototype.slice.call先将其转为数组。
    rest参数就不存在这个问题,它是一个真正的数组,数组特有的方法都可以使用。

    function push(array,...items){
        items.forEach(function(item){
            array.push(item);
            console.log(item);
        });
    }
    var a=[];;
    push(a,1,2,3)
    

    rest参数之后不能再有其他参数(即只能是最后一个参数)否则会报错

    函数的length属性,不包括rest参数:

    (function(a){}).length //1
    (function(...a){}).length //0
    (function(a,...b){}).length //1
    

    3、严格模式

    从ES5开始,函数内部可以设定为严格模式

    function doSomething(a,b){
        'user strict';
    }
    

    ES2016做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显示设定为严格模式,否则会报错。

    这样规定的原因是,函数内部的严格模式同时适用于函数体和函数参数。
    但是,函数执行的 时候,先执行函数参数,然后再执行函数体。这样就有一个不合理的地方,只有从函数体之中才能知道是否应该以严格模式执行,但是参数却应该先与函数体执行。

    //报错
    function doSomething(value = 070){
        'use strict';
        return value;
    }
    //参数value的默认值是八进制数070,但是严格模式下不能使用前缀0表示八进制,所以报错
    //但实际上,js引擎会先成功执行value=070,然后进入函数体内部,发现需要用严格模式执行之后才会报错。
    

    虽然可以先解析函数体代码,再执行参数代码,但是这样无疑增加了复杂性。
    因此,标准索性禁止了这种用法,只要参数使用了默认值、解构赋值、或者扩展运算符,就不能显式指定严格模式

    有两种方法可以规避这种限制。
    第一种是设定全局性的严格模式,是合法的:

    'user strict';
    function doSomething(a,b=a){
        //code
    }
    

    第二种是把函数包在一个无参数的立即执行函数里面

    const doSomething = (function(){
        'use strict';
        return function(value=42){
            return value;
        };
    }());
    

    4、name属性

    函数的name属性,返回该函数的函数名

    function foo(){}
    foo.name  //foo
    

    需要注意的是:ES6对这个属性的行为作出了一些修改。如果将一个匿名函数赋值给一个变量,ES5的name属性会返回空字符串,而ES6的name属性会返回实际的函数名

    如果将一个具名函数赋值给一个变量,则ES5和ES6的name属性都返回这个具名函数原本的名字:

    const bar = function baz(){};
    
    //ES5
    bar.name //"baz"
    
    //ES6
    bar.name //"baz"
    

    function构造函数返回的函数实例,name属性的值为anonymous

    (new Function).name //"anonymous"
    

    bind返回的函数,name属性值会加上bound前缀

    function foo(){};
    foo.bind({}).name  //bound foo
    
    (function(){}.bind({})).name  //bound
    

    5、箭头函数

    基本用法

    ES6允许使用“箭头”(=>)定义函数

    var f = v => v;
    
    //等同于
    var f = function (v) {
        return v;
    };
    

    ◆ 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分

    var f = () =>5;
    
    //等同于
    var f = function () {return 5};
    var sum = (num1,num2) =>num1+num2;
    
    //等同于
    var sum=function(num1,num2){
        return num1+num2;
    };
    

    ◆ 如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回:

    var sum = (num1,num2) =>{ return num1+num2; }
    

    ◆ 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

    //报错
    let getTempItem = id =>{id:id,name:"Temp"};
    
    //不报错
    let getTempItem = id=>({id:id,name:"Temp"});
    

    ◆ 如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了:

    let fn = () => void doesNotReturn();
    

    ◆ 箭头函数可以与变量解构结合使用:

    const full=({ first,last }) => first + ' ' +last;
    
    //等同于
    function full(person){
        return person.first + ' ' + person.last;
    }
    

    ◆ 箭头函数的一个用处是简化回调函数:

    //正常函数写法
    [1,2,3].map(function(x){
        return x*x;
    })
    
    //箭头函数写法
    [1,2,3].map(x => x*x);
    

    箭头与rest参数结合的例子如下:

    const numbers = (...nums)=>nums;
    
    numbers(1,2,3,4,5)//[1, 2, 3, 4, 5]
    
    const headAndTail = (head,...tail) => [head,tail];
    
    headAndTail(1,2,3,4,5)  //[1,[2,3,4,5]]
    

    相关文章

      网友评论

          本文标题:2019-02-20

          本文链接:https://www.haomeiwen.com/subject/lgqhyqtx.html