ES6解構

解構：「解開--重構」

1.數組的解構：

 //數組的解構；
    // let arr=[1,2,3,6]
    // let[a,b,c,d]=arr;
    // console.log(a,b,c,d)// 1,2,3,6
!!僞數組也能夠進行解構，如獲取得DOM節點（就是一個僞數組）

2.對象的解構：

//對象的解構；
    // let obj={
    //     name:'gbb',
    //     age:89,
    // }
    // let{name,age}=obj;
    // console.log(name,age)  gbb 89

3.複雜對象的解構：

複雜對象的解構；
    let obj={
        name:'gbb',
        age:89,
        obj1:{
            sex:'nan',
            height:175,
        }
    }

    let{name,age,obj1:{sex,height}}=obj;
    console.log(name,age,sex,height)

 

//注：等號右側若是不能進行遍歷，都不能解構。

let [a] = 10;
let [a] = null;
let [a] = true
let [a] = false;
let [a] = undefined;
let [c] = NaN;

let [a] = [] //返回的爲undefined
let {a} = {} //返回的爲undefined

 

4.擴展運算符：...

  ... 的做用：

a:對函數的參數進行解構；（函數的所傳參數不肯定）

function fn(...num){
      console.log(num)  //[1,3,5,9]
  }
  let arr=[1,3,5,9];
  fn(...arr);

b:對象進行合併：

var obj1={
    name:'nana',
    age:66,
}
var obj2={
    sex:'nan',
    height:15,
    name:'會不會覆蓋了？'  //相同屬性將會被覆蓋！！
}
var obj3={...obj1,...obj2};
console.log(obj1,obj2,obj3)

 

 c: 對其餘數據的保存：

function fn(a,b,...c){
    console.log(c);  //3,4,5,6  將不肯定的數據保存
    }
    fn(1,2,3,4,5,6);

 

eg：

一、交換兩個變量的值

    var a = 10;

    var b = 20;

    var [a,b] = [b,a];

    console.log(a);