JS фильтр не работает должным образом при фильтрации массива

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;
}

(Возвращает undefinedвместо null, когда идентификатор не найден, что-то вроде type === undefined ? null : type.name изменит это при необходимости.)

Answer 2

A filter фильтрует элементы из массива ... не имеет значения, что именно вы возвращаете, возвращаемое значение будет рассматриваться просто как "правдивый" или "ложный" (элементы, для которых функция возвращает «истинное» значение сохраняется, другие отбрасываются).

Все непустые строки являются "правдивыми" в Javascript.

Answer 3

Вместо 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 4

Просто 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 5

Нужно ли вашему домену хранить объекты в массиве?

Поскольку вы объявили их как константы, я сделаю предположение, что они не изменятся, пока клиент не будет перезагружен.

Если бы вы преобразовали этот массив объектов в простой объект, например, так:

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];

Answer 6

Цитирование из Функция фильтра Mozilla Документы

callback Функция - это предикат для проверки каждого элемента массива.Верните true, чтобы сохранить элемент, иначе false.

Return value Новый массив с элементами, которые проходят тест.Если ни один элемент не пройдет тест, будет возвращен пустой массив.

Я не думаю, что обратный вызов для фильтра может отличаться от логического, в то время как возвращаемое значение должно быть массивом, содержащим совпадающий результат из функции фильтра