React中如何根据数组匹配输出对象中的对应元素？

当然可行，利用JavaScript的对象属性访问语法就能实现。针对你的场景，具体实现方式如下：

1. 遍历数组获取所有匹配的内容 #

假设你的数组是字符串数组（实际代码中元素需要用引号包裹）：

const fruitArray = ["banana", "apple"];
// 遍历数组，提取每个水果对应的test值
const testValues = fruitArray.map(fruitName => {
  // 先检查对象中是否存在该属性，避免报错
  if (response.fruits[fruitName]) {
    return response.fruits[fruitName][0].test;
  }
  // 处理属性不存在的情况，比如返回null或默认值
  return null;
});
// 此时testValues的结果是 [1, 2]

2. 根据条件匹配特定元素 #

如果需要从数组中筛选出符合条件的元素，再提取对应内容，比如只获取"apple"的test值：

const target = "apple";
if (fruitArray.includes(target) && response.fruits[target]) {
  const targetTestValue = response.fruits[target][0].test;
  // 这里可以使用targetTestValue，值为2
}

核心原理 #

JavaScript中访问对象属性有两种方式：

• 点语法：response.fruits.banana
• 方括号语法：response.fruits["banana"]

方括号语法支持使用变量作为属性名，所以你可以直接用数组中的元素（字符串类型）作为方括号内的参数，实现动态匹配对象属性的效果。

内容的提问来源于stack exchange，提问作者Julietta