ES6 變量的解構賦值

  • ES6允許按照一定的模式(模式匹配)筐喳,從數(shù)組和對象中提取值,對變量進行賦值函喉,這被稱為解構(Destructuring)避归。
  • 如果解構不成功管呵,就會賦值undefined。

一捐下、數(shù)組的解構賦值

  • 解構時按順序排列
let [a, b, c] = [1, 2, 3];
// a = > 1; b => 2; c => 3;

let [a, [b, c], d] = [1, [2, 3], 4];
// a => 1; b => 2; c => 3; d => undefined;

// 當?shù)忍栕筮呑兞可儆诘忍栍疫呏禃r(包括變量缺省和變量個數(shù)不足), 仍可解構成功,成為不完全解構
let [a, , c] = [1, 2, 3];
// a => 1; c => 3;

// 多余參數(shù)的解構
let [a, b, ...c] = [1, 2, 3, 4, 5];
// a => 1; b => 2; c => [3, 4, 5];

// 解構不成功的情況
let [a] = [];
// a => undefined;
let [a, b] = [1]
// a => 1; b => undefined;

// 當?shù)忍栍疫叢皇菙?shù)組或類數(shù)組(即可遍歷的結構) 將會報錯
let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};
// TypeError: Invalid attempt to destruture non-iteable instance

二萌业、對象的解構賦值

  • 解構時無次序,屬性名必須相同
let {a, b} = {a: 1, b: 2}
// a => 1; b => 2;

let {a, b, c} = {a: 1, c: 2, d: 3}
// a => 1; b => undefined; c => 2; d => d is not defined

let {a: b} = {a: 1, b: 2}
// a => a is not defined; b => 2

三、字符串的解構賦值

  • 相當于把字符串切割成一個數(shù)組奸柬,順位取
let [a, b, c] = 'string';
//  a => s; b => t; c => r;
let [a, b, c] = '字符串也可以解構';
//  a => 字; b => 符; c => 串;
let [a, b, c] = '字符';
//  a => 字; b => 符; c => undefined;

四生年、數(shù)值和布爾值的解構賦值

  • 解構賦值時廓奕,如果等號右邊是數(shù)值和布爾值,則會先轉為對象桌粉。
let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
//上面代碼中蒸绩,數(shù)值和布爾值的包裝對象都有toString屬性,因此變量s都能取到值.
  • 解構賦值的規(guī)則是番甩,只要等號右邊的值不是對象或數(shù)組侵贵,就先將其轉為對象。由于undefinednull無法轉為對象窍育,所以對它們進行解構賦值宴胧,都會報錯漱抓。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

五恕齐、函數(shù)參數(shù)的解構賦值

let a = [1, 2];
function log ([a, b, c]) {
    // 相當于 let [a, b, c] = [1, 2];
    console.log(a, b, c);
    // a => 1; b => 2; c => undefined;
}
log(a);

function alert({title = 'title', content = 'content',   button = 'button'}) {
    console.log(title, content, button);
}
alert({title: '123'})

六、用途

(1)交換變量的值

let x = 1;
let y = 2;
[x,y] = [y,x];
console.log(y);  //x = 2,y = 1;

這樣的寫法不僅簡潔仪或,而且易讀,語義非常清晰范删。

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

  • 函數(shù)只能返回一個值拷肌,如果要返回多個值,只能將它們放在數(shù)組或對象里返回巨缘。有了解構賦值,取出這些值就非常方便若锁。
// 返回一個數(shù)組
  function example() {
  return [1, 2, 3];
  }
  let [a, b, c] = example();
  console.table([a,b,c]);

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

  • 解構賦值可以方便地將一組參數(shù)與變量名對應起來。
// 參數(shù)是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 參數(shù)是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

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

  • 解構賦值對提取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]

上面代碼可以快速提取 JSON 數(shù)據(jù)的值涕侈。

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

// 函數(shù)參數(shù)的默認值
function alert({title = 'title', content = 'content',   button = 'button'}) {
    console.log(title, content, button);
}
alert({title: '123'});

指定參數(shù)的默認值煤辨,就避免了在函數(shù)體內部再寫var foo = config.foo || ‘default foo’;這樣的語句裳涛。

(6)遍歷Map結構
任何部署了Iterator接口的對象众辨,都可以用for…of循環(huán)遍歷。Map結構原生支持Iterator接口鹃彻,配合變量的解構賦值,獲取鍵名和鍵值就非常方便蛛株。

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

如果只想獲取鍵名,或者只想獲取鍵值欢摄,可以寫成下面這樣笋粟。

// 獲取鍵名
for (let [key] of map) {
  // ...
}

// 獲取鍵值
for (let [,value] of map) {
  // ...
}

(7)輸入模塊的指定方法(框架中常用)

加載模塊時,往往需要指定輸入哪些方法害捕。解構賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末躬它,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌倘待,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件祖娘,死亡現(xiàn)場離奇詭異,居然都是意外死亡渐苏,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門仪吧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鞠眉,“玉大人,你說我怎么就攤上這事械蹋。” “怎么了哗戈?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長纱注。 經(jīng)常有香客問我副渴,道長奈附,這世上最難降的妖魔是什么煮剧? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮佑颇,結果婚禮上草娜,老公的妹妹穿的比我還像新娘挑胸。我一直安慰自己宰闰,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布解藻。 她就那樣靜靜地躺著葡盗,像睡著了一般螟左。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上巷嚣,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天钳吟,我揣著相機與錄音,去河邊找鬼砸抛。 笑死,一個胖子當著我的面吹牛直焙,可吹牛的內容都是我干的。 我是一名探鬼主播奔誓,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼和措!你這毒婦竟也來了蜕煌?” 一聲冷哼從身側響起派阱,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤贫母,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后腺劣,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體因块,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年趾断,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芋酌。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡耻警,死狀恐怖,靈堂內的尸體忽然破棺而出甘穿,到底是詐尸還是另有隱情,我是刑警寧澤温兼,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站荡含,受9級特大地震影響届垫,放射性物質發(fā)生泄漏释液。R本人自食惡果不足惜装处,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望妄迁。 院中可真熱鬧,春花似錦登淘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽界斜。三九已至,卻和暖如春各薇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背峭判。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工棕叫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人俺泣。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓完残,卻偏偏與公主長得像横漏,于是被迫代替她去往敵國和親谨设。 傳聞我的和親對象是個殘疾皇子缎浇,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361