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

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

ES6允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(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)格相等運(yùn)算法(===)判斷一個(gè)位置是否有值。所以,如果一個(gè)數(shù)組成員不嚴(yán)格等于undefined,默認(rèn)值不生效。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. 圓括號(hào)問(wèn)題

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

  • 不能使用圓括號(hào)的情況
  • 變量聲明語(yǔ)句中,不能帶有圓括號(hào)。
var [(a)] = [1];  //報(bào)錯(cuò)
  • 函數(shù)參數(shù)中,模式不能帶有圓括號(hào)。
function f([(z)]) {}; //報(bào)錯(cuò)
  • 賦值語(yǔ)句中,不能將整個(gè)模式,或嵌套模式中的一層,放在圓括號(hào)中。
({ p: a }) = { p: 42 };  //全部報(bào)錯(cuò)
[({ p: a }), { x: c }] = [{}, {}];
  • 可以使用圓括號(hào)的情況
  • 賦值語(yǔ)句的非模式部分,可以使用。
[(b)] = [3]; // 正確
({ p: (d) } = {}); // 正確

7. 用途

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

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

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

// 參數(shù)是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 參數(shù)是一組無(wú)次序的值
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)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.數(shù)組的解構(gòu)賦值 2.對(duì)象的解構(gòu)賦值 3.字符串的解構(gòu)賦值 4.數(shù)值和布爾值的解構(gòu)賦值 5.函數(shù)參數(shù)的解構(gòu)賦值 ...
    卞卞村長(zhǎng)L閱讀 952評(píng)論 0 0
  • 基本用法 ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring...
    嘉奇呦_nice閱讀 824評(píng)論 0 2
  • 《ECMAScript6 入門》阮一峰 讀書筆記 let和constlet聲明的變量?jī)H在塊級(jí)作用域內(nèi)有效,var聲...
    親愛(ài)的孟良閱讀 806評(píng)論 1 2
  • 三,字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn),只要將碼點(diǎn)放入大括號(hào),就能正確解讀該字符。有了這...
    eastbaby閱讀 1,667評(píng)論 0 8
  • 數(shù)組的解構(gòu)賦值 基本用法 ES6允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destru...
    呼呼哥閱讀 472評(píng)論 0 3

友情鏈接更多精彩內(nèi)容