javascript - 如何从数组中的名称调用对象

Question

我有这个数组categories = [Sports, Kids]

哪里Sports和Kids不是字符串，它们是 export const Sports = {...} 之后导入的对象从另一个文件导出。

我也有categoriesLoop = ['Sports', 'Kids']循环 <select> 中的类别为此:categoriesLoop.map(category => <option>{category}</option> react 中。

现在的问题是如何访问Sports和Kids 对象来自其数组中的字符串名称 - categories - ？

就像，当我在选择 onChange 中执行此操作时:

const category = e.currentTarget.value;
console.log(categories[category]);

我得到未定义，因为 categories 中不存在字符串“Sports”它有一个对象而不是字符串。

如何获得 Sports categories 中的对象当我有字符串 'Sports' 时？

我错过了什么吗？

Answer 1

使用对象而不是数组，然后只使用括号表示法:

const categories = { Sports, Kids };
// ...
const category = e.currentTarget.value;
console.log(categories[category]);

大小写很重要 - 在这里，您必须准确输入 Sports 或 Kids。由于这听起来像是来自用户输入，因此您可以考虑使用小写键，然后 trim 输入值并将其小写:

const categories = { sports: Sports, kids: Kids };
// ...
const category = e.currentTarget.value.trim().toLowerCase();
console.log(categories[category]);