1.解構的基本用法

我們經常需要從已經存在的對象或數組中摘取部分數據，沒有ES6解構之前，需要大量遍歷，寫許多重復的代碼。如下代碼

var user={name:"test",age:18,gender:"female",company:"mico"}
var name=user.name;
var company=user.company;
var age=user.age
console.log("name:",name);     //輸出 name: test
console.log("company:",company); //輸出 company: mico
console.log("age:",age); //輸出 age:18

　es6解構處理是這樣的：

var user={name:"test",age:18,gender:"female",company:"mico"}
var {name,company,age}=user;  //解構
console.log("name:",name);     //輸出 name: test
console.log("company:",company); //輸出 company: mico

console.log("age:",age); //輸出 age:18

console.log({name,company}); //輸出 { name: ‘test‘, company: ‘mico‘ }
 

es6解構，讓代碼簡潔，省去重復的賦值代碼，

2.利用ES6解構實現交換變量

平時我們交換變量的時候都要定義一個中間的臨時變量來完成交換，現在用數組的解構輕松可以交換變量，而且還省掉了臨時變量，代碼如下：

let a=1;
let b=2;
[a,b]=[b,a];
console.log(`a=${a}`)  //輸出a=2
console.log(`b=${b}`) //輸出b=1

3.利用ES6解構取任意層級的數據賦值

var house = {
    width: "20m",
    height: "30m",
    people: [{
        name: 
 
"test1",
        age: 18,
        gender: "female",
        company: "mico-test1"
    }, {
        name: "test2",
        age: 18,
        gender: "male",
        company: "mico-test2"
    }]
}
let {people:[,{company}]} = house;
let {people:[,{company:com}]} = house;
console.log(company); //輸出 mico-test2
console.log(com); //輸出 mico-test2

4.利用ES6解構數據賦值，並且添加其他的屬性

var house = {
    width: "20m",
    height: "30m",
    people: [{
        name: "test1",
        age: 18,
        gender: "female",
        company: "mico-test1"
    }, {
        name: "test2",
        age: 18,
        gender: "male",
        company: "mico-test2"
    }]
}
let {people,address=""} = house; //address 是添加的屬性
console.log( {people,address}); //輸出{people:...,address:""}

可以用等號給添加的屬性賦一個默認值，也可以不給他賦值，這樣打印出來address就是undefined（ address: undefined ）

5.ES6解構為非同名變量賦值

var house = {
    width: "20m",
    height: "30m",
}
let {width:newWidth,height:newHeight} = house; 

console.log("newWidth:",newWidth); //輸出newWidth: 20m
console.log("newHeight:",newHeight); //輸出newHeight: 30m

取出house裏的width和height並且賦給newWidth和newHeight兩個局部變量，就可以在舊的屬性後面用冒號：緊跟新的變量，表示把取出的值放在新變量裏。

6.ES6解構數組復制

ar people= [{
    name: "test1",
    age: 18,
    gender: "female",
    company: "mico-test1"
}, {
    name: "test2",
    age: 18,
    gender: "male",
    company: "mico-test2"
}]
let [...clonePeople]=people
console.log("clonePeople:",clonePeople); //輸出clonePeople: [ { name: ‘test1‘,age: 18,gender: ‘female‘,company: ‘mico-test1‘ },{ name: ‘test2‘, age: 18, gender: ‘male‘, company: ‘mico-test2‘ } ]
clonePeople[0].name="ll";
console.log(people[0].name) //輸出ll

用解構數組復制以後，

1.如果數組成員是引用類型，那麽舊的數組和新的數組都是指向一個地址，無論哪個變量改變，數組都會跟著改變

2.如果數組是基本類型，那麽舊的數組和新的數組，無論哪個變量改變都不會相互影響。

註意：解構裏為對象賦值的，都是指向的同一個地址，所以舊的對象值，與賦值後的變量是相互影響的

例如：

var house = {
    width: "20m",
    height: "30m",
    people: [{
        name: "test1",
        age: 18,
        gender: "female",
        company: "mico-test1"
    }, {
        name: "test2",
        age: 18,
        gender: "male",
        company: "mico-test2"
    }]
}
let {people} = house; //address 是添加的屬性
console.log(people); //輸出[ { name: ‘test1‘,age: 18,gender: ‘female‘,company: ‘mico-test1‘ },{ name: ‘test2‘, age: 18, gender: ‘male‘, company: ‘mico-test2‘ } ]
people[0].name="arry";
console.log(house.people[0].name);//輸出arry

賦值後的變量people裏第一個值的name改成arry，結果house裏面對應的people值也改成了arry

es6 解構