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

1. Удаление дубликатов из массива

Очень популярный вопрос на интервью о массивах Javascript, как извлечь уникальные значения из массива Javascript. Вот быстрое и простое решение этой проблемы, для этой цели вы можете использовать новый Set (). Есть два возможных способа сделать это: один с помощью метода .from (), а второй с помощью оператора распространения (…).

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. Преобразование массива в объект.

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

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 ()? Существует простой способ объединить любое количество массивов в один в одной строке кода. Как вы уже, наверное, догадались, оператор распространения (…) очень полезен при работе с массивами, и в этом случае так же.

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. Нахождение пересечения двух массивов.

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

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. Удаление ложных значений из массива.

Сначала определим ложные значения. В Javascript ложными значениями являются 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 ()

В Javascript есть интересный метод, позволяющий найти индекс последнего вхождения данного элемента. Например, если в нашем массиве есть повторяющиеся значения, мы можем найти позицию последнего его появления. Посмотрим на пример кода:

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. Сумма всех значений в массиве.

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

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