ES6學習筆記（二）--------------------------------------變量的解構賦值

ES6 容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構
ES6以前咱們申明多個變量須要按照下面的方法：

let a=1;
let b=2;
let c=3;
let d=4;
//或者
let a=1,b=2,c=3,d=4;

如今咱們能夠更加簡便

let[a,b,c,d]=[1,2,3,4]

這種方法須要連邊結構徹底對上，左邊有多餘變量，會給多餘變量賦值undefined，右邊有多餘的值，多餘的自動會被忽略

let[a,[b,c,d],[e,[f,g]]]=[1,[2,3,4],[5,[6,7]]]
console.log(a,b,c,d,e,f,g)//1 2 3 4 5 6 7

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

若是等號右邊的對象不是數組，就會沒法解析，報錯

//下面的所有報錯
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

解構賦值容許給變量默認值,若是後面給變量賦值undefined，系統會自動採用默認值

let[a=1,b,c,d]=["abort","bar","cancle","dance"]
console.log(a,b,c,d)//abort bar cancle dance

let[a=1,b,c,d]=[undefined,"bar","cancle","dance"]
console.log(a,b,c,d)//1 "bar" "cancle" "dance"

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

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

let[a=undefined,b]=[undefined,undefined]
console.log(a,b)//undefined undefined

默認值能夠引用解構賦值的其餘變量，但該變量必須已經聲明。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

解構賦值還能夠用於對象的屬性賦值

let{a,b}={a:1,b:2}
a//1
b//2
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

咱們從上面的例子能夠看出對象的解構賦值的內部機制，是先找到同名屬性，而後再賦給對應的變量。真正被賦值的是後者，而不是前者。

若是變量名與屬性名不一致，必須寫成下面這樣。

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

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

上面的例子等價於下面,其實就是個左右一一對應的意思

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

與數組同樣，解構也能夠用於嵌套結構的對象。

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

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

必定要看清楚他的左右對應關係

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

var { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

對象解構賦值也能夠設置默認值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

字符串也能夠解構賦值。這是由於此時，字符串被轉換成了一個相似數組的對象。

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

相似數組的對象都有一個length屬性，所以還能夠對這個屬性解構賦值。

let {length : len} = 'hello';
len // 5

數字和布爾的解構賦值，解構賦值時，若是等號右邊是數值和布爾值，則會先轉爲對象。(這個給我搞的有點懵逼，數字與布爾的這個例子你們能夠看這個網址你們的討論：https://segmentfault.com/q/10...

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

let { toString : s } = 123; 
// 能夠換成兩步
let temp = new Number(123);
let { toString : s } = temp;

// temp對象由於有toString屬性，因此解構成功，而後將toStirng變量用新的變量s代替

let { a : s } = 123 是由於解構失敗，因此是undefined

變量解構賦值的用途
一.交換變量的值

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

二.從函數返回多個值，用來接收返回值

function f(a,b){
var num=a+b;
var aver=(a+b)/arguments.length;
return[num,aver,a*b,a*a+b*b]
}
let[x,y,z,p]=f(2,3)
console.log(x,y,z,p)//5 2.5 6 13

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

解構賦值能夠方便地將一組參數與變量名對應起來。

function f1([x,y,z]){
return x+y+z}
f1([1,2,3])//6

參數也能夠是無序的
function f2({a,c,d,f,b}){
return a+c+d+f+b}
f2({a:1,b:2,c:3,d:4,f:5})//15

解構賦值對提取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]

....