12 полезных советов и трюков с JavaScript массивами

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

1. Как удалить дубликаты из JavaScript массива?

Это очень популярный вопрос интервью о массивах JavaScript, о том, как извлечь уникальные значения из массива JavaScript. Вот быстрое и простое решение этой проблемы, вы можете использовать new Set() для этой цели. Рассмотрим два способа сделать это, один с помощью метода .from(), а второй с оператором spread (...).

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"]

Еще несколько способов удаления дубликатов из JavaScript массива описаны в статье "Как удалить повторяющиеся элементы массива в JavaScript?"

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 трюков и советов, которые могут помочь вам при разработке и сделают ваш код коротким и чистым.

Это серия статей о функциональном программировании:

1. Парадигмы программирования
2. Композиция (рассматривается в этой статье)
3. Функторы
4. Каррирование
5. Чистые функции
6. Функции первого класса

Что такое композиция функций?

Композиция — это процесс объединения небольших единиц в более крупные, которые решают более крупные задачи. При композиции входные данные одной функции приходят из выходных данных предыдущей.

Как работает композиция?

Математическая запись определения композиции выглядит следующим образом:

(f ∘ g)(x) = f(g(x))

В JavaScript композиция, где 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у.е., по умолчанию),
• скидку,
• купон,
• цену доставки на основе веса.

API калькулятора цен на основе этих требований будет выглядеть следующим образом:

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

Это пример того как композиция позволяет нам тестировать и исправлять код проще и быстрее, просто проверяя области, которые вызывают подозрения. Проблема, которую мы отлаживали, была очень простой. Когда мы переходим к более масштабным модулям, все становится еще более трудным для проверки. Большие атомарные функции трудно поддерживать. Разделение функций на более мелкие упрощает отладку, тестирование, поддержку и разработку функций.

Для чего нужна композиция?

Композиция это объединение меньших модулей в более крупные. Если мы думаем оперируем модулями (что обеспечивается композицией), мы улучшаем:

• модульное мышление,
• тестируемость,
• возможность отладки,
• поддерживаемость.

Итоги

Композиция — это способ построения больших модулей из более мелких, что делает наш код более модульным. Таким образом, проще отлаживать, тестировать, поддерживать, повторно использовать и интереснее разрабатывать функции.