Освоение фильтрации массивов JavaScript: изучение методов и обработка нулевого исключения

В JavaScript метод Array.filter() — это мощный инструмент для выборочного извлечения элементов из массива на основе заданного условия. Однако при использовании Array.filter(Number)наблюдается интересное поведение: нулевые значения исключаются из отфильтрованного результата. В этой статье мы углубимся в причины такого поведения и рассмотрим различные методы фильтрации массивов, включая альтернативные подходы, сохраняющие нулевые значения.

Понимание Array.filter(Number)и нулевого исключения:
Когда Array.filter()используется с конструктором Numberв качестве условия фильтрации, он принуждает каждый элемент в массиве к числу. Конструктор Numberведет себя по-разному в зависимости от входных данных:

  1. Нечисловые значения. Нечисловые элементы, такие как строки или объекты, преобразуются в NaN(не число) и отфильтровываются, начиная с NaNсчитается «ложным» в JavaScript.

  2. Числовые значения: числовые элементы, включая ноль, сохраняются в отфильтрованном результате, поскольку в JavaScript они считаются «правдивыми».

Методы фильтрации массивов с примерами кода:

  1. Использование пользовательской функции фильтрации:

    const numbers = [0, 1, 2, '3', 'four', 5];
    const filteredNumbers = numbers.filter(item => typeof item === 'number');
    console.log(filteredNumbers); // Output: [0, 1, 2, 5]
  2. Использование стрелочных функций и унарного оператора плюс:

    const numbers = [0, 1, 2, '3', 'four', 5];
    const filteredNumbers = numbers.filter(item => +item === item);
    console.log(filteredNumbers); // Output: [0, 1, 2, '3', 5]
  3. Использование комбинации Array.prototype.map() и Array.prototype.filter():

    const numbers = [0, 1, 2, '3', 'four', 5];
    const filteredNumbers = numbers.map(Number).filter(item => !isNaN(item));
    console.log(filteredNumbers); // Output: [0, 1, 2, 5]
  4. Использование метода Array.from():

    const numbers = [0, 1, 2, '3', 'four', 5];
    const filteredNumbers = Array.from(numbers, Number).filter(item => !isNaN(item));
    console.log(filteredNumbers); // Output: [0, 1, 2, 5]

Сохранение нулевых значений в отфильтрованных массивах.
Чтобы включить нулевые значения в отфильтрованный результат, вы можете использовать специальную функцию фильтрации, которая явно проверяет наличие нуля:

const numbers = [0, 1, 2, '3', 'four', 5];
const filteredNumbers = numbers.filter(item => typeof item === 'number' || item === 0);
console.log(filteredNumbers); // Output: [0, 1, 2, 5]