ES6(2) 解構賦值

1.解構賦值（Destructuring）
ES6 允許按照一定模式，從數組和對象中提取值（變量值的來源），對變量進行賦值（作用），這被稱爲解構。
2.數組的解構賦值

• 按下標一一對應地去賦值

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

• 左右數量不等

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

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

• 跳過部分

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

• 默認值

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

• 嵌套

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

3.對象的解構賦值：定義了兩個變量；給這兩個變量賦值；

• 本質-按屬性名的一一對應關係來進行賦值
• 解構規則
  必須要通過鍵名進行關聯。
  沒有鍵名就是undefined
  對象的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變量。
• 默認值
• 將現有對象的屬性，賦值到某個變量

<script>
let{max,min,abs}=Math;
console.info(max(2,8,6,5,9))
console.info(min(2,8,6,5,9))
console.info(abs(2,8,6,5,9))//絕對值
</script>

• 沿着原型鏈進行
  =號的右邊是一個空數組，它是一個對象，它自己有沒有一個屬性名爲push？它自己沒有，但它的隱式原型上有push屬性。所以，這裏的push就是：[].proto.push
• 函數參數中的解構賦值

<!-- 函數參數中的解構賦值 -->
<script>
function f(obj) {
    console.info (obj.lastName,obj.age);
}
f({
    lastName:"jake",
    age:30
});
</script>


<!-- 函數參數中的解構賦值簡化 -->
<script>
    function f(lastName,age) {//形參
        console.info(lastName,age);
    }
    f({lastName: "jake",age: 30 });//實參
</script>

4.解構賦值的應用

• 交換變量的值

<!--交換變量的值 -->
<script>
let a=2;
let b=4;
[a,b]=[b,a]
//把右邊看作一個整體，就是一個數組，然後左邊就是解構賦值。
console.info(a)
console.info(b)
</script>

• 快速獲取從函數中返回的多個值

<script>
// 返回一個數組
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
console.log(a,b,c);//   1  2  3


// 返回一個對象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
console.log(foo,bar);   //1  2
</script>

• 獲取json數據中的值

<!--  3.提取json數據 -->
<script>
  	let jsonData = {
   	id: 42,
	status: "OK",
  	data: [867, 5309]
  };

let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42 "OK" (2) [867, 5309]
</script>