javascript - Lodash:从多个对象构造单个对象 - 合并/覆盖属性

标签 javascript lodash

Note: I filed this question under lodash as I'm pretty sure it can help me solve that problem nicely, but haven't put my finger on it just now

我有一个描述不同用户 Angular 色及其权限的对象;

我将“像这样”定义 10-15 个 Angular 色(这并不反射(reflect)应用程序代码,而是反射(reflect)问题本身):

    var role1 = {
    views: {
        v1: {access: true},
        v2: {access: false},
        v#: {access: false}
    }
}

var role2 = {
    views: {
        v1: {access: false},
        v2: {access: true},
        v3: {access: true},
    }
}

连接的用户将具有多个 Angular 色;在该示例中,它可能是 ['role1', 'role2'] ,由此我需要构建一个 permissions对象将是所有用户 Angular 色中定义的所有 Prop 的组合。

它基本上是基于白名单的,其中所有“true”属性都应该覆盖任何定义为 false 的内容。因此,预期结果应该是:

permissions = {
    views: {
        v1: {access: true},
        v2: {access: true},
        v2: {access: true}
    }
}
<小时/>

我不太确定如何在不依赖疯狂嵌套循环的情况下解决这个问题

这是 JSBin 中的起点:http://jsbin.com/usaQejOJ/1/edit?js,console

感谢您的帮助!

最佳答案

Lodash 有一些方法可以帮助优雅地解决这个问题。

首先,merge方法。它需要多个源对象,并递归地将它们的属性合并到目标对象中。如果两个对象具有相同的属性名称,则后一个值将覆盖前一个。

这几乎就是我们想要的;它将把您的 Angular 色对象合并成一个对象。我们不想要的是这种覆盖行为;我们希望 true 值始终覆盖 false 值。幸运的是,您可以传入自定义合并函数,当两个对象具有相同的键时,lodash 的 merge 将使用该函数来计算合并值。

我们将编写一个自定义函数,以对您的项目进行逻辑OR运算(而不是允许后面的false值覆盖true值。) ,因此如果任一值为 true,则生成的合并值将为 true

因为我们的对象是嵌套的,所以我们需要确保我们的自定义合并函数在比较 bool 值时仅执行此OR操作。当比较对象时,我们想要对其属性进行正常合并(再次使用我们的自定义函数进行合并)。它看起来像这样:

function do_merge(roles) {

  // Custom merge function ORs together non-object values, recursively
  // calls itself on Objects.
  var merger = function (a, b) {
    if (_.isObject(a)) {
      return _.merge({}, a, b, merger);
    } else {
      return a || b;
    }
  };

  // Allow roles to be passed to _.merge as an array of arbitrary length
  var args = _.flatten([{}, roles, merger]);
  return _.merge.apply(_, args);
}

do_merge([role1, role2, role3]);

Lodash 以另一种方式提供帮助:您可能从文档中注意到 _.merge 不接受要合并在一起的对象数组;你必须将它们作为参数传递。但在我们的例子中,数组会非常方便。

为了解决这个问题,我们将使用 JavaScript 的 apply方法,它允许您通过将参数作为数组传递来调用方法,以及 Lodash 方便的 flatten 方法,它接受可能包含嵌套数组的数组 - 例如 [1, [2, 3], [4, 5]] — 并将其展平为 [1, 2, 3, 4, 5]

因此,我们将在展平数组中收集所需的所有参数,然后应用它们来合并!

如果您的对象嵌套得非常深,则有可能像这样递归地调用 merger 来溢出堆栈,但对于您的对象来说,这应该可以正常工作。

关于javascript - Lodash:从多个对象构造单个对象 - 合并/覆盖属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21120276/

相关文章:

javascript - 从嵌套的 json 值对象获取数组

javascript - NodeJS : recursive function with async request

javascript - 使用下划线/lodash 电子邮件列表/集合随机播放和配对

javascript - "pickBy"对象的值数组中的值

Javascript:从另一个对象在javascript中创建一个深度嵌套的对象

JavaScript 无法在 Firefox/IE 中运行,但可以在 Chrome 中运行

javascript - 将字符串添加到数字以及将数字添加到字符串

javascript - React 将 prop 传递给其他组件以从状态数组中删除

javascript - 通过 JavaScript 提交 ajax 请求并上传文件

javascript - EmberJS 中 find() 和 filter(function(){return true;}) 的区别