函式解構引數小細節

東東dd發表於2019-03-20
函式

關於解構

在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) {
    
}
複製程式碼

相關文章