解構(gòu)賦值掸宛,函數(shù)擴(kuò)展默認(rèn)值

擴(kuò)展運(yùn)算符

對(duì)象的擴(kuò)展運(yùn)算符(...)用于取出參數(shù)對(duì)象的所有可遍歷屬性剪验,拷貝到當(dāng)前對(duì)象之中考传。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

對(duì)象的擴(kuò)展運(yùn)算符等同于使用Object.assign()方法.

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

上面的例子只是拷貝了對(duì)象實(shí)例的屬性吃型,如果想完整克隆一個(gè)對(duì)象,還拷貝對(duì)象原型的屬性僚楞,可以采用下面的寫法勤晚。

// 寫法一
const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};

// 寫法二
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

// 寫法三
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)

上面代碼中,寫法一的proto屬性在非瀏覽器的環(huán)境不一定部署镜硕,因此推薦使用寫法二和寫法三运翼。

數(shù)組的解構(gòu)賦值

let [a, b, c] = [1, 2, 3];

對(duì)號(hào)入座。本質(zhì)上兴枯,這種寫法屬于“模式匹配”血淌,只要等號(hào)兩邊的模式相同,左邊的變量就會(huì)被賦予對(duì)應(yīng)的值财剖。

解構(gòu)賦值允許指定默認(rèn)值宙项。

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

對(duì)象的解構(gòu)賦值

數(shù)組的元素是按次序排列的,變量的取值由它的位置決定健蕊;而對(duì)象的屬性沒有次序熊痴,變量必須與屬性同名,才能取到正確的值咪橙。

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

如果解構(gòu)失敗夕膀,變量的值等于undefined.

對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制,是先找到同名屬性美侦,然后再賦給對(duì)應(yīng)的變量产舞。真正被賦值的是后者,而不是前者菠剩。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

上面代碼中易猫,foo是匹配的模式,baz才是變量具壮。真正被賦值的是變量baz准颓,而不是模式foo哈蝇。

對(duì)象的解構(gòu)也可以指定默認(rèn)值。

默認(rèn)值生效的條件是攘已,對(duì)象的屬性值嚴(yán)格等于undefined炮赦。

函數(shù)的擴(kuò)展

ES6 之前,不能直接為函數(shù)的參數(shù)指定默認(rèn)值贯被,只能采用變通的方法眼五。

if (typeof y === 'undefined') {
  y = 'World';
}

判斷參數(shù)y是否被賦值。

ES6 允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值彤灶,即直接寫在參數(shù)定義的后面看幼。

除了簡(jiǎn)潔,ES6的寫法還有兩個(gè)好處:首先幌陕,閱讀代碼的人诵姜,可以立刻意識(shí)到哪些參數(shù)是可以省略的,不用查看函數(shù)體或文檔搏熄;其次棚唆,有利于將來的代碼優(yōu)化,即使未來的版本在對(duì)外接口中心例,徹底拿掉這個(gè)參數(shù)宵凌,也不會(huì)導(dǎo)致以前的代碼無法運(yùn)行。

參數(shù)變量是默認(rèn)聲明的止后,所以不能用let或const再次聲明瞎惫。

參數(shù)默認(rèn)值可以與解構(gòu)賦值的默認(rèn)值,結(jié)合起來使用译株。

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

上面代碼只使用了對(duì)象的解構(gòu)賦值默認(rèn)值瓜喇,沒有使用函數(shù)參數(shù)的默認(rèn)值。只有當(dāng)函數(shù)foo的參數(shù)是一個(gè)對(duì)象時(shí)歉糜,變量x和y才會(huì)通過解構(gòu)賦值生成乘寒。如果函數(shù)foo調(diào)用時(shí)沒提供參數(shù),變量x和y就不會(huì)生成匪补,從而報(bào)錯(cuò)伞辛。通過提供函數(shù)參數(shù)的默認(rèn)值,就可以避免這種情況夯缺。

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

上面代碼指定始锚,如果沒有提供參數(shù),函數(shù)foo的參數(shù)默認(rèn)為一個(gè)空對(duì)象喳逛。

一個(gè)解構(gòu)賦值的例子

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// 報(bào)錯(cuò)

上面代碼中,如果函數(shù)fetch的第二個(gè)參數(shù)是一個(gè)對(duì)象棵里,就可以為它的三個(gè)屬性設(shè)置默認(rèn)值润文。這種寫法不能省略第二個(gè)參數(shù)姐呐,如果結(jié)合函數(shù)參數(shù)的默認(rèn)值,就可以省略第二個(gè)參數(shù)典蝌。這時(shí)曙砂,就出現(xiàn)了雙重默認(rèn)值。

function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

上面代碼中骏掀,函數(shù)fetch沒有第二個(gè)參數(shù)時(shí)鸠澈,函數(shù)參數(shù)的默認(rèn)值就會(huì)生效,然后才是解構(gòu)賦值的默認(rèn)值生效截驮,變量method才會(huì)取到默認(rèn)值GET笑陈。

比較學(xué)習(xí)

// 寫法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 寫法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

上面兩種寫法都對(duì)函數(shù)的參數(shù)設(shè)定了默認(rèn)值,區(qū)別是寫法一函數(shù)參數(shù)的默認(rèn)值是空對(duì)象葵袭,但是設(shè)置了對(duì)象解構(gòu)賦值的默認(rèn)值涵妥;寫法二函數(shù)參數(shù)的默認(rèn)值是一個(gè)有具體屬性的對(duì)象,但是沒有設(shè)置對(duì)象解構(gòu)賦值的默認(rèn)值坡锡。

// 函數(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]

undefined會(huì)觸發(fā)函數(shù)默認(rèn)值,null不會(huì)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鹉勒,一起剝皮案震驚了整個(gè)濱河市帆锋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌禽额,老刑警劉巖锯厢,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異绵疲,居然都是意外死亡哲鸳,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門盔憨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來徙菠,“玉大人,你說我怎么就攤上這事郁岩⌒霰迹” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵问慎,是天一觀的道長(zhǎng)萍摊。 經(jīng)常有香客問我,道長(zhǎng)如叼,這世上最難降的妖魔是什么冰木? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上踊沸,老公的妹妹穿的比我還像新娘歇终。我一直安慰自己,他們只是感情好逼龟,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布评凝。 她就那樣靜靜地躺著,像睡著了一般腺律。 火紅的嫁衣襯著肌膚如雪奕短。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天匀钧,我揣著相機(jī)與錄音翎碑,去河邊找鬼。 笑死榴捡,一個(gè)胖子當(dāng)著我的面吹牛杈女,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吊圾,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼达椰,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了项乒?” 一聲冷哼從身側(cè)響起啰劲,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎檀何,沒想到半個(gè)月后蝇裤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡频鉴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年栓辜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片垛孔。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡藕甩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出周荐,到底是詐尸還是另有隱情狭莱,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布概作,位于F島的核電站腋妙,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏讯榕。R本人自食惡果不足惜骤素,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一匙睹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧谆甜,春花似錦垃僚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽栽燕。三九已至罕袋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間碍岔,已是汗流浹背浴讯。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蔼啦,地道東北人榆纽。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像捏肢,于是被迫代替她去往敵國(guó)和親奈籽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

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

  • 函數(shù)參數(shù)的默認(rèn)值 基本用法 在ES6之前鸵赫,不能直接為函數(shù)的參數(shù)指定默認(rèn)值衣屏,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,382評(píng)論 0 1
  • 函數(shù)參數(shù)的默認(rèn)值 基本用法 在ES6之前辩棒,不能直接為函數(shù)的參數(shù)指定默認(rèn)值狼忱,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    陳老板_閱讀 449評(píng)論 0 1
  • 1.數(shù)組的解構(gòu)賦值 2.對(duì)象的解構(gòu)賦值 3.字符串的解構(gòu)賦值 4.數(shù)值和布爾值的解構(gòu)賦值 5.函數(shù)參數(shù)的解構(gòu)賦值 ...
    卞卞村長(zhǎng)L閱讀 917評(píng)論 0 0
  • 基本用法 ES6 允許按照一定模式一睁,從數(shù)組和對(duì)象中提取值钻弄,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring...
    嘉奇呦_nice閱讀 789評(píng)論 0 2
  • 本文通過學(xué)習(xí)阮一峰的博客者吁,外加自己的理解窘俺,整理了一下我對(duì)js變量的解構(gòu)賦值的理解。 數(shù)組的解構(gòu)賦值 對(duì)象的解構(gòu)賦值...
    宋樂怡閱讀 475評(píng)論 0 2