ES6（二）解構賦值詳解

詳解一下之前的解構賦值

　　①解構賦值中的“...”

let [a,...b]= [1];     
b   // []     ...代表變量b去匹配剩余的所有元素返回一個數組 ，匹配不到時返回[]  
//注意："...b"只能放在最后

　　②解構賦值的等號兩邊的數據類型必須一樣

即：

let [] = [] 或者 let {} = {}

但是：Set結構也允許使用數組進行解構賦值　

let [a,b]= new Set([1,2,3,4])
a  //1
b  //2

技巧：　如果你不確定該結構是否能夠解構賦值，判斷其是否有Iterator接口就可以啦！判斷方法如下：

function* fibs() {
  var x= 0;
  var y= 1;
  while (true) {
    yield x;
    [x, y] = [y, x+ y];
  }
}

var [a, b, c, d, e, f] = fibs();
f// 5
//   fibs是一個Generator函數，原生具有Iterator接口。解構賦值會依次從這個接口獲取值。

 

　　③解構賦值不僅適用於 let / const也適用於var指令

　　④解構賦值允許添加默認值

let [a = 4] = [] 
a //4

　　(解構賦值的匹配模式是===)注：如果解構賦值不嚴格等於 undefined 的話默認值不會生效

let [a = 4]=[undefined]
a //4

let [b = 4]=[null]
b//null

　　⑤我自己犯過的錯

let [x = y, y = 1] = [];     //報錯  因為x=y時y還沒有被聲明    不會被提升！！！ 牢記
var [a = b, b = 1] = [];      // a===undefined  b === 1

 對象的解構賦值

　　①對象不像數組那樣有順序所以，對象的解構賦值是按照‘鍵’的方式匹配的

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz //  'aaa'      foo是匹配模式  baz是變量

　　②對象和數組的嵌套    如果看明白一下例子也就差不多了

var obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

var { p: [x, { y }] } = obj;      //p是匹配模式  [x , { y }]是值   然后再看數組中的每一項

x // "Hello" 
y // "World" 

　　③不像數組那樣不存在時返回undefined  對象是會報錯的

字符串的解構賦值

const [a, b, c, d, e] = 'hello';  
a  // h
b  // e
c  // l

let {length : len} = 'hello'; len // 5 匹配的是字符串的length屬性

干貨：用途

（1）交換變量的值　

[a,b]=[b,a]

（2）從函數返回多個值

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

（3）函數參數的定義

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

（4）提取JSON數據

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

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

（5）函數參數的默認值

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

（6）遍歷Map結構

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