天天看點

ES6學習之-變量的解構指派

僅做個人學習交流

參考文章:http://es6.ruanyifeng.com

前提:

解構指派分為:數組、對象、字元串、數值和Boolean、函數參數;

解構指派就是将目标對象進行分解之後指派給聲明變量的一個過程;

解構所對應的是數組或者對象,如果不是的話,将會自動将其裝換為對象(數組是特殊的對象)進行結構;

解構的對象必須是具備 iterrator 接口的對象;

解構可以對複雜的嵌套結構進行解構;

解構過程中使用的大括号“{....}”不可以用于行首(會被 JavaScript 解析為塊級元素),需要通過圓括号進行隔離;

數組的解構指派:

    1、數組的解構是通過 index 屬性進行的,有序的和聲明變量進行一一指派,聲明變量可以通過預設的(index)進行取值,也可以通過指定位置(屬性)進行擷取(将數組視為對象);

// 正常用法

let [x, , y] = [1, 2, 3];

x // 1

y // 3



// 對象用法

let arr = [1, 2, 3];

let {0 : first, [arr.length - 1] : last} = arr;

first // 1

last // 3
           

    2、解構失敗之後将會指派:undefined;

    3、變量值嚴格等于 undefined 的時候(直接指派或者解構失敗)會觸發預設值;

    4、預設值可以是變量、常量、函數(函數為惰性函數,即:用到就運算,用不到就不運算)等;

對象的解構指派:

    1、對象的取值必須通過完整的屬性名進行擷取;

    2、繼承自父類的屬性也是可以擷取的;

    3、預設值的使用和數組的注意點是一緻的;

    4、其他類型的資料都是特殊類型的對象,是以對于其他資料的包裝類型都可以通過其屬性名進行取值;

字元創的解構指派:

    1、字元串在被解構的時候會裝換為一個數組,指派的過程就和數組的操作是一緻的了。

數值和Boolean值得解構指派:

    1、數值和Boolean值預設的包裝類型都是有tostring方法的,是以會優先轉換為對象進行解構;

    2、undefined 和 null 由于無法轉換為包裝類型是以會報錯:TypeError Exception

函數參數的解構指派:

    這個是講如何将解構之後的内容指派到函數參數中去。

    1、函數中傳值的時候預設将傳遞參數進行解構,并對參數進行指派;

    2、參數設定的時候是可以設定預設值的,可以對單獨的參數進行設值也可以對參數整體進行設值;

    3、預設值得使用同數組的解構指派相同;

圓括号的使用:

    因為圓括号的使用會導緻解析複雜度的升高,是以為了提升性能,在能不使用圓括号的情況下,盡可能的不用。

    以下情況不能使用圓括号:

    1、聲明語句中(函數的參數也屬于變量的聲明範疇);

    2、指派語句中,圓括号會将指派語句進行分割;

    總結:圓括号有分割區域的作用,任何可能會破壞原有模型結構的語句中都是不能是引用圓括号的。

    可以使用的情況:

    1、不改變原有模型結構的情況下,通俗講就是他不會破壞原有的結構:可以是結構整體放在圓括号中或者其他情況;

解構指派能用來做什麼?

    1、交換變量的值

let x = 1;

let y = 2;



[x, y] = [y, x];

           

    2、接收函數傳回的值

// 傳回一個數組

function example() {

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

// 傳回一個對象

function example() {

  return {

    foo: 1,

    bar: 2

};}

let { foo, bar } = example();
           

    3、函數參數的指派

// 參數是一組有次序的值

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

// 參數是一組無次序的值

function f({x, y, z}) { ... }f({z: 3, y: 2, x: 1});
           

    4、從 json 資料中取值

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、設定函數參數的預設值

    6、周遊 Map 類型的資料(同 json 資料的處理)(任何部署了 Iterator 接口的對象,都可以用for...of循環周遊。Map 結構原生支援 Iterator 接口,配合變量的解構指派,擷取鍵名和鍵值就非常友善。)

const 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");