es6——解構(gòu)賦值

解構(gòu)

ES6 允許按照一定模式肪获,從數(shù)組和對象中提取值润匙,對變量進(jìn)行賦值

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

  • 本質(zhì)上這種寫法相當(dāng)于模式匹配
    如果解析不成功那么變量的值就等于undefined
let [a,b,c] = [1,2,3];
//a=1,b=2,c=3;
let [foo,baz] = [0];
//foo=0, baz=undefined;
  • 不完全解構(gòu),即等號(hào)左邊的模式只匹配等號(hào)右邊的一部分模式添坊,這樣的解構(gòu)也能夠成功
let [a,b,c] = [1,2,3,4];
//a=1,b=2,c=3;
  • 如果等號(hào)右邊不是可遍歷結(jié)構(gòu)時(shí)則會(huì)報(bào)錯(cuò)
let [foo] = 1;
let [baz]={};
  • 默認(rèn)值

一個(gè)數(shù)組成員不嚴(yán)格等于undefined太伊,默認(rèn)值是不會(huì)生效的雇锡。

let [foo=1]=[];
//foo = 1;
let [foo=1] = [2];
//foo = 2;
let [baz = 3] = [null];
//baz=null;
*null不嚴(yán)格等于undefined*

如果默認(rèn)值是一個(gè)表達(dá)式則這個(gè)表達(dá)式是惰性求值的,只有在用到時(shí)才會(huì)求值

function f() {
  console.log('aaa');
}

let [x = f()] = [1];
// x= 1;
let [y = f()] = [];
//y=aaa;

默認(rèn)值可以引用解構(gòu)賦值的其他變量,前提是該變量已聲明

let [x = 1, y = x] = []; // x=1; y=1
let [x = y, y = 1] = [];     // ReferenceError

對象解構(gòu)賦值

  • 對象的屬性沒有次序僚焦,變量必須與屬性同名锰提,才能取到正確的值
let {foo,baz} = {baz:'aaa',foo:'bbb'};
//foo='bbb', baz = 'aaa'

當(dāng)變量和屬性名不同時(shí)可以這樣寫

let {foo:baz} = {foo:'aaa'};
baz; //aaa
*foo 為匹配模式,baz才是變量*

對象的解構(gòu)賦值的內(nèi)部機(jī)制芳悲,是先找到同名屬性立肘,然后再賦給對應(yīng)的變量。真正被賦值的是后者名扛,而不是前者赛不。

  • 默認(rèn)值的產(chǎn)生條件是,對象的屬性值嚴(yán)格等于undefined
  • 如果解構(gòu)失敗則變量的值等于undefined
  • 可以將一個(gè)已聲明的變量用于結(jié)構(gòu)賦值
//錯(cuò)誤寫法
let x;
{x} = {x:1};
//正確寫法
let x;
({x} = {x: 1});

JavaScript 引擎會(huì)將{x}理解成一個(gè)代碼塊罢洲,從而發(fā)生語法錯(cuò)誤踢故。只有不將大括號(hào)寫在行首文黎,避免javarscript將其解釋為代碼塊

字符串解析賦值

將字符串轉(zhuǎn)換為一個(gè)類似數(shù)組的對象

let [a,b,c,d] = 'good';
//a= 'g'  b='o'  c='o'  d='d'

類似數(shù)組的對象都有一個(gè)length屬性,因此還可以對這個(gè)屬性解構(gòu)賦值殿较。

let {length : len} = 'hello';
len // 5

數(shù)值和布爾值解構(gòu)賦值

  • 解構(gòu)賦值時(shí)耸峭,如果等號(hào)右邊是數(shù)值和布爾值,則會(huì)先轉(zhuǎn)為對象
let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

只要等號(hào)右邊的值不是對象或數(shù)組淋纲,就先將其轉(zhuǎn)為對象,null和undefined無法轉(zhuǎn)換為對象劳闹,當(dāng)?shù)忍?hào)右邊為null / undefined時(shí)會(huì)報(bào)錯(cuò)

函數(shù)參數(shù)解構(gòu)賦值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3
  • 函數(shù)參數(shù)解構(gòu)賦值也可以使用默認(rèn)值,同時(shí)undefined觸發(fā)默認(rèn)值
    ?
對于編譯器來說洽瞬,一個(gè)式子到底是模式本涕,還是表達(dá)式,沒有辦法從一開始就知道伙窃,必須解析到(或解析不到)等號(hào)才能知道菩颖。當(dāng)模式中出現(xiàn)圓括號(hào)時(shí)es6遵守只要有可能導(dǎo)致解構(gòu)的歧義,就不得使用圓括號(hào)的原則

不能使用圓括號(hào)的時(shí)候
1.變量聲明 2.函數(shù)參數(shù) 3.賦值語句的模式
使用圓括號(hào)的時(shí)候
賦值語句的非模式部分

使用場所

(1)交換變量的值

var x=1;
var y=2;
[x,y] = [y,x];

(2)從函數(shù)返回多個(gè)值

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

(3)函數(shù)參數(shù)的定義

function example ([x,y,z]){
    ...
}
example([1,2,3]);

(4)提取JSON數(shù)據(jù)

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

(5)函數(shù)參數(shù)的默認(rèn)值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

(6)遍歷Map結(jié)構(gòu)

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

(7)輸入模塊的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

參考文件 http://es6.ruanyifeng.com/#docs/destructuring

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末为障,一起剝皮案震驚了整個(gè)濱河市晦闰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鳍怨,老刑警劉巖呻右,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異鞋喇,居然都是意外死亡声滥,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門侦香,熙熙樓的掌柜王于貴愁眉苦臉地迎上來醒串,“玉大人,你說我怎么就攤上這事鄙皇。” “怎么了仰挣?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵伴逸,是天一觀的道長。 經(jīng)常有香客問我膘壶,道長错蝴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任颓芭,我火速辦了婚禮顷锰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘亡问。我一直安慰自己官紫,他們只是感情好肛宋,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著束世,像睡著了一般酝陈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上毁涉,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天沉帮,我揣著相機(jī)與錄音,去河邊找鬼贫堰。 笑死穆壕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的其屏。 我是一名探鬼主播喇勋,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼漫玄!你這毒婦竟也來了茄蚯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬榮一對情侶失蹤睦优,失蹤者是張志新(化名)和其女友劉穎渗常,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體汗盘,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡皱碘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了隐孽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片癌椿。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖菱阵,靈堂內(nèi)的尸體忽然破棺而出踢俄,到底是詐尸還是另有隱情,我是刑警寧澤晴及,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布都办,位于F島的核電站,受9級(jí)特大地震影響虑稼,放射性物質(zhì)發(fā)生泄漏琳钉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一蛛倦、第九天 我趴在偏房一處隱蔽的房頂上張望歌懒。 院中可真熱鬧,春花似錦溯壶、人聲如沸及皂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽躲庄。三九已至查剖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間噪窘,已是汗流浹背笋庄。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留倔监,地道東北人直砂。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像浩习,于是被迫代替她去往敵國和親静暂。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

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

  • 1.在指定默認(rèn)值時(shí)谱秽,賦值為<code>null</code>和<code>undefined</code>是不同的...
    請輸入其他名字閱讀 1,739評(píng)論 0 0
  • 解構(gòu)賦值洽蛀,也稱“模式匹配”,即賦值的左右兩邊模式相同疟赊,則等號(hào)右邊的值賦給左邊的變量郊供。 解構(gòu)賦值 適用 let va...
    jingzizi閱讀 3,117評(píng)論 2 0
  • 1.數(shù)組的解構(gòu)賦值 2.對象的解構(gòu)賦值 3.字符串的解構(gòu)賦值 4.數(shù)值和布爾值的解構(gòu)賦值 5.函數(shù)參數(shù)的解構(gòu)賦值 ...
    卞卞村長L閱讀 917評(píng)論 0 0
  • 解構(gòu)賦值 解構(gòu)賦值說白了就是一種模式匹配,等號(hào)左右兩邊對應(yīng)變量和值近哟。解構(gòu)賦值可以是完全解構(gòu)賦值驮审,即每個(gè)值與右邊一一...
    roylai閱讀 264評(píng)論 0 0
  • 慢一點(diǎn)疯淫,讓你的靈魂跟上你的腳步。在時(shí)間的步伐里戳玫,在生命的劇場里熙掺,我們都太忙碌,我們?yōu)樯婀舅蕖槊壹ā槔硐朊β抵⒈?..
    艾米小宇宙閱讀 2,893評(píng)論 0 2