es6入門2--對象解構賦值

解構賦值：ES6容許按照必定規則從數組或對象中提取值，並對變量進行賦值。說直白點，等號兩邊的結構相同，右邊的值會賦給左邊的變量。

1、數組的解構賦值：

1.基本用法

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); //1,2,3

let [d, ,] = [1, 2, 3];
console.log(d); //1

let [[e], f] = [[1], 2];
console.log(e, f); //1,2

let [g, ...h] = [1, 2, 3];
console.log(g, h); //1,[2,3]

2.不徹底解構---右邊提供的值要比變量多

let [[i]] = [[1, 2], 3];
console.log(i); //1

3.解構賦值失敗爲undefined

let [j] = [];
console.log(j); //undefined

4.支持解構賦值提供默認值

let [k = 1, l = 2] = [3];
console.log(k, l); //3,2

規則是先看右邊的值是否嚴格等於undefined，若是是undefined纔會用默認值，除此以外，都是優先用右邊提供的值。

let [m = 1, n = 2] = [undefined, null];
console.log(m, n); //1，null

默認值支持是一個表達式，好比一個函數，賦值規則仍是遵照先看右邊是否爲undefined。

function func1() {
  return 2;
}
let [o = func1()] = [1];
console.log(o); //1

等同於如下代碼：

let o;
if ([1][0] === undefined) {
  o = func1();
} else {
  o = [1][0];
}

默認值支持使用別的變量，但前提是這個變量已經提早聲明，不然會報錯。

let [p = 1, q = p] = [];
console.log(p, q); //1,1

2、對象的解構賦值

1.基本用法

對象解構賦值與數組有些不一樣，數組像按照等號對稱的賦值，而對象是按照key名相同賦值，與順序無關

let { a, b } = { b: 1, a: 2 };
console.log(a, b); //2,1

按照直覺，a賦值的過程是，從右邊找a,若是有，就將右邊a的值賦給左邊a。但變量解構賦值的本質實際上是這樣的，前面的a只是做爲匹配的依據，後者纔是賦值的變量與值。

上面的代碼等同於這樣：

let { a: a, b: b } = { b: 1, a: 2 };
console.log(a, b); //2,1

 不信咱們作個測試，看下面的代碼，a只是用於作匹配，後者纔是賦值。

let { a: b } = { a: 2 };
console.log(b); //2

2.變量解構嵌套使用

let {a: [b, { c }]} = { a: [1, { c: 2 }] };
console.log(b, c); //1,2

3.變量解構賦值失敗

若是解構嵌套的是對象，且這個對象的父對象在右邊不存在，當解構賦值時，會報錯，緣由是這個變量右邊沒有爲undefined，從undefined中讀取任意屬性是非法操做。

let {a: { b }} = { c: { b: 1 } };
console.log(b); //報錯

4.變量解構賦值存在繼承關係

let obj1 = {};
let obj2 = { a: 1 };
Object.setPrototypeOf(obj1, obj2);
let {a} =  obj1
console.log(a)//1

5.對象解構賦值也存在默認值

對象解構賦值也支持默認值，規則與數組相似，只有右邊的值嚴格等於undefined，左邊的默認值纔會生效。

let {a=1,b=2} = {a:undefined,b:null};
console.log(a,b)//1,null

6.對象解構與數組解構的混合使用

由於數組自己也屬於特殊對象，因此混合使用並不非法。

let arr = [1,2,3]
let {0:a,[arr.length-1]:b} = arr;
console.log(a,b)//1,3

上述代碼等同於如下代碼，以數組下標(索引做爲key)

let {0:a,[arr.length-1]:b} = [0:1,1:2,2:3];

 3、字符串解構賦值

字符串解構賦值時，字符串會轉爲一個類數組。

let [a, b, c, d] = "love";
console.log(a,b,c,d)//l,o,v,e

由於是類數組，因此天然擁有length屬性，咱們也能夠讀取length屬性進行賦值。

let { length: a } = "love";
console.log(a); //4

4、函數參數解構賦值

規則符合參考數組，對象的解構賦值

function add([a, b]) {
  return a + b;
};
add([1,2])//3

因此函數解構賦值確定是支持使用默認值的

function add([a = 1, b = 2] = []) {
  console.log(a + b);
}
add(); //3
add([3,4]);//7

5、使用解構賦值的好處

1.變量交換值--筆試有這樣的題目

let a = 1,
  b = 2;
[a, b] = [b, a];
console.log(a,b)//2,1

2.讓函數返回多個值

 若是讓函數返回多個值，咱們能夠將這些值放在數組或對象裏，可是取值就麻煩了，還要遍歷，使用解構賦值就方便不少

function func1() {
  return [1, 2, 3];
}
let [a, b, c] = func1();
console.log(a, b, c); //1,2,3

function func2() {
  return {
    a: 1,
    b: 2
  };
}
let { a, b } = func2();
console.log(a, b); //1,2

3.讓函數參數有所對應

 默認給函數參數，參數取值都是按順序取用戶傳遞的值，可是使用瞭解構賦值，就不須要按照順序傳遞了。

function add(a,b){
    console.log(a,b)
};
add(1,2)//1,2
//不按照順序
function add2({b,a}){
    console.log(a,b)
};
add2({a:1,b:2})//1,2

4.提取JSON數據

let jsonData = {
  'name': "echo",
  'age': 26,
  'address': "深圳"
};
let { name, age, address } = jsonData;
console.log(name, age, address);

5.爲函數形參添加默認值

傳統寫法：

function add(x, y) {
    var a = a || 1;
    var b = b || 2
  console.log(a + b);
}
add()//3

解構賦值寫法：

function add({ a = 1, b = 2 } = {}) {
  console.log(a + b);
}
add(); //3
add({ a: 4, b: 5 }); //9

 6.遍歷Map解構

解構賦值能爲for...of遍歷取值提供遍歷，這個只是點我還沒看到，先記錄

const map = new Map();
map.set(1, 2);
map.set('a', 'b');
for (let [key, value] of map) {
  console.log(key + "is" + value);//1isa  2isb
};

固然，你能夠只取key或者value，像這樣：

for (let [key] of map) {
}
for (let [, value] of map) {
}

7.模塊引入方法

只是爲不一樣變量賦予不一樣的引入方法，利用解構賦值能夠爲多個變量賦值，比較方便。

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