javascript - 如何从数组中排除某些键

Question

我正在研究数据表组件的渲染方法，我必须在其中过滤一些 header 。

我有这个:

  <TableRow>
    {headers.map(header =>
      checkboxes.map(checkbox =>
          // HERE I NEED TO FILTER IT
        checkbox.value === header.key && checkbox.checked && (
          <TableHeader {...getHeaderProps({ header })}>               
            {header.header}
          </TableHeader>
        ),
      ),
    )}
  </TableRow>

您在上面看到的 checkbox.checked 返回 true 或 false，我需要 2 个键来忽略这些条件。条件是否满足并不重要。

在这里，我检查 checkbox 和 header 的值是否相同 checkbox.value === header.key 但我需要排除 2 个 header.key，即 header.key === device 和 header.key === TicketNumber。

所以我需要做这样的事情:

 <TableRow>
    {headers.map(header =>
      checkboxes.map(checkbox =>
          // HERE I NEED TO FILTER IT
        checkbox.value === header.key && checkbox.checked && (ignore header.key === 'device' && header.key === 'ticketNumber' from the conditionals above) (
          <TableHeader {...getHeaderProps({ header })}>               
            {header.header}
          </TableHeader>
        ),
      ),
    )}
  </TableRow>

我的意思是，我在上面的代码中提到的这两个 header 永远不应该从 UI 中隐藏。当满足此条件 checkbox.value === header.key && checkbox.checked 时，它将隐藏所有 checkbox.checked === true 的 header ，但是我需要一个适当的条件/函数来忽略 header 键 header.key === device 和 header.key === TicketNumber。这两个 header 应该始终存在于 UI 中。

我正在使用lodash，我不知道是否可以在那里使用它或者是否有其他选择？

Answer 1

如果我正确理解您的要求，我认为这应该可行:

<TableRow>
  {headers.map(header =>
     (['device', 'ticketNumber'].includes(header.key) || checkboxes.find(checkbox => header.key === checkbox.value).checked) && 
       <TableHeader {...getHeaderProps({ header })}>               
         {header.header}
       </TableHeader>
  )}
</TableRow>