过滤一个 JavaScript 对象数组另一个 JavaScript 对象数组答案

【问题标题】：Filter a JavaScript array of object another JavaScript array of objects过滤一个 JavaScript 对象数组另一个 JavaScript 对象数组
【发布时间】：2020-03-10 20:41:41
【问题描述】：

我有以下组成的 JavaScript 对象数组：

const permissions = [
  {
    moduleEnabled: true,
    moduleId: 1,
    moduleName: 'Directory'
  },
  {
    moduleEnabled: true,
    moduleId: 2,
    moduleName: 'Time off'
  },
  {
    moduleEnabled: false,
    moduleId: 3,
    moduleName: 'Tasks'
  },
  {
    moduleEnabled: false,
    moduleId: 4,
    moduleName: 'Documents'
  }
]

我还有以下基于可显示小部件集合的对象数组：

const widgets = [
  {
    id: 1,
    moduleId: 2,
    title: 'Your time off'
  },
  {
    id: 2,
    moduleId: 1,
    title: 'Your colleagues'
  },
  {
    id: 3,
    moduleId: 3,
    title: 'Your tasks'
  },
  {
    id: 4,
    moduleId: 5,
    title: 'Your sales pipeline'
  },
  {
    id: 5,
    moduleId: 4,
    title: 'Your documents'
  },
  {
    id: 6,
    moduleId: 6,
    title: 'Your legal cases'
  }
]

我想做的是根据permissions 对象数组中的值将对象数组widgets 减少为新的对象数组filteredWidgets，这些是moduleId 是否是找到了，而且moduleEnabled 是true。

我已经尝试了下面的代码，但它不起作用：

const filteredWidgets = []
for (const permission in permissions) {
  const found = widgets.filter((item) => item.moduleId === permission.moduleId && permission.moduleEnabled)
  if (found) {
    filteredWidgets.push(found)
  }
}
console.log('filteredWidgets\n', filteredWidgets)

任何帮助将不胜感激。提前致谢。

编辑：包括预期输出：

const filteredWidgets = [
  {
    id: 1,
    moduleId: 2,
    title: 'Your time off'
  },
  {
    id: 2,
    moduleId: 1,
    title: 'Your colleagues'
  }
]

【问题讨论】：

你也能写出你期望的输出吗

标签： javascript arrays filter

【解决方案1】：

在您的过滤器功能中，检查任何符合给定条件的权限：

const filteredWidgets = widgets.filter(widget =>
    permissions.find(permission =>
        (permission.moduleId === widget.moduleId) && permission.moduleEnabled));

【讨论】：

【解决方案2】：

我认为.reduce() 和.find() 组合可以为您工作：

const permissions = [{moduleEnabled: true, moduleId: 1, moduleName: 'Directory' }, { moduleEnabled: true, moduleId: 2,  moduleName: 'Time off' }, { moduleEnabled: false,  moduleId: 3, moduleName: 'Tasks' }, { moduleEnabled: false,  moduleId: 4, moduleName: 'Documents' }];
const widgets = [{ id: 1, moduleId: 2, title: 'Your time off' }, { id: 2, moduleId: 1, title: 'Your colleagues' }, { id: 3,  moduleId: 3, title: 'Your tasks' }, { id: 4, moduleId: 5, title: 'Your sales pipeline' }, { id: 5, moduleId: 4, title: 'Your documents' },{ id: 6, moduleId: 6, title: 'Your legal cases'}]

const result = widgets.reduce((a, c) => {
  const found = permissions.find(e => e.moduleId === c.moduleId)
  return found && found.moduleEnabled ? a.concat(c) : a;
}, []);

console.log(result);

我希望这会有所帮助！

【讨论】：

【解决方案3】：

您可以获取具有允许的 id 的对象并按moduleId 过滤。

const
    permissions = [{ moduleEnabled: true, moduleId: 1, moduleName: 'Directory' }, { moduleEnabled: true, moduleId: 2, moduleName: 'Time off' }, { moduleEnabled: false, moduleId: 3, moduleName: 'Tasks' }, { moduleEnabled: false, moduleId: 4, moduleName: 'Documents' }],
    widgets = [{ id: 1, moduleId: 2, title: 'Your time off' }, { id: 2, moduleId: 1, title: 'Your colleagues' }, { id: 3, moduleId: 3, title: 'Your tasks' }, { id: 4, moduleId: 5, title: 'Your sales pipeline' }, { id: 5, moduleId: 4, title: 'Your documents' }, { id: 6, moduleId: 6, title: 'Your legal cases' }],
    allowed = permissions.reduce((o, { moduleEnabled, moduleId }) =>
        ({ ...o, [moduleId]: moduleEnabled }), {}),
    filteredWidgets = widgets.filter(({ moduleId }) => allowed[moduleId]);

console.log(filteredWidgets);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案4】：

我有一个使用 reduce 的解决方案

但首先，你必须创建一个 Map 并使用它来创建一个带有 Object.fromEntries() 的 Object，然后最后使用 reduce。

const permissions = [
  {
    moduleEnabled: true,
    moduleId: 1,
    moduleName: 'Directory'
  },
  {
    moduleEnabled: true,
    moduleId: 2,
    moduleName: 'Time off'
  },
  {
    moduleEnabled: false,
    moduleId: 3,
    moduleName: 'Tasks'
  },
  {
    moduleEnabled: false,
    moduleId: 4,
    moduleName: 'Documents'
  }
]

const widgets = [
  {
    id: 1,
    moduleId: 2,
    title: 'Your time off'
  },
  {
    id: 2,
    moduleId: 1,
    title: 'Your colleagues'
  },
  {
    id: 3,
    moduleId: 3,
    title: 'Your tasks'
  },
  {
    id: 4,
    moduleId: 5,
    title: 'Your sales pipeline'
  },
  {
    id: 5,
    moduleId: 4,
    title: 'Your documents'
  },
  {
    id: 6,
    moduleId: 6,
    title: 'Your legal cases'
  }
]

const permissonsMap = permissions.map((child,index) => {
  return [child.moduleId, {...child}]
})

const permissionsObj = Object.fromEntries(permissonsMap);

//console.log(permissionsObj);

const filteredWidgets = widgets.reduce((aggArr,currItem) => {
  if (permissionsObj[currItem.moduleId] && permissionsObj[currItem.moduleId].moduleEnabled){
    aggArr.push(currItem);
  }
  return aggArr;
},[])

console.log(filteredWidgets);

重要的几行是：

const permissonsMap = permissions.map((child,index) => {
  return [child.moduleId, {...child}]
})

const permissionsObj = Object.fromEntries(permissonsMap);

//console.log(permissionsObj);

const filteredWidgets = widgets.reduce((aggArr,currItem) => {
  if (permissionsObj[currItem.moduleId] && permissionsObj[currItem.moduleId].moduleEnabled){
    aggArr.push(currItem);
  }
  return aggArr;
},[])

console.log(filteredWidgets);

【讨论】：