JS中根据动态对象和值过滤数组答案

【问题标题】：Filter array based on dynamic objects and values in JSJS中根据动态对象和值过滤数组
【发布时间】：2020-10-15 12:33:41
【问题描述】：

我有一个包含不同对象列表的数组，我希望能够重复使用相同的函数来过滤同一数组中的不同对象和值。

我的数组

cocktailList = [
  Object {
    "abv": "24",
    "alcoholic": "true",
    "strength": "medium",
    "type": Object {
      "key": 3,
      "label": "Medium",
      "value": "medium",
    ...,
    ...,
    },
  },
  Object {
    ...
  },
]

我正在调用一个函数来过滤传递 2 个参数的数组：

我要过滤的字段
应该过滤掉的值

这是我的函数和调用者

const drinkTypeHandler = (field, value) => {       
    const selectedType = cocktailList.filter((cocktail) => cocktail.field === value);
    console.log(selectedType); 
}

onPress={() => drinkTypeHandler(item.field, item.value)}

该函数可以很好地获取“值”参数，但它没有使用我传递的“字段”参数。我尝试将其作为动态参数传递如下，但仍然没有成功

cocktailList.filter((cocktail) => `cocktail.${field} === ${value}`)

如果我对字段值进行硬编码，它会起作用

i.e.
cocktailList.filter((cocktail) => cocktail.type.value === value)

【问题讨论】：

标签： javascript arrays reactjs object array-filter

【解决方案1】：

要使用动态字段名称，您必须使用方括号。所以你会使用：

cocktailList.filter((cocktail) => cocktail[field] === value)

您将遇到的问题是 type 下的嵌套键/值对，因为您不能使用类似 type.value 的符号。

【讨论】：

感谢@veddermatic - 有没有办法访问嵌套的键/值对？
不是一个简单的单行。您必须查看是否使用 "type" 作为 field 参数调用了该函数，然后在此处返回 value 属性，或者为嵌套查找获取第二个参数：cocktail[field][subfield]
太好了，按照您的解释，我设法轻松找到了解决方案。我将参数拆分为 [field] [subfield] 并添加检查。根据标志的值，我可以使用鸡尾酒 [字段] 或鸡尾酒 [字段] [子字段]。非常感谢
太棒了！很高兴你明白了。

【解决方案2】：

您可以使用cocktail[field]：

const drinkTypeHandler = (field, value) => {       
    const selectedType = cocktailList.filter((cocktail) => cocktail[field] === value);
    console.log(selectedType); 
}

【讨论】：

【解决方案3】：

为了使用变量访问对象属性，您需要使用点表示法

const drinkTypeHandler = (field, value) => {       
    const selectedType = cocktailList.filter((cocktail) => cocktail[field] === value);
    console.log(selectedType); 
}

你可以阅读更多关于bracket and dot notation here

【讨论】：