javascript - 编辑 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”最低的事件元素的“selected”属性设置为“true”。在此示例中，我应该为“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 的原因是为了更简单地绑定(bind)到我的模板(类似于“{{settins.tab1.selected}}”——比在我的 html 中查找它更简单)。什么应该是更好的方法？

Here is the complete example in JSBIN

Answer 1

1. 对于 Object 的 map 和 reduce，你可以使用 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

1. 它不是 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
  }
];

因为 vanilla javascript 支持 array 上的 reduce/map。但是，像 lodash 这样的库一样多, underscore只需使 reduce/map 在对象上可用。你可以只需选择最适合您需要的那个(因为有很多这样的库使您能够通过对象进行映射/减少)。