2019-02-20

函数的扩展

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]]
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容