Как я могу кодировать эту функцию JavaScript, используя парадигму функционального программирования?

Question

Итак, в основном я написал эту функцию JS для фильтрации содержимого некоторых сообщений с веб-форума.

    const postFilter = (vector) => {
        vector.forEach(e => {
            e.innerHTML.toLowerCase().match(/word1|word2|word3/g) ? e.style.display = 'none' : false;
        });
    }

    postFilter(document.getElementById('threadbits_forum_2').querySelectorAll('tr'));

Вот мои вопросы:

Удобен ли метод foreach?Что насчет регулярного выражения?Если бы я объявил регулярное выражение как константу, оно все равно было бы чистой функцией?

Answer 1

Вы объединяете несколько разных вещей:

1. Вам нужен список элементов tr
2. Отфильтровано по регулярному выражению их содержимого
3. Скрыто

Третий является проблематичным, поскольку он по своей сути не функционален (технически первый тоже может, но мы притворимся, что HTML не может измениться).В функциональной парадигме вы хотите отделить логику от кода, который выполняет побочные эффекты:

// Pull out the filtering logic into a pure (for Javascript) function
const filterElement = regex => elem => elem.innerHTML.match(regex);

// Pull the side-effect out into an impure function
const hide = elem => elem.style.display = 'none';

[ ...document.getElementById('threadbits_forum_2').querySelectorAll('tr') ]
  .filter(filterElement(/word1|word2|word3/gi)) // note the i flag
  .forEach(hide);

Answer 2

Если я объявлю регулярное выражение как константу, оно все равно будет чистой функцией?

Функция, которая использует константу, все еще является чистой функцией. Это «просто еще один функциональный параметр». Подумайте о постоянном эквиваленте композиции скрытых функций.

псевдокод:

func a(c) {
    return func b(p) {
        return c + p
    }
}

const c1 = 5
a(c1)(6) = 11
a(c1)(7) = 12
...

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

Кроме того, для вашего случая используйте карту вместо foreach.