編輯JSON對象 - 尋找更好的功能計算策略

Question

我有設置一個JSON對象，類似這樣的東西：

var settings = { 
    tab1: { 
    active: true, 
    selectOrder: 1, 
    selected: false 
    }, 
    tab2: { 
    active: true, 
    selectOrder: 2, 
    selected: false 
    }, 
    tab3: { 
    active: false, 
    selectOrder: 0, 
    selected: false 
    } 
}; 

現在，我的目標是設置「中選擇」屬性爲「真」的具有最低'selectedOrder'的活動元素。在這個例子中，我應該爲'tab1'元素設置'selected'（'tab3'的selectedOrder爲0，但不是活動的）。

它背後的原因是根據其優先級（selectOrder）選擇第一個活動選項卡。

我的解決辦法是：

function selectFirstActiveTab(visibilitySettings) { 
    var selected = 1000; 
    var answer = jQuery.extend({}, visibilitySettings); 
    Object.keys(answer).forEach((key) => { 
    if (answer[key].active && answer[key].selectOrder <= selected) { 
     selected = answer[key].selectOrder; 
    } 
    }); 

    Object.keys(answer).forEach((key) => { 
    answer[key].selected = (answer[key].selectOrder === selected) ? true : false; 
    }); 
    return answer; 
}; 

雖然這種解決方案的工作，這似乎是一個糟糕的一個。

我的問題是：

1. 是否有一個更好的 「函數式編程」 的方法呢？ （例如使用map/reduce等）

2. 我覺得我的設置對象結構不好。也許我應該選擇一個對象數組而不是這個JSON？選擇像這樣的JSON的原因是爲了更簡單地綁定到我的模板（類似於「{{settins.tab1.selected}}」 - 在我的html中查找它更簡單）。這裏應該是更好的方法？

Here is the complete example in JSBIN

Answer 1

1. 在地圖和減少對Object，您可以使用Underscore：

function selectFirstActiveTab(visibilitySettings) { 
    // Clone input, with selected set to false. 
    var answer = _.mapObject(visibilitySettings, (item, key) => { 
    return {active: item.active, selectOrder: item.selectOrder, selected: false}; 
    }); 

    // Find the min among all value. 
    var minObj = _.reduce(answer, (min, item) => { 
    return (item.active && item.selectOrder < min.selectOrder) ? item : min; 
    }, {active: true, selectOrder: Number.MAX_SAFE_INTEGER}); 

    // Set min to selected. 
    minObj.selected = true; 
    return answer; 
}; 

jsBin

或香草的javascript：

function selectFirstActiveTab(visibilitySettings) { 
    var keys = Object.keys(visibilitySettings); 

    // Create a cloned obj, like map 
    var answer = {}; 
    keys.forEach((key) => { 
    var cloneTarget = visibilitySettings[key]; 
    answer[key] = { 
     active: cloneTarget.active, 
     selectOrder: cloneTarget.selectOrder, 
     selected: false 
    }; 
    }); 

    // Convert key => value map to an array of value, then reduce it to find min. 
    var minimun = keys.map((key) => answer[key]).reduce((min, item) => { 
    return (item.active && item.selectOrder < min.selectOrder) ? item : min; 
    }, {active: true, selectOrder: Number.MAX_SAFE_INTEGER}); 

    // Set min to selected. 
    minimun.selected = true; 
    return answer; 
}; 

jsBin

這不是JSON，它只是一個普通的Object一些鍵 - 值映射，我們用它作爲Map。

var settings = [ 
    { 
    name: 'tab1', 
    active: true, 
    selectOrder: 1, 
    selected: false 
    }, 
    { 
    name: 'tab2', 
    active: true, 
    selectOrder: 2, 
    selected: false 
    }, 
    { 
    name: 'tab3', 
    active: false, 
    selectOrder: 0, 
    selected: false 
    } 
]; 

如香草JavaScript的支撐降低array /圖：如果輸入是一樣的陣列它可以更容易地應用上面的邏輯。然而，許多庫像lodash,underscore只是減少/地圖可用的對象。你可以只選擇最適合你需要的那個（因爲有許多這樣的lib，使你能夠映射/減少對象）。

Answer 2

試試這個：

tmp = 0; 
_tab = false; 
for (tab in settings){ 
    if((settings[tab].active)){ 
     if(!tmp){ 
      tmp = settings[tab].selectOrder; 
      _tab = tab; 
     }else if(settings[tab].selectOrder < tmp){ 
      _tab = tab; 
     } 
    }; 
} 
settings[_tab].selected = true; 

Answer 3

使用lodash，你可以寫：

import { chain, transform, extend } from 'lodash'; 

transformObj = (obj) => chain(settings) 
    .map((obj, key)=> ({ key, obj })) 
    .select(({ obj: { active }})=> active) 
    .min(({ obj: { selectOrder }})=> selectOrder) 
    .thru(({ key })=> transform(settings, (memo, val, _key) => { 
     memo[_key] = extend({}, val, { 
     selected: (_key == key) 
     }) 
    }, {}) 
) 
    .value() 

---

> transformObj(settings) 
{ tab1: { active: true, selectOrder: 1, selected: true }, 
    tab2: { active: true, selectOrder: 2, selected: false }, 
    tab3: { active: false, selectOrder: 0, selected: false } } 

上述假設ES6 imports，arrow functions的可用性和論證destructuring。否則，您可以使用babel。

這是更實用，因爲transformObj是引用透明&不改變其參數。