12 полезных советов и трюков с JavaScript массивами
2 года назад·4 мин. на чтение
Массив является одним из самых распространенных структур в JavaScript, который дает нам много возможностей для работы с данными.
Принимая во внимание, что массив является одной из основных тем в JavaScript, о которой вы узнаете в начале своего пути программирования, в этой статье рассмотрим несколько трюков, о которых вы, возможно, не знаете и которые могут быть очень полезны в разработке.
3. Как трансформировать JavaScript массив не используя
Вероятно, все знают метод массивов
1. Как удалить дубликаты из JavaScript массива?
Это очень популярный вопрос интервью о массивах JavaScript, о том, как извлечь уникальные значения из массива JavaScript. Вот быстрое и простое решение этой проблемы, вы можете использоватьnew Set()
для этой цели. Рассмотрим два способа сделать это, один с помощью метода .from()
, а второй с оператором spread (...
).
Еще несколько способов удаления дубликатов из JavaScript массива описаны в статье "Как удалить повторяющиеся элементы массива в JavaScript?"const fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; // Первый способ const uniqueFruits = Array.from(new Set(fruits)); console.log(uniqueFruits); // возвращает ["banana", "apple", "orange", "watermelon", "grape"] // Второй способ const uniqueFruits2 = […new Set(fruits)]; console.log(uniqueFruits2); // возвращает ["banana", "apple", "orange", "watermelon", "grape"]
2. Как заменить определенное значение в JavaScript массиве?
Иногда при написании кода необходимо заменить определенное значение в массиве, и для этого есть хороший короткий метод, о котором вы, возможно, еще не знаете. Для этого мы можем использовать.splice(start, value to remove, valueToAdd)
и передать туда все три параметра, указывающие, где мы хотим начать модификацию, сколько значений мы хотим изменить, и новые значения.
const fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; fruits.splice(0, 2, "potato", "tomato"); console.log(fruits); // возвращает ["potato", "tomato", "orange", "watermelon", "apple", "orange", "grape", "apple"]
3. Как трансформировать JavaScript массив не используя .map()
?
Вероятно, все знают метод массивов .map()
, но есть другое решение, которое может быть использовано для получения аналогичного эффекта и очень чистого кода. Для этой цели мы можем использовать метод .from()
.
const friends = [ { name: "John", age: 22 }, { name: "Peter", age: 23 }, { name: "Mark", age: 24 }, { name: "Maria", age: 22 }, { name: "Monica", age: 21 }, { name: "Martha", age: 19 }, ] const friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames); // возвращает ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]
4. Как очистите JavaScript массив?
Что делать если по каким-то причинам нужно очистить массив, но не хочется удалять элементы по одному? Это очень просто сделать одной строкой кода. Чтобы очистить массив, вам нужно установить длину массива равным0
, и все.
const fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; fruits.length = 0; console.log(fruits); // возвращает []
5. Как в JavaScript преобразовать массив в объект?
Бывает, что у нас есть массив, но для какой-то цели нам нужен объект с этими данными, и самый быстрый способ преобразовать массив в объект — использовать известный оператор spread (...
).
const fruits = ["banana", "apple", "orange", "watermelon"]; const fruitsObj = { ...fruits }; console.log(fruitsObj); // возвращает { 0: "banana", 1: "apple", 2: "orange", 3: "watermelon", 4: "apple", 5: "orange", 6: "grape", 7: "apple" }
6. Как заполнить данными массив в JavaScript?
Бывают ситуации, когда мы создаем массив, и мы хотели бы заполнить его какими-то данными, или нам нужен массив с одинаковыми значениями, и в этом случае можно использовать метод.fill()
.
const newArray = new Array(10).fill("1"); console.log(newArray); // возвращает ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]
7. Как объединить несколько массивов в JavaScript?
Знаете ли вы, как объединить массивы в один массив без использования метода.concat()
? Существует простой способ объединить любое количество массивов в один одной строкой кода. Как вы, наверное, уже поняли, оператор spread (...
) довольно полезен при работе с массивами и в данном случае он тоже применим.
const fruits = ["apple", "banana", "orange"]; const meat = ["beef", "fish"]; const vegetables = ["potato", "tomato", "cucumber"]; const food = [...fruits, ...meat, ...vegetables]; console.log(food); // ["apple", "banana", "orange", "beef", "fish", "potato", "tomato", "cucumber"]
8. Как удалить ложные значений из JavaScript массива?
Сначала определим ложные значения. В JavaScript ложными значениями являютсяfalse
, 0
, ""
, null
, NaN
, undefined
. Теперь мы можем узнать, как удалить такого рода значения из нашего массива. Для этого мы будем использовать метод .filter()
.
const mixedArr = [0, "blue", "", NaN, 9, true, undefined, "white", false]; const trueArr = mixedArr.filter(Boolean); console.log(trueArr); // возвращает ["blue", 9, true, "white"]
9. Как получить случайное значение из JavaScript массива?
Иногда нам нужно выбрать значение из массива случайным образом. Простой, быстрый и короткий способ - получить случайный индекс в соответствии с длиной массива. Давайте посмотрим код:const colors = ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black", "brown"]; const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
10. Как реверсировать массив на JavaScript?
Когда нам нужно перевернуть наш массив, нет необходимости создавать его через сложные циклы и функции, есть простой метод массива, который делает все это за нас, и с одной строкой кода мы можем повернуть наш массив вспять. Давайте проверим:const colors = ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black", "brown"]; const reversedColors = colors.reverse(); console.log(reversedColors); // возвращает ["brown", "black", "yellow", "orange", "purple", "pink", "navy", "green", "white", "blue"]
11. Как получить n-й с конца элемент массива в JavaScript?
В JavaScript есть интересный метод, позволяющий найти индекс последнего вхождения данного элемента. Например, если наш массив имеет повторяющиеся значения, мы можем найти позицию последнего его вхождения. Рассмотрим пример кода:const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; const lastIndex = nums.lastIndexOf(5); console.log(lastIndex); // возвращает 9
12. Как просуммировать все значения в JavaScript массиве?
Это еще одна популярная задача, которая очень часто возникает во время JavaScript собеседования. Здесь нет ничего сложного; ее можно решить с помощью метода.reduce
одной строкой кода. Давайте проверим код:
const nums = [1, 5, 2, 6]; const sum = nums.reduce((x, y) => x + y); console.log(sum); // возвращает 14
Итоги
В этой статье мы рассмотрели 12 трюков и советов, которые могут помочь вам при разработке и сделают ваш код коротким и чистым.Композиция функций. Функциональное программирование
2 года назад·5 мин. на чтение
Композиция — это способ построения больших модулей из более мелких. В этой статье подробно рассмотрим композицию на примере JavaScript.
Это серия статей о функциональном программировании:
Пример работы функции
Рассмотрим пример с более конкретными функциями:
Функция
Реализация
Добавим
Добавим для всех параметров, кроме
- Парадигмы программирования
- Композиция (рассматривается в этой статье)
- Функторы
- Каррирование
- Чистые функции
- Функции первого класса
Что такое композиция функций?
Композиция — это процесс объединения небольших единиц в более крупные, которые решают более крупные задачи. При композиции входные данные одной функции приходят из выходных данных предыдущей.Как работает композиция?
Математическая запись определения композиции выглядит следующим образом:В JavaScript композиция, где(f ∘ g)(x) = f(g(x))
f
и g
- это функции, будет выглядеть так:
Функцияconst compose = (f, g) => (x) => f(g(x))
compose
является композицией функций f
и g
. Выходные данные функции g
будут переданы на вход функции f
. По другому эта запись выглядела бы следующим образом:
const compose = (f, g) => { return (x) => { const gResult = g(x) const fResult = f(gResult) return fResult } }
Пример работы функции compose
Рассмотрим пример с более конкретными функциями:
Теперь составим композицию из этих маленьких функций -const getAge = (user) => user.age const isAgeAllowed = (age) => age >= 30
getAge
и isAgeAllowed
:
const user = { name: 'John', age: 35 } const isAllowedUser = compose( isAgeAllowed, getAge ) isAllowedUser(user) // true
compose
выполняет функции справа налево. Мы отправляем объект user
в функцию isAgeAllowed
. Далее user
попадает сначала в getAge
, потом результат этой функции попадает в isAgeAllowed
.
compose
и pipe
Функция pipe
очень похожа на функцию compose
. Они выполняют одну и ту же роль. Обе объединяют функции в цепочки. Однако их реализация и порядок выполнения функций отличается.
Реализация compose
и pipe
compose
реализован следующим образом:
const compose = (...fns) => { return (x) => fns.reduceRight((acc, fn) => fn(acc), x) }
pipe
реализован следующим образом:
Они отличаются лишь в применении функцииconst pipe = (...fns) => { return (x) => fns.reduce((acc, fn) => fn(acc), x) }
reduce
и reduceRight
. Это влияет лишь на порядок выполнения функций.
Порядок выполнения функций
compose
выполняет функции справа налево.
pipe
выполняет функции слева направо.
Пример
Предположим имеется 3 функции:f
, g
и h
.
При использовании compose
:
Порядок выполнения функций будет такимcompose(f, g, h) ← ← ←
h
, g
и далее f
(справа налево). И выходные данные будут передаваться в следующую функцию.
При использовании pipe
:
Порядок выполнения функций будет такимpipe(f, g, h) → → →
f
, g
и далее h
(слева направо). И выходные данные будут передаваться в следующую функцию.
Какую функцию использовать?
compose
и pipe
не сильно отличаются друг от друга. Они решают одну и ту же задачу. compose
ближе к математической нотации (f ∘ g)(x) = f(g(x))
. С pipe
визуально легче воспринимать порядок выполнения функций.
Реальный пример
В следующих примерах будем использоватьpipe
. Предположим, нужно сделать простой калькулятор цен, в котором нужно применить:
- налог (30%, по умолчанию),
- сервисный сбор (10у.е., по умолчанию),
- скидку,
- купон,
- цену доставки на основе веса.
const priceCalculator = ( taxPercentage = 0.3, serviceFees = 10, price, discount, percentCoupon, weight, shippingPricePerKg ) => { // реализация }
Реализация без композиции
Эта функция выполняет свою задачу, но ее сложно читать, тестировать и отлаживать.const priceCalculator = ( taxPercentage = 0.3, serviceFees = 10, price, discount, percentCoupon, weight, shippingPricePerKg ) => { return ( price - (price * percentCoupon) - discount + (weight * shippingPricePerKg) + serviceFees ) * (1 + taxPercentage) }
Реализация с композицией
Эта реализация выглядит более чистой, ее легко тестировать и отлаживать. Все это благодаря модульности.const priceCalculator = ( taxPercentage = 0.3, serviceFees = 10, price, discount, percentCoupon, weight, shippingPricePerKg ) => { const applyTax = (val) => val * (1 + taxPercentage) const applyServiceFees = (val) => val + serviceFees const applyPercentCoupon = (val) => val - val * percentCoupon const applyDiscount = (val) => val - discount const applyShippingCost = (val) => val + weight * shippingPricePerKg return pipe( applyPercentCoupon, applyDiscount, applyShippingCost, applyServiceFees, applyTax )(price) }
Запуск примера
Запустим, передав толькоprice
. Очевидно, получим неверный результат, т.к. передали не все обязательные параметры.
Сначала продебажим. Для дебагаpriceCalculator(10) // NaN
pipe
и compose
можно добавить удобную функцию inspect
. Она просто логирует в консоль входные данные и возвращает эти данные без изменений.
const inspect = (label) => (x) => { console.log(`${label}: ${x}`) return x }
inspect
в цепочку выполнения.
Результат будет примерно таким:const priceCalculator = ( taxPercentage = 0.3, serviceFees = 10, price, discount, percentCoupon, weight, shippingPricePerKg ) => { const applyTax = (val) => val * (1 + taxPercentage) const applyServiceFees = (val) => val + serviceFees const applyPercentCoupon = (val) => val - val * percentCoupon const applyDiscount = (val) => val - discount const applyShippingCost = (val) => val + weight * shippingPricePerKg return pipe( inspect('price'), applyPercentCoupon, inspect('after applyPercentCoupon'), applyDiscount, inspect('after applyDiscount'), applyShippingCost, inspect('after applyShippingCost'), applyServiceFees, inspect('after applyServiceFees'), applyTax )(price) }
Видим,priceCalculator(10) // price: undefined // after applyPercentCoupon: NaN // ...
price
- undefined
. Это произошло потому что price
- третий аргумент, а мы передаем его первым.
Быстрый фикс
Сделаем так, чтобы функция принимала один объект:Далее, используем:const priceCalculator = ({ taxPercentage = 0.3, serviceFees = 10, price, discount, percentCoupon, weight, shippingPricePerKg }) => { // ... }
Все еще получаемpriceCalculator({ price: 10 }) // price: 10 // after applyPercentCoupon: NaN // ...
NaN
, в этот раз потому что не был передан percentCoupon
и он имеет значение undefined
.
price
, значения по умолчанию.
Если запустить заново, получим результат:const priceCalculator = ({ taxPercentage = 0.3, serviceFees = 10, price, discount = 0, percentCoupon = 0, weight = 0, shippingPricePerKg = 0 }) => { // ... }
Это пример того как композиция позволяет нам тестировать и исправлять код проще и быстрее, просто проверяя области, которые вызывают подозрения. Проблема, которую мы отлаживали, была очень простой. Когда мы переходим к более масштабным модулям, все становится еще более трудным для проверки. Большие атомарные функции трудно поддерживать. Разделение функций на более мелкие упрощает отладку, тестирование, поддержку и разработку функций.priceCalculator({ price: 10 }) // 26
Для чего нужна композиция?
Композиция это объединение меньших модулей в более крупные. Если мы думаем оперируем модулями (что обеспечивается композицией), мы улучшаем:- модульное мышление,
- тестируемость,
- возможность отладки,
- поддерживаемость.