Пишите более чистый и короткий код

Я недавно написал это.

Многие младшие разработчики и новички в JavaScript часто спрашивают: «Зачем нам нужно разбивать вещи на множество методов, таких как map, filter, find иreduce? Почему бы нам просто не использовать цикл for? Он может обрабатывать все виды логики, которые предоставляют эти методы массива ».

Ответ прост: с помощью этих методов мы можем писать более чистый, лучший и легкий для чтения код.

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

Бесточечный стиль

Бесточечный стиль - это метод, который улучшает читаемость за счет устранения ненужных аргументов.

Давайте посмотрим на этот код:

const scores = [3,1,5,7,9]
const goodScores = scores.filter(function(score){ 
  return score >= 7
})

Ага, легко понять; эта функция помогает нам отфильтровывать оценки ≥ 7. Мы можем сделать это лучше:

const scores = [3,1,5,7,9]
const isGoodScore = score => score >= 7
const goodScores = scores.filter(score => isGoodScore(score))

Ага, лучше назвать функцию isGoodScore. Но мы можем сделать это еще лучше, используя безточечный стиль.

const scores = [3,1,5,7,9]
const isGoodScore = score => score >= 7
const goodScores = scores.filter(isGoodScore)

Видите, мы можем обрезать аргументы и сделать это так. Код

const goodScores = scores.filter(isGoodScore)

гораздо больше похож на человеческий язык, понятный для всех и короче.

Карри-функции

Каррированная функция - это функция, которая принимает несколько аргументов по одному.

Это нормальная функция:

const add = (a, b, c) => a + b + c
add(1,2,3) // This will return 6

Это функция карри:

const add = a => b => c => a + b + c
add(1)(2)(3) // This will also return

Итак, зачем нам каррированные функции и как они помогают лучше писать код?

Хорошо, я много лет думал об этих вопросах и объясню на этом примере:

const scores = [3,1,5,7,9]
const isGoodScore = score => score >= 7
const goodScores = scores.filter(isGoodScore)

Возьмем предыдущий пример. Что, если мы хотим отдельно отфильтровать оценки, равные 1, 2… вплоть до 10? Можно определить десять функций isEqual1… isEqual10, но с каррированными функциями мы можем улучшить их, имея только одну функцию с именем isEqual. Код будет выглядеть так:

const scores = [3,1,5,7,9,1,5]
const isEqual = compareValue => score => score === compareValue
const scoresEqual1 = scores.filter(isEqual(1))

Потрясающие. : D Больше не нужно писать десять разных функций.

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

const isEqual = function(compareValue){
  return function(score){ 
    return score === compareValue
  }
}

Итак, я думаю, вы теперь понимаете бесточечный стиль и каррированные функции. Давайте создадим функцию addToCart, используя for цикл.

Видите ли, мы используем цикл for для поиска продукта в массиве products и массиве shoppingCart. Затем мы проверяем, есть ли этот продукт в shoppingCart. Если так, мы увеличиваем количество; в противном случае мы добавляем этот продукт в shoppingCart.

Давайте переделаем его с помощью find метода, бесточечного стиля и каррированных функций.

Видите ли, вместо 25 строк кода с for циклом теперь нам нужно только 14 строк с find и безточечным стилем. И, конечно же, эта функция лучше во многих аспектах, таких как удобочитаемость и чистота. Функцию productById можно также повторно использовать во многих других местах.

Более

Используя методы массива и стиль без точек, мы можем написать более чистый код, например:

const products = [....] //An array of product object
const toProductView = product => (
  {
    title: product.name + ' ' + product.brand, 
    price: product.newPrice
  }
const isValid = product => product.price > 0
const displayProducts = products.filter(isValid).map(toProductView)

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

Спасибо за прочтение.