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

Введение

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

1. Использование объекта Set

Объект Set является наиболее эффективным способом удаления дубликатов из массива в JavaScript. Это коллекция уникальных значений, что означает, что она автоматически удаляет дубликаты. Используя spread оператор, мы можем преобразовать объект Set обратно в массив, в результате чего получается массив, содержащий только уникальные значения. Вот пример:

const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [1, 2, 3, 4, 5]

В этом примере мы сначала определяем массив с повторяющимися значениями. Затем мы создаем новый объект Set с помощью оператора spread (...). Наконец, мы снова преобразуем объект Set обратно в массив с помощью оператора spread. Результирующий массив содержит только уникальные значения.

2. Использование метода .filter

Метод .filter является вторым наиболее эффективным способом удаления дубликатов из массива в JavaScript. Он создает новый массив, который включает только элементы, отвечающие определенному условию, в данном случае элемент появляется в массиве только один раз. Вот пример:

const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

console.log(uniqueArr); // [1, 2, 3, 4, 5]

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

3. Использование метода .reduce

Метод .reduce немного менее эффективен, чем метод .filter. Он позволяет свести массив к одному значению, применив функцию к каждому элементу массива. В этом случае мы можем использовать .reduce для создания нового массива, включающего только уникальные значения. Вот пример:

const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueArr); // [1, 2, 3, 4, 5]

В этом примере мы используем метод .reduce для итерации по каждому элементу массива и применяем функцию, которая проверяет, находится ли текущий элемент уже в массиве аккумулятора (acc). Если это не так, мы добавляем его в массив аккумулятора. Метод .reduce возвращает конечное значение массива аккумулятора, который является массивом, содержащим только уникальные значения.

4. Использование метода .forEach

Метод .forEach менее эффективен, чем предыдущие методы, но он по-прежнему является жизнеспособным вариантом. Он позволяет перебирать каждый элемент массива и применять к нему функцию. В этом случае мы можем использовать .forEach для создания нового массива, содержащего только уникальные значения. Вот пример:

const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];

arr.forEach((item) => {
  if (!uniqueArr.includes(item)) {
    uniqueArr.push(item);
  }
});

console.log(uniqueArr); // [1, 2, 3, 4, 5]

В этом примере мы используем метод .forEach для итерации по каждому элементу массива и применения функции, которая проверяет, находится ли уже текущий элемент в массиве uniqueArr. Если это не так, мы добавляем его в массив uniqueArr. Результирующий массив содержит только уникальные значения.

5. Использование цикла for

Использование цикла for является наименее эффективным способом удаления дубликатов из массива. Он требует больше кода и вычислительной мощности, и он не такой лаконичный, как другие методы. Вот пример:

const arr = [1, 1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!uniqueArr.includes(arr[i])) {
    uniqueArr.push(arr[i]);
  }
}

console.log(uniqueArr); // [1, 2, 3, 4, 5]

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

Итоги

Удаление дубликатов из массива является распространенной задачей в JavaScript. В этой статье мы рассмотрели пять различных способов выполнения этой задачи с помощью JavaScript. Каждый метод имеет свои преимущества и недостатки, поэтому вам решать, какой метод наилучшим образом соответствует вашим потребностям. Независимо от того, используется ли объект Set, метод .filter, метод .reduce, метод .forEach или цикл for, можно легко удалить дубликаты из массива и более эффективно обрабатывать данные.