原生JS---解構賦值

　　好久沒寫博客了，慚愧慚愧。。。。。。今天來看一下解構賦值。

解構賦值語法是一種JavaScript表達式，它使得將值從數組、或屬性從對象，提取到不同的變量中，成為可能。

　　（一）解構數組

　　　　1.1 變量聲明並賦值

    var foo = ["one", "two", "three"];
    var [one, two, three] = foo;
    console.log(one); // "one"
    console.log(two); // "two"
    console.log(three); // "three"

　　1.2 變量先聲明后賦值時的解構

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

　　　1.3 默認值：為防止從數組重取出一個值為undefined的對象，可以再表達式左邊的數組中為任意對象預設為默認值

     var a,b;
     [a = 5,b = 7] = [1];
     console.log(a) //1
     console.log(b)  //7

　　1.4 解析函數的返回值---數組

    function f(){
        return [1,2,3,4];
    }
    [x,y,...z] = f();
    console.log(x) // 1
    console.log(y) //2
    console.log(z) // Array(2) [3,4]

 　　1.5 忽略某些返回值

    function f() {
        return [1, 2, 3, 4];
    }
    [x,, ...z] = f();
    console.log(x) // 1
    console.log(z) // Array(2) [3,4]

　　1.6 將剩余數組賦值給一個變量（當解構一個數組時，可以使用剩余模式，將數組剩余部分賦值給一個變量）

　　　　！！注意：剩余元素右側不可有逗號，不然會拋出一個錯誤

    var [a,...b] = [1,2,3]
    console.log(a) // 1
    console.log(b) // [2,3]

　　（二）解構對象

 　　2.1 基本賦值

    var o = {p:1,q:true};
    var {p,q} = o;
    console.log(p) // 1
    console.log(q) //true

　　2.2 無聲明賦值

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

　　2.3 給新的變量名賦值（我們可以從一個對象中提取變量並賦值給和對象屬性名不同的新的變量名）

    var o = {p:1,q:false}
    var {p:bar,q:foo} = o;
    console.log(bar) //1
    console.log(foo) //false

　　2.4默認值（變量可以先賦予相應的默認值。當腰提取的對象沒有相應的屬性時，變量就會被賦予默認值）

    var {a = 10,b = 5} = { a:3};
    console.log(a) // 3
    console.log(b) //3

 　　2.5給新的變量命名並提供默認值

var {a:aa = 10,b:bb=100} = {a:3};
    console.log(aa) //3
    console.log(bb) //100

　　2.6函數參數默認值

function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) 
{
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

　　如果你忽略了右邊的賦值，那么函數會在被調用的時候查找至少一個被提供的參數，而在當前的形式下，你可以直接調用drawES2015Chart()而不提供任何參數。

　　2.7解構嵌套對象和數組

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung'
    }
  ],
  url: '/en-US/docs/Tools/Scratchpad'
};

let {
  title: englishTitle, // rename
  translations: [
    {
       title: localeTitle, // rename
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

　　2.8 For of 迭代和解構 

var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (var {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"