Question

在我的本机应用程序中，我有以下数组。

export const ID_OPTIONS = [
  { id: 'nric_fin', name: 'NRIC/FIN' },
  { id: 'passport', name: 'Passport' },
  { id: 'birth_cert', name: 'Birth Certificate' },
];

我试图按如下方式过滤此数组。

setSelectedIdType = (idType) => {
  return ID_OPTIONS.filter((type) => {
    if (type.id === idType) {
      return type.name;
    }
    return null;
  });
}

但是，这返回一个对象。我想得到这个名字。我在这里做什么错了？

Answer 1

看起来您正在寻找for循环：

setSelectedIdType = (idType) => {
  for (let type of ID_OPTIONS) {
    if (type.id === idType) {
      return type.name;
    }
  }
  return null;
}

等效项可以使用find来实现：

setSelectedIdType = (idType) => {
  let type = ID_OPTIONS.find(type => type.id === idType);
  return type && type.name;
}

（当找不到ID时，它返回undefined而不是null；如有必要，类似type === undefined ? null : type.name的东西将对其进行更改。）

Answer 2

filter将元素从数组中过滤出来...确切返回的内容无关紧要，返回值将被简单地视为“真”或“虚假”（元素函数返回保留的“真实”值，其他则丢弃）。

所有非空字符串在Javascript中都是“真实的”。

Answer 3

之后只需map个数组即可获得name。

return ID_OPTIONS.filter(...).map(({ name }) => name);

您也可以使用reduce来降低复杂度：

setSelectedIdType = idType => ID_OPTIONS.reduce((a, { id, name }) => id == idType ? (a.push(name), a) : a, []);

Answer 4

使用Array.filter代替Array.find，因为filter返回过滤后的数组而不是一项。 Array.find返回第一个匹配项，然后您可以在其上进行name：

根据Array.filter文档-返回值：

具有通过测试的元素的新数组。如果没有元素通过测试，将返回一个空数组。

关于test每次迭代执行的Array.filter函数：

函数是谓词，用于测试数组的每个元素。返回 true 保留元素，否则 false 。

请注意，返回值为布尔值。

使用Array.find，您的功能可能就是：

const ID_OPTIONS = [ { id: 'nric_fin', name: 'NRIC/FIN' }, { id: 'passport', name: 'Passport' }, { id: 'birth_cert', name: 'Birth Certificate' }, ];

let setSelectedIdType = idType => 
  (ID_OPTIONS.find(x => x.id === idType) || {}).name

console.log(setSelectedIdType('nric_fin'))
console.log(setSelectedIdType('passport'))

Answer 5

引用Mozilla Filter Function Docs

callback 函数是一个谓词，用于测试数组的每个元素。返回true保留元素，否则返回false。

Return value 一个具有通过测试的元素的新数组。如果没有任何元素通过测试，则将返回一个空数组。

我不认为过滤器的回调可以是布尔值而返回值应该是一个包含来自过滤器函数

的匹配结果的数组

Answer 6

您的域是否有必要将对象存储在数组中？

既然您已经将它们声明为常量，那么我将假设除非重新加载客户端，否则它们不会更改。

如果要将这个对象数组转换成像这样的简单对象：

const NAMES = ID_OPTIONS.reduce((obj,idOption) => {
  obj[idOption.id] = {name: idOption.name};
  return obj;
},{});

这将导致：

{
  nric_fin: {name: 'NRIC/FIN'},
  passport: {name: 'Passport'},
  birth_cert: { name: 'Birth Certificate'}
}

现在您可以按属性访问名称

let idType = 'passport';
NAMES[idType];

过滤数组时，JS过滤器无法正常工作

6 个答案: