Javascript 使用JS reduce、map或filter函数

有没有更有效的方法来实现这一点？我想要的输出是从以下对象创建一个新数组。如果支持

===true

，则将

id

添加到数组中。因此，在下面的对象中，输出应该是

['CREDIT'，'DEBIT']

 const object = {
   "cardOptions": [
   {
      "id": "CREDIT",
      "supported": true
   },
   {
      "id": "DEBIT",
      "supported": true
   }
  ]
 }

这是我现在拥有的

 const cardTypes = object.reduce((filtered, cardType) => {
      if (cardType.id && cardType.supportedAtLocation) {
          filtered.push(cardType.id)
      }
      return filtered
 }, [])

---

您也可以像这样使用filter+map：

object.cardpoptions
.filter（option=>option.supported）
.map（cardOption=>cardOption.id）

至少在chrome上，通过使用并排分析，您的

reduce

代码似乎效率更高（但实际上，除非您有一个非常大的数据集，否则这可能无关紧要）

下面是一个我经常使用的快速高阶评测函数：

//在chrome上使用用户计时API多次运行输入函数并分析性能的函数
常量配置文件=（函数，时间）=>（…参数）=>{
const functionName=func.name；
常量trackName=`${functionName}`；
const startTag=`${trackName}\u start`；
window.performance.mark（startTag）；
让结果；
for（设i=0；i<次；i=i+1）
结果=func（…args）；
const endTag=`${trackName}\u end`；
window.performance.mark（endTag）；
window.performance.measure（trackName、startTag、endTag）；
返回结果；
};

const对象={
卡片选项：[
{
id:'信用'，
支持:对,，
},
{
id:'借方'，
支持:对,，
},
],
};
常量过滤器映射=（）=>{
object.cardOptions
.filter（option=>option.supported）
.map（cardpoption=>cardpoption.id）；
};
常量reduce=（）=>{
object.cardOptions.reduce（（已筛选，cardType）=>{
if（cardType.id&&cardType.supported）{
过滤.推送（cardType.id）；
}
返回过滤；
}, []);
};
简介（filterMap，99999）（）；
个人资料（减少，99999）（）；

度量值的输出如下所示：

window.performance.getEntriesByType（'measure'））
[
{
名称：“profileFilterMap”，
entryType:“度量值”，
起始时间：310637.6400000008，
持续时间：30.029999440004，//地图+过滤器的持续时间更高
},
{
名称：“profileReduce”，
entryType:“度量值”，
起始时间：310667.7550000022，
持续时间：24.7549991273507，//reduce似乎更有效
},
]

您也可以像这样使用filter+map：

object.cardpoptions
.filter（option=>option.supported）
.map（cardOption=>cardOption.id）

至少在chrome上，通过使用并排分析，您的

reduce

代码似乎效率更高（但实际上，除非您有一个非常大的数据集，否则这可能无关紧要）

下面是一个我经常使用的快速高阶评测函数：

//在chrome上使用用户计时API多次运行输入函数并分析性能的函数
常量配置文件=（函数，时间）=>（…参数）=>{
const functionName=func.name；
常量trackName=`${functionName}`；
const startTag=`${trackName}\u start`；
window.performance.mark（startTag）；
让结果；
for（设i=0；i<次；i=i+1）
结果=func（…args）；
const endTag=`${trackName}\u end`；
window.performance.mark（endTag）；
window.performance.measure（trackName、startTag、endTag）；
返回结果；
};

const对象={
卡片选项：[
{
id:'信用'，
支持:对,，
},
{
id:'借方'，
支持:对,，
},
],
};
常量过滤器映射=（）=>{
object.cardOptions
.filter（option=>option.supported）
.map（cardpoption=>cardpoption.id）；
};
常量reduce=（）=>{
object.cardOptions.reduce（（已筛选，cardType）=>{
if（cardType.id&&cardType.supported）{
过滤.推送（cardType.id）；
}
返回过滤；
}, []);
};
简介（filterMap，99999）（）；
个人资料（减少，99999）（）；

度量值的输出如下所示：

window.performance.getEntriesByType（'measure'））
[
{
名称：“profileFilterMap”，
entryType:“度量值”，
起始时间：310637.6400000008，
持续时间：30.029999440004，//地图+过滤器的持续时间更高
},
{
名称：“profileReduce”，
entryType:“度量值”，
起始时间：310667.7550000022，
持续时间：24.7549991273507，//reduce似乎更有效
},
]

这个解决方案的低效之处是什么？我想知道reduce是否是最好的方法。或者如果使用map或filter是可能的，而且更好。Reduce是合适的选择，因为您正在过滤数组并从中创建新的数据结构。如果您使用@g2jose的方法，它将起作用，但是您将在阵列上循环两次。Reduce允许您使用一个pass。您需要

object.cardpoptions。Reduce

而不是

object。Reduce

但它可以工作。我个人会选择

过滤器

+

映射

，但从技术上讲，它不是最理想的。根据您的数据，这可能无关紧要，但如果您使用Lodash等允许延迟计算的工具，则可以使用

更改
object.cardpoptions.filter（）.map（）
（object.cardpoptions.filter（）.map（）

，从而避免重复。但是，最终，什么更好，以及它是否尝试取决于环境。这个解决方案的低效之处是什么？我想知道reduce是否是最好的方法。或者如果使用map或filter是可能的，而且更好。Reduce是合适的选择，因为您正在过滤数组并从中创建新的数据结构。如果您使用@g2jose的方法，它将起作用，但是您将在阵列上循环两次。Reduce允许您使用一个pass。您需要

object.cardpoptions。Reduce

而不是

object。Reduce

但它可以工作。我个人会选择

过滤器

+

映射

，但从技术上讲，它不是最理想的。