JavaScript options object merge

這很有用喔,JavaScript 把零散程式封裝成插件時,會傳入物件相關選項 options,使封裝的程式因為選項 options 的屬性值不同而能實體化出更多可能。

建立封裝程式的選項 options 物件

為維持程式正常運行,通常都會建立一個預設值物件,在實體化的時候傳入一個選項 options 物件 ,與預設選項物件合併,後者覆蓋前者,以下為範例程式:

_default 為預設物件

options 為傳入物件

_options 為合併後物件

function hello(options={}){
    
    let _default = {
        name: 'hello',
        color: 'blue',
        age: 35
    }
    
    // ES6 合併多個物件
    let _options = {..._default, ...options};
    
    console.log(_options)

}

new hello({
    color: 'blue',
    age: 35
})

output:

{name: "hello", color: "blue", age: 35}

options merge

如果兩個對象都有一個具有相同名稱的屬性,則第二個對象屬性將覆蓋第一個對象。

ES6在2015年引入了spread運算符【…】,這是將兩個簡單對象合併為一個的完美方法:

const object1 = {
    name: 'Flavio',
    color: 'blue'
}

const object2 = {
    age: 35
}

const object3 = {
    color: 'red'
}

const object = {...object1 , ...object2 , ...object3 }

console.log(object)

output:

{name: "Flavio", color: "red", age: 35}

參考資料:

https://stackoverflow.com/a/171256/6784662

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料