Использование оператора If в Array.Filter

Я использую Array.Filter как:

  this.newData = this.allData.filter(imp =>   
       imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase())) &&
       imp.type === ((filter.type) ? filter.type: imp.type) &&
       imp.createdBy.toLowerCase().includes(((filter.createdBy) ? filter.createdBy.toLowerCase() : imp.createdBy.toLowerCase()))
  )

Но мое imp.name иногда может быть нулевым, поэтому код выдает ошибку.

Как я могу добавить оператор if внутри фильтра, чтобы, если какие-либо данные были нулевыми, не добавляйте их в AND.

Что-то типа

if (imp.name!=null){
  imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase()))
}

Надеюсь, я ясно.

можете ли вы вставить данные, т.е. значение фильтра и значения this.allData?

JackOfAshes - Mohit Gawande 22.05.2019 16:12

Используйте обычную функцию и возвращайте true или false по мере необходимости...

Heretic Monkey 22.05.2019 16:16

@HereticMonkey Я фильтрую это на основе всех условий, которые состоят из 3 условий, как в моем примере. Если я использую индивидуальный if else и возвращаю true false, как будут объединяться результаты. Так что в основном это критерии поиска. Если выбранный фильтр соответствует массиву, верните отфильтрованный список, иначе верните все.

Brenda 22.05.2019 16:22

Поэтому определите логическое значение вверху, которое показывает, удовлетворяет ли элемент фильтру. Установите значение true или false в зависимости от различных проверок, которые вы делаете. Я предполагаю, что если какое-либо из условий не выполняется, его не следует включать в список? Просто выполните var passedFilter = true; passedFilter = passedFilter && (condition1); passedFilter = passedFilter && (condition2);... и т. д. По базовой логической логике, если какие-либо из них ложны, они не будут включены.

Heretic Monkey 22.05.2019 16:26

См. проверка оператора if на наличие нескольких логических условий, чтобы узнать больше о том, как это сделать.

Heretic Monkey 22.05.2019 16:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
5 007
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Для достижения ожидаемого результата используйте приведенную ниже опцию использования imp && imp.name в первой строке фильтра.

imp.name && imp.name.toLowerCase().includes(((filter.name)

Кодепен — https://codepen.io/nagasai/pen/EzowXb?editors=1010

рабочий код:

var allData = [{name: null , type: "A", createdBy: 'test1'},
              {name: 'aaaa' , type: "AB", createdBy: 'test12'},
              {name: 'bbbb' , type: "AA", createdBy: 'test13'},]

var filter = {name: 'bbbb' , correctionType: "AA", createdBy: 'test13'}

 var newData = allData.filter(imp =>   
       imp.name && imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase())) &&
       imp.type === ((filter.type) ? filter.correctionType : imp.type) &&
       imp.createdBy.toLowerCase().includes(((filter.createdBy) ? filter.createdBy.toLowerCase() : imp.createdBy.toLowerCase()))
  )
 
 console.info(newData)
Ответ принят как подходящий

Если вы хотите проверить, существует ли фильтр, и использовать его, только если он существует, я бы сделал что-то вроде этого:

items.filter(imp => {
      let keep = true;
      if (imp.name) {
        keep = keep && imp.toLowerCase().includes(filter.name ? filter.name.toLowerCase() : imp.name.toLowerCase());
      }
      if (imp.type) {
        keep = keep && imp.type === (filter.type ? filter.correctionType : imp.type);
      }
      if (imp.createdBy) {
        keep = keep && imp.createdBy.toLowerCase().includes(filter.createdBy? filter.createdBy.toLowerCase(): imp.createdBy.toLowerCase());
      }
      return keep;
    });

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

Фильтр здесь не показан, поэтому мы можем только догадываться.

this.newData = this.allData.filter(imp => {
    // Check if the properties we'll call methods on, are true-ty values.
    if ( !imp.name || !imp.createdBy ) return false;
    // imp.name.toLowerCase().includes( imp.name.toLowerCase()) is always true.
    // So the only way the name is invalid,
    // is if filter.name exists AND filter.name is not included inside imp.name.
    // So !filter.name gives us true if filter.name does not exist
    // and also makes sure filter.name exists before we try to use toLowerCase();
    const valid_name = !filter.name || imp.name.toLowerCase().includes( filter.name.toLowerCase());
    // Same here imp.type will always equal imp.type, so the ternary is redundant again.
    // The type will only be false if imp.type does not equal filter.correctionType
    const valid_type = !filter.type || imp.type === filter.correctionType;
    // Same again
    const valid_creation = !filter.createdBy || imp.createdBy.toLowerCase().includes( filter.createdBy.toLowerCase());
    // All 3 have to be true.
    return valid_name && valid_type && valid_creation;
});

Другие вопросы по теме