ES6學(xué)習(xí)筆記二|變量的結(jié)構(gòu)賦值

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

ES6允許按照一定模式,從數(shù)組和對象中提取值怎棱,對變量進(jìn)行賦值哩俭,這被稱為結(jié)構(gòu)。

var [a,b,c] = [1,2,3];   //合法
let [head, ...tail] = [1,2,3,4];    //head = 1;tail = [2,3,4]
let [x,y,z] = new Set(["a","b","c"]);
  • 解構(gòu)賦值允許指定默認(rèn)值拳恋。
var [foo = true] = [];   //foo = true

注意:ES6內(nèi)部嚴(yán)格相等運算法(===)判斷一個位置是否有值凡资。所以,如果一個數(shù)組成員不嚴(yán)格等于undefined谬运,默認(rèn)值不生效隙赁。

2. 對象的解構(gòu)賦值

數(shù)組按照元素的次序排序賦值,而對象的屬性沒有次序梆暖,變量必須與屬性同名伞访,才可以獲取到正確的值

var {bar, foo} = {foo:"aaa", bar:"bbb"};  //foo="aaa",bar="bbb"

如果變量名和屬性名不一致,必須寫成下面這樣

var {foo:baz} = {foo:'aaa', bar:'vvv'};  //baz='aaa'

注意:對象的解構(gòu)賦值的內(nèi)部機制轰驳,是先找到同名屬性厚掷,然后再賦值給對應(yīng)得變量。真正被賦值的是后者级解,而不是前者冒黑。

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
  • 默認(rèn)值生效的條件是:對象的屬性值嚴(yán)格等于undefined
  • 如果解構(gòu)模式是嵌套的對象,而且子對象所在的父屬性不存在蠕趁,則報錯薛闪。

3. 字符串的解構(gòu)賦值

  • 字符串也可以解構(gòu)賦值,此時俺陋,字符串被轉(zhuǎn)換成一個類似數(shù)組的對象豁延。
  • 類似數(shù)組的對象都有一個length屬性,因此可以對這個屬性解構(gòu)賦值腊状。

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

  • 解構(gòu)賦值時诱咏,如果等號右邊是數(shù)值和布爾值,則會先轉(zhuǎn)為對象缴挖。
    let {toString: s} = 123;
    s === Number.prototype.toString // true

    let {toString: s} = true;
    s === Boolean.prototype.toString // true
    
  • 解構(gòu)賦值的規(guī)則是:只要等號右邊的值不是對象袋狞,就先將其轉(zhuǎn)為對象。由于undefined和null無法轉(zhuǎn)為對象映屋,所以對它們進(jìn)行解構(gòu)賦值苟鸯,都會報錯。

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

[[1, 2], [3, 4]].map(([a, b]) => a + b);// [ 3, 7 ]
  • 函數(shù)參數(shù)的解構(gòu)也可以使用默認(rèn)值棚点。

6. 圓括號問題

ES6規(guī)定早处,只要有可能導(dǎo)致解構(gòu)的歧義,就不得使用圓括號瘫析。

  • 不能使用圓括號的情況
  • 變量聲明語句中砌梆,不能帶有圓括號默责。
var [(a)] = [1];  //報錯
  • 函數(shù)參數(shù)中,模式不能帶有圓括號咸包。
function f([(z)]) {}; //報錯
  • 賦值語句中桃序,不能將整個模式,或嵌套模式中的一層烂瘫,放在圓括號中媒熊。
({ p: a }) = { p: 42 };  //全部報錯
[({ p: a }), { x: c }] = [{}, {}];
  • 可以使用圓括號的情況
  • 賦值語句的非模式部分,可以使用忱反。
[(b)] = [3]; // 正確
({ p: (d) } = {}); // 正確

7. 用途

  • 交換變量的值泛释。
[x,y] = [y,x];
  • 從函數(shù)返回多個值
      // 返回一個數(shù)組
      function example() { 
        return [1, 2, 3];
      }
      var [a, b, c] = example();

      // 返回一個對象
      function example() { 
        return { 
            foo: 1,   
            bar: 2 
        };
      }
      var { foo, bar } = example();```

- 函數(shù)參數(shù)的定義
解構(gòu)賦值可以方便地將一組參數(shù)與變量名對應(yīng)起來。

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


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

var jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]


- 函數(shù)參數(shù)的默認(rèn)值
- 遍歷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


- 輸入模塊的指定方法***???***

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



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末温算,一起剝皮案震驚了整個濱河市怜校,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌注竿,老刑警劉巖茄茁,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異巩割,居然都是意外死亡裙顽,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進(jìn)店門宣谈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來愈犹,“玉大人,你說我怎么就攤上這事闻丑′鲈酰” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵嗦嗡,是天一觀的道長勋锤。 經(jīng)常有香客問我,道長侥祭,這世上最難降的妖魔是什么叁执? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮矮冬,結(jié)果婚禮上谈宛,老公的妹妹穿的比我還像新娘。我一直安慰自己胎署,他們只是感情好入挣,可當(dāng)我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著硝拧,像睡著了一般径筏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上障陶,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天滋恬,我揣著相機與錄音,去河邊找鬼抱究。 笑死恢氯,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的鼓寺。 我是一名探鬼主播勋拟,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼妈候!你這毒婦竟也來了敢靡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤苦银,失蹤者是張志新(化名)和其女友劉穎啸胧,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體幔虏,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡纺念,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了想括。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陷谱。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖瑟蜈,靈堂內(nèi)的尸體忽然破棺而出烟逊,到底是詐尸還是另有隱情,我是刑警寧澤踪栋,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布焙格,位于F島的核電站,受9級特大地震影響夷都,放射性物質(zhì)發(fā)生泄漏眷唉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一囤官、第九天 我趴在偏房一處隱蔽的房頂上張望冬阳。 院中可真熱鬧,春花似錦党饮、人聲如沸肝陪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽氯窍。三九已至饲常,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間狼讨,已是汗流浹背贝淤。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留政供,地道東北人播聪。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像布隔,于是被迫代替她去往敵國和親离陶。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,452評論 2 348

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

  • 1.數(shù)組的解構(gòu)賦值 2.對象的解構(gòu)賦值 3.字符串的解構(gòu)賦值 4.數(shù)值和布爾值的解構(gòu)賦值 5.函數(shù)參數(shù)的解構(gòu)賦值 ...
    卞卞村長L閱讀 917評論 0 0
  • 基本用法 ES6 允許按照一定模式衅檀,從數(shù)組和對象中提取值招刨,對變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring...
    嘉奇呦_nice閱讀 789評論 0 2
  • 《ECMAScript6 入門》阮一峰 讀書筆記 let和constlet聲明的變量僅在塊級作用域內(nèi)有效术吝,var聲...
    親愛的孟良閱讀 714評論 1 2
  • 三计济,字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn),只要將碼點放入大括號排苍,就能正確解讀該字符沦寂。有了這...
    eastbaby閱讀 1,518評論 0 8
  • 數(shù)組的解構(gòu)賦值 基本用法 ES6允許按照一定模式,從數(shù)組和對象中提取值淘衙,對變量進(jìn)行賦值传藏,這被稱為解構(gòu)(Destru...
    呼呼哥閱讀 431評論 0 3