ES6 函數(shù)的擴展

一舔亭、 函數(shù)參數(shù)的默認值

1、基本用法

ES6允許為函數(shù)的參數(shù)設置默認值蟀俊,直接寫在參數(shù)定義的后面分歇。

function log (t = "hello",value = "world") {
  console.log(t,value)
}
log(); // => "hello world"
log('h'); // => "h world"
log("h","w"); // => "h w"
  • 參數(shù)變量是默認聲明的,不能用let或者const再次聲明
function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}
  • 使用參數(shù)默認值的時候欧漱,函數(shù)不能有同名參數(shù)
function a (x,x,y =1){
  // do something
}
// 報錯
  • 參數(shù)默認值不是傳值的职抡,而是每次都重新計算默認值表達式的值(惰性求值)
let x  = 99;
function a (y = x +1) {
  console.log(y);
}
a(); // => 100;
x = 100;
a(); // => 101

2、與結(jié)構(gòu)賦值默認值結(jié)合使用

function a({x,y=5} = {}){
  console.log(x,y);
}
a(); // => undefined 5

如下:兩個函數(shù)都對參數(shù)設定了默認值误甚,區(qū)別在

  • 寫法一 函數(shù)參數(shù)的默認值是空對象缚甩,但是設置了對象解構(gòu)賦值的默認值
  • 寫法二 函數(shù)參數(shù)的默認值是一個有具體屬性的對象谱净,沒設置解構(gòu)賦值默認值
// 寫法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 寫法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
// 函數(shù)沒有參數(shù)的情況
m1() // [0, 0]
m2() // [0, 0]

// x 和 y 都有值的情況
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值擅威,y 無值的情況
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都無值的情況
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

2李请、參數(shù)默認值的位置

  • 通常情況下导盅,定義了默認值的參數(shù)白翻,應該是函數(shù)的尾參數(shù),因為這樣才比較容易看出來那些參數(shù)被省略滤馍。

3巢株、函數(shù)的length屬性

  • 指定了參數(shù)默認值后阁苞,length屬性將失真
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

4猬错、作用域

  • 一旦設置了參數(shù)的默認值茸歧,函數(shù)進行聲明初始化時显沈,參數(shù)會形成一個單獨的作用域涤浇,等到初始化結(jié)束這個作用域就會消失只锭,這種語法行為蜻展,在不設置參數(shù)默認值時纵顾,是不會出現(xiàn)的施逾。
var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2); // => 2

上面代碼中曹仗,參數(shù)y的默認值等于變量x整葡,調(diào)用函數(shù)f時遭居,參數(shù)形成一個單獨的作用域俱萍,在這個作用域里,默認值變量x指向第一個參數(shù)x岳颇,而不是全局變量x话侧,所以輸出2瞻鹏。

5、應用

  • 利用參數(shù)默認值,可以指定某一參數(shù)不得省略盐数,省略就拋出錯誤
function throwIfMissing() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}
foo()
// Error: Missing parameter

二、rest參數(shù)

ES6引入rest參數(shù)(形式為...變量名),用來獲取函數(shù)的多余參數(shù)粤策,這樣就不需要使用arguments對象了

  • rest參數(shù)搭配的變量是一個數(shù)組,該變量將多余的參數(shù)放入數(shù)組中
function add(...values){
  console.log(values); // => [2,3,5]
}
add(2,3,5);
  • rest參數(shù)之后不能再有其他參數(shù)柔吼,否則會報錯
// 報錯
function f(a, ...b, c) {
  // ...
}
  • 函數(shù)的length屬性愈魏,不包括rest參數(shù)
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

三培漏、箭頭函數(shù)

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};
  • 如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù)牌柄,就使用一個圓括號代表參數(shù)部分珊佣。
var f = () => 5;
var sum = (num1, num2) => num1 + num2;
  • 如果箭頭函數(shù)的代碼塊部分多余一條語句咒锻,就要使用大括號將它們括起來,并使用return語句返回敦捧。
var sum = (num1, num2) => { return num1 + num2; }
  • 由于大括號被解釋為代碼塊,所以如果箭頭函數(shù)直接返回一個對象绪颖,必須在對象外面加上括號柠横,否則會報錯晨继。
// 報錯
let getTempItem = id => { id: id, name: "Temp" };

// 不報錯
let getTempItem = id => ({ id: id, name: "Temp" });
  • 箭頭函數(shù)可以與變量結(jié)構(gòu)結(jié)合使用
const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}
  • 箭頭函數(shù)的一個用處是簡化回調(diào)函數(shù)。
// 正常函數(shù)寫法
[1,2,3].map(function (x) {
  return x * x;
});
// 箭頭函數(shù)寫法
[1,2,3].map(x => x * x);

箭頭函數(shù)使用注意點:
1餐屎、函數(shù)體內(nèi)的this對象,就是定義時所在的對象藏鹊,而不是使用時所在對象
2伙判、不可當構(gòu)造函數(shù)宴抚,也就是說,不可以使用new命令
3常潮、不可以使用arguments對象喊式,該對象在函數(shù)體內(nèi)部存在岔留,用rest參數(shù)代替
4检柬、不可使用yield命令进胯,因此箭頭函數(shù)不能做Generator函數(shù)


四、尾調(diào)用

尾調(diào)用是函數(shù)式編程的一個重要概念原押,指某個函數(shù)的最后一步是調(diào)用另一個函數(shù)

function f(x){
  return g(x);
}

五胁镐、柯里化

函數(shù)式編程有一個概念,叫做柯里化诸衔,意思是將多參數(shù)的函數(shù)轉(zhuǎn)換成單參數(shù)的形式

function currying(fn,n){
    return function(m){
        return fn.call(this,m,n); //  調(diào)用傳入函數(shù)本身希停,并傳入值 n 相當于默認值
    }
}
function tail(m,n){
    console.log("n",n);
    console.log("m",m);
}
var f = currying(tail,1); // 傳入函數(shù),指定默認值
f(5);
// => "n" 1
// => "m" 5
  • 其實可以采取ES6的函數(shù)默認值
function tail(m,n = 1){
    console.log("n",n);
    console.log("m",m);
}
tail(5); 
// => "n" 1
// => "m" 5
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末署隘,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖嗤谚,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件竟闪,死亡現(xiàn)場離奇詭異鲸湃,居然都是意外死亡斜友,警方通過查閱死者的電腦和手機惯殊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門捆毫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來濒憋,“玉大人,你說我怎么就攤上這事】鄄荩” “怎么了?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長韵吨,這世上最難降的妖魔是什么糠悼? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮悼枢,結(jié)果婚禮上绰上,老公的妹妹穿的比我還像新娘。我一直安慰自己信峻,他們只是感情好盹舞,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著街州,像睡著了一般。 火紅的嫁衣襯著肌膚如雪趟紊。 梳的紋絲不亂的頭發(fā)上织阳,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天,我揣著相機與錄音氏义,去河邊找鬼嘀掸。 笑死紫岩,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的睬塌。 我是一名探鬼主播泉蝌,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼揩晴!你這毒婦竟也來了勋陪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤硫兰,失蹤者是張志新(化名)和其女友劉穎诅愚,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體劫映,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡违孝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年刹前,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片雌桑。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡喇喉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出校坑,到底是詐尸還是另有隱情拣技,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布耍目,位于F島的核電站膏斤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏制妄。R本人自食惡果不足惜掸绞,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一泵三、第九天 我趴在偏房一處隱蔽的房頂上張望耕捞。 院中可真熱鬧,春花似錦烫幕、人聲如沸俺抽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽磷斧。三九已至,卻和暖如春捷犹,著一層夾襖步出監(jiān)牢的瞬間弛饭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工萍歉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留侣颂,地道東北人。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓枪孩,卻偏偏與公主長得像憔晒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蔑舞,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 函數(shù)參數(shù)的默認值 基本用法 在ES6之前拒担,不能直接為函數(shù)的參數(shù)指定默認值,只能采用變通的方法攻询。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,398評論 0 1
  • 函數(shù)參數(shù)的默認值 基本用法 在ES6之前从撼,不能直接為函數(shù)的參數(shù)指定默認值,只能采用變通的方法钧栖。 上面代碼檢查函數(shù)l...
    陳老板_閱讀 449評論 0 1
  • 函數(shù)的擴展 一低零,函數(shù)參數(shù)的默認值 在ES5中,設置參數(shù)的默認值: function(x,y){x=x||"hell...
    一名職業(yè)程序員閱讀 491評論 0 1
  • 1.函數(shù)的默認值 以前給函數(shù)的參數(shù)設置默認值 Es6的寫法 不可以使用let或者const重新聲明參數(shù) 上面代碼中...
    CodeGod007閱讀 302評論 0 2
  • 1呆馁、函數(shù)參數(shù)默認值 2、rest參數(shù) 3毁兆、嚴格模式 4浙滤、name屬性 5、箭頭函數(shù) 6气堕、雙冒號運算符 7纺腊、尾調(diào)用優(yōu)...
    SunshineBrother閱讀 194評論 0 0