13 полезных советов и приемов работы с массивами JavaScript

13 полезных советов и приемов работы с массивами jаvascript, которые вы должны знать начинающие в JS разработчики.

Массив - одна из самых распространенных концепций jаvascript, которая дает нам множество возможностей для работы с данными, хранящимися внутри. Принимая во внимание, что массив является одной из самых основных тем в jаvascript, о которой вы узнаете в начале вашего пути программирования, в этой статье я хотел бы показать вам несколько приемов, о которых вы, возможно, не знали и которые могут быть очень важными! Давайте начнем.

1. Удаление дубликатов из массива
Это очень популярный вопрос на собеседовании о массивах jаvascript, как извлечь уникальные значения из массива jаvascript. Вот быстрое и простое решение, для этой цели вы можете использовать новый Set(). И я хотел бы показать вам два возможных способа сделать это: один с помощью метода .from(), а второй с помощью spread оператора (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]

2. Заменить конкретное значение в массиве.
Иногда при создании кода необходимо заменить определенное значение в массиве, и для этого есть удобный короткий метод, о котором вы, возможно, еще не знаете. Для этого мы можем использовать .splice(start, value to remove, valueToAdd) и передать туда все три параметра, определяющие, где мы хотим начать модификацию, сколько значений мы хотим изменить и новые значения.

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

3. Массив карты без .map()
Наверное, каждый знает метод массивов .map(), но есть другое решение, которое можно использовать для получения аналогичного эффекта и очень чистого кода. Для этого мы можем использовать метод .from().

var 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 },
]

var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]

4. Очистите массив.
У вас есть массив, полный элементов, но вам нужно его очистить для каких-либо целей, и вы не хотите удалять элементы один за другим? Сделать это одной строкой кода очень просто. Чтобы очистить массив, вам нужно установить длину массива равной 0, и все!

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

fruits.length = 0;
console.log(fruits); // returns []

5. Преобразуйте массив в объект.
Бывает, что у нас есть массив, но для некоторых целей нам нужен объект с этими данными, и самый быстрый способ преобразовать массив в объект - использовать хорошо известный spread оператор (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

6. Заполните массив данными.
Бывают ситуации, когда мы создаем массив, и мы хотели бы заполнить его некоторыми данными, или нам нужен массив с такими же значениями, и в этом случае метод .fill() предлагает простое и понятное решение.

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

7. Объединить массивы
Вы знаете, как объединять массивы в один массив без использования метода .concat()? Существует простой способ объединить любое количество массивов в один в одной строке кода. Как вы, наверное, уже поняли, spread оператор (…) очень полезен при работе с массивами, и в этом случае он то же самое.

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

8. Найдите пересечение двух массивов.
Это также одна из самых популярных проблем, с которыми вы можете столкнуться на любом собеседовании по jаvascript, потому что оно показывает, можете ли вы использовать методы массива и какова ваша логика. Чтобы найти пересечение двух массивов, мы будем использовать один из ранее показанных в этой статье методов, чтобы убедиться, что значения в массиве, который мы проверяем, не дублируются.

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

9. Удалите ложные значения из массива.
Сначала давайте определимся с ложными значениями. В jаvascript ложными значениями являются false, 0, «», null, NaN, undefined. Теперь мы можем узнать, как удалить такие значения из нашего массива. Для этого мы воспользуемся методом .filter ().

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

10. Получить случайное значение из массива
Иногда нам нужно выбрать значение из массива случайным образом. Чтобы создать его простым, быстрым и коротким способом и сохранить наш код чистым, мы можем получить случайный индексный номер в соответствии с длиной массива. Посмотрим на код:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

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

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

12. Метод .lastIndexOf ()
В jаvascript есть интересный метод, позволяющий найти индекс последнего вхождения данного элемента. Например, если в нашем массиве есть повторяющиеся значения, мы можем найти позицию последнего его появления. Давайте посмотрим на пример кода:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

13. Просуммируйте все значения в массиве.
Еще одна проблема, которая очень часто встречается во время собеседований с jаvascript Engineer. Здесь ничего страшного не происходит; ее можно решить с помощью метода .reduce в одной строке кода. Давайте посмотрим на код:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

На этом все! Кроме того, помните, что существует множество различных приемов, которые вы можете использовать в jаvascript, которые стоит изучить, не только в отношении массивов, но и различных типов данных.