昨天學習了es6語法中解構賦值，解構賦值在聲明中和函數傳參提高了靈活性和便捷性，值得掌握該語法。

概念：
ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。

數組的解構：

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

ps:解構不成功，變量的值就等于undefined

 let [arr,foo] = [1];
 console.log(foo);    // undefined

有兩種解構：
　1 完全解構，等號左邊的變量和等號右邊的值一一對應
　2 不完全解構，等號左邊的模式，只匹配一部分的等號右邊的數組

let [x, y] = [1, 2, 3];
console.log(x);  // 1
console.log(y);  // 2
let [x,[a],y] = [1,[2,3],4];
console.log(a)  // 2

數組解構賦值可以帶有默認值

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

解構賦值如果有默認值，與之對應的也有值，則覆蓋默認值

let [a,b=2] = [1,3];
console.log(`a的值是${a}        b的值是${b}` )     //  1      3

解構賦值中右邊有undefined時，與之對應的左邊會采用其默認值。若兩者都是undefined，則為undefined

let [a,b=2] = [1,undefined];
console.log(`a的值是${a}        b的值是${b}` )    // 1      2  

ps：在es6的規定下，要判斷兩者是否相等，必須用三等===來判斷。

let [a,b=2] = [1,null];
console.log(a)    // 1
console.log(null === undefined)  // false  嚴格模式下，null和undefined不等
console.log(b)    // null

最常見的例子就是如何將兩個數值互換,一般我們常用借用第三個變量或者用加減法來進行互換，因此數組的解構賦值也可以將兩個數值互換。

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(`x:${x}     y:${y}`)     // x:2     y:1

對象的解構

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。如果對象解構賦值中沒有找到對應的屬性名，則返回undefined

let {b, a, c} = {a: 'peter', b: 'Bob'};
console.log(`a:${a}         b:${b}     c:${c}`)    // peter     Bob    undefined

如果變量名和屬性名不一致，根據對象解構的內部機制：先找到同名屬性，然后再賦給對應的變量(我感覺既然是自己聲明變量，倒不如向上面的一樣就好)。

const obj = {
     foo: 'peter',
     bar: 25
};
let {foo: name, bar: age} = obj;
console.log(`name:${name}       age:${age}`)     // name:peter       age:25

對象解構賦值的默認值情況跟數組一樣。
　1 有默認值，與之對應的也有值，則覆蓋默認值
　2 右邊有undefined時，與之對應的左邊會采用其默認值。若兩者都是undefined，則為undefined
　3 右邊的值是null，左邊有默認值，也要返回null

ps: 當你解構對象并賦值給變量時，如果你已經聲明或不打算聲明這些變量（亦即賦值語句前沒有let、const或var關鍵字）,會報語法錯誤。

{obj} = {obj: 10}    //  Uncaught SyntaxError: Unexpected token =

這是因為JavaScript語法通知解析引擎將任何以{開始的語句解析為一個塊語句（例如，{console}是一個合法塊語句）。解決方案是將整個表達式用一對小括號包裹：

({obj} = {obj: 10})

在對象解構賦值中，最常用的就是，函數返回值，有多個時，可以按照返回對象的形式返回。

function foo() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = foo();

可以提取 JSON 對象中的數據

let json = {
    id: 1,
    status: 200,
    data: [123, 456]
};
let { id, status, data: number } = json;
console.log(id, status, number);  // 1, 200, [123, 456]

字符串解構

字符串解構賦值，是字符串被轉換成了一個類似數組的對象

let [a,b,c,d,e,f] = 'hello';
console.log(`a:${a}    b:${b}    c:${c}    d:$ozvdkddzhkzd    e:${e}   f:${f}`)    // a:h    b:e    c:l    d:l    e:o   f:undefined
console.log(typeof a)   // string

let [m,n,q,p] = 'w ord';
console.log(`m:${m}   n:${n}    q:${q}   p:${p}`)  // m:w   n:     q:o   p:r

let {length:len} = 'hello world';
console.log(len)    // 12
       
let [a='H',b,c,d,e,f='W'] = 'hello';
console.log(`a:${a}    b:${b}    c:${c}    d:$ozvdkddzhkzd    e:${e}   f:${f}`)    // a:h    b:e    c:l    d:l    e:o   f:W

從上面的例子可知：
　字符串是按著順序依次賦值的，有空格也要賦值為空格。
　左邊的變量聲明的個數>右邊賦值的個數，那么從左往右的后面的元素賦值為undefined
　左邊的變量聲明的個數<右邊賦值的個數，那么右邊多余的則不展示。
　如果有類似數組的對象有length，可以對這個進行賦值。
　有默認值的情況下，則會覆蓋默認值，如果最后一個元素在賦值中為undefined則會使用默認值

函數參數的解構賦值

函數參數傳參可以是數組，對象，以及字符串等等，按照以前的規定寫，會出現冗雜，亂，通過解構賦值，可以解放了函數的傳參。

 function add([x, y]){
     return x + y;
 }
 console.log(add([1,2]));      // 3  

函數參數的解構賦值可以帶有默認值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
console.log(move({x: 1, y: 2}));     // [1, 2]
console.log(move({x: 1}));        // [1, 0]
console.log(move({}));        // [0, 0]
console.log(move());       // [0, 0]

對應的筆記和實例，我放到了GitHub，https://github.com/sqh17/notes

有什么問題請私信或留下評論，一起加油。

參考資料：

阮一峰大大的es6標準入門：http://es6.ruanyifeng.com/

總結

以上是生活随笔為你收集整理的es6学习笔记--解构赋值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。