映射输入数组并获取过滤后的对象数组作为结果

Posted 2023-02-22

【中文标题】映射输入数组并获取过滤后的对象数组作为结果

【英文标题】：Map input array and get filtered array of object as result

【发布时间】：2021-01-26 09:21:45

【问题描述】：

我有以下来自后端的数据。

priorities: [ 'get license', 'enroll college' ];

现在，我有一个在前端硬编码的对象列表。

studentPriorities = [
   
   prioritiesTitle: "get license",
   prioritiesDescription: "go to DMV and get your license"
  ,
  
   prioritiesTitle: "enroll college",
   prioritiesDescription: "gather fees and enroll for college"
  ,
  
   prioritiesTitle: "give exams",
   prioritiesDescription: "study hard for the exams"
  
]

在任何给定时间，我都会获得 2 个优先级作为后端响应。我需要搜索我的硬编码对象数组并获取最终数据，如下所示。

mappedStudentPriorities = [
   
   prioritiesTitle: "get license",
   prioritiesDescription: "go to DMV and get your license"
  ,
  
   prioritiesTitle: "enroll college",
   prioritiesDescription: "gather fees and enroll for college"
  
]

有人可以建议我如何实现这一目标吗？

【参考方案1】：

您可以在从后端获得的数组上使用Array.prototype.flatMap，然后在数据条目上使用Array.prototype.filter。 函数可能如下所示：

/** @param string[] priorities the titles you want to match */
function filterByPriorities (...priorities) 
  return priorities.flatMap(priority => studentPriorities.filter(( prioritiesTitle ) => prioritiesTitle === priority))

基本逻辑是：

对于input 中的每个字符串 过滤dataset 的所有元素，其中： prioritiesTitle 匹配 input 将上一个操作的结果展平 return结果

现在这里没有太多优势，但如果数据变得更复杂，使用for...of-loop 通常是个好主意。下面的函数会给出相同的结果，但是对于复杂的操作，这往往更容易理解和维护。

对于dataset 中的每个entry 如果input 包含条目标题 将entry 推送到out-array 返回out-array

/** @param string[] priorities the titles you want to match */
function filter2 (...priorities) 
  const out = []
  for (const  prioritiesTitle, ...rest  of studentPriorities) 
    if (priorities.includes(prioritiesTitle)) out.push( prioritiesTitle, ...rest )
  
  return out

两者的预期输出是：

[
  
    prioritiesTitle: 'get license',
    prioritiesDescription: 'go to DMV and get your license'
  ,
  
    prioritiesTitle: 'enroll college',
    prioritiesDescription: 'gather fees and enroll for college'
  
]

关于Array.prototype.includes

大量开发人员建议使用Array.prototype.indexOf 而不是Array.prototype.includes，因为.includes 并非在所有浏览器中都可用。 但是有几点需要注意：

每个常见的浏览器*（包括它们的移动浏览器）都拥有 Array.prototype.includes 近 5 年 取决于引擎，对于大型数据集，.indexOf 与.includes 相比可能意味着巨大的速度损失（如果项目位于结果的末尾，则速度会稍微慢一点，而速度会降低 1000 倍@ 987654346@ in v8 (Chrome, nodejs etc) 当项目接近数组的开头时。src)

除非

您特别需要支持 IE，否则没有太多理由不使用 .includes，因为绝大多数用户都会使用支持它的浏览器。

*普通浏览器 -> 带有常用 JS 引擎之一的浏览器

v8 -> 任何基于 Chromium 的浏览器（Opera、Edge、Chrome） 蜘蛛猴 -> FireFox javascriptCore -> Safari 和盟友

【参考方案2】：

我更喜欢使用 indexOf，因为旧浏览器和一些新浏览器都不支持包含

const 结果 = studentPriorities.filter(( priorityTitle ) => (priorities.indexOf(prioritiesTitle) !== -1));

console.log(结果);

【参考方案3】：

这可以简单地使用Array.filter & Array.includes 来完成。

使用Array.includes可以检查元素是否包含在数组中，使用Array.filter可以得到满足条件的过滤结果。

const priorities = [ 'get license', 'enroll college' ];

const studentPriorities = [
   
   prioritiesTitle: "get license",
   prioritiesDescription: "go to DMV and get your license"
  ,
  
   prioritiesTitle: "enroll college",
   prioritiesDescription: "gather fees and enroll for college"
  ,
  
   prioritiesTitle: "give exams",
   prioritiesDescription: "study hard for the exams"
  
];

const result = studentPriorities.filter(( prioritiesTitle ) => priorities.includes(prioritiesTitle));
console.log(result);