函數解構參數小細節

關於解構

在es5中咱們獲取對象或者數組的值的時候每每是這樣的：

var jack = {
    name: "jack",
    age: 12
}
var colors = ["red", "green", "yellow"];
var name = jack.name,                   // "jack"
    age = jack.age;                     // 12
    firstColor = colors[0],
    secondColor = colors[1];
複製代碼

若是你要提取更多變量則須要寫更多相似的結構，有的可能存在多層嵌套。es6爲解決這個痛點，提供了一個全新的特性，這就是咱們的解構啦。要達到上面的效果，es6中咱們能夠這麼寫

const jack = {
    name: "jack",
    age: 12
};
const colors = ["red", "green", "yellow"];

const {name, age} = jack;
const [firstColor, secondColor] = colors;

複製代碼

有沒有更簡潔明瞭，固然若是是使用var, let, const 聲明變量，則必須提供初始化的值（等號右邊）;

默認值

解構的時候是能夠給予默認值的，若是沒有則會賦值undefined;

const jack = {
    name: "jack",
    age: 12
};
const {name, age, weight = 60} = jack;

console.log(weight) // 60

複製代碼

嵌套和重命名

解構也是支持嵌套的,同時你能夠賦值給不是屬性名的任何變量

const jack = {
    others: {
        school: "xxx",
        country: "America"
    }
}
const {others: {school,country}} = jack;
const {others: jackInfo} = jack
console.log(school, country) // 'xxx', "America"
複製代碼

解構參數

解構也能夠用在函數參數傳遞的過程當中，這種方式更特別，之前咱們在實現一個函數時,若是要獲取對象裏面的值一般會這樣

function fn (name, age, options) {
    options = options || {}; //判斷是否傳參
    var school = options.school;
    // ....其它邏輯代碼

}
複製代碼

而es6中你就徹底不用如此

function fn (name, age, {school, country}) {
    
};
// 調用
fn('jack', 12, {school: "xxx", country: "America"});
複製代碼

默認值問題

上面這個例子中若是你不傳入第三個參數，調用函數會報錯，你能夠這樣：

function fn (name, age, {school, country} = {}) {
    
};
// 調用
fn('jack', 12);
複製代碼

這種方法只是解決了調用報錯問題，但「school」和「country」的默認值仍是沒解決，能夠利用解構賦值同樣的語法解決默認值的問題

function fn (name, age, {school="xxx", country="America"}) {
    
};
複製代碼

將上面兩種結合起來既能夠解決第三個參數可選，也能夠解決默認值的問題

const default = {
    school: 'xxx',
    country: 'America'
}
function fn (name,age {school=default.school, country=default.country}=default) {
    
}
複製代碼