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

1. Как использовать деструктуризацию массива

С деструктуризацией массива вы можете извлекать отдельные элементы из массива JavaScript:

const fruits = ["?", "?", "?"];

const apple = fruits[0];
console.log(apple); // "?"

const banana = fruits[1];
console.log(banana); // "?"

const cherry = fruits[2];
console.log(cherry); // "?"

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

const [apple, banana, cherry] = ["?", "?", "?"];

console.log(apple); // "?"
console.log(banana); // "?"
console.log(cherry); // "?"

 Кроме того, вы можете пропустить определенные элементы, если хотите:

const [apple, , cherry] = ["?", "?", "?"];

console.log(apple); // "?"
console.log(cherry); // "?"

Обратите внимание на пустой слот выше. Вы можете пропустить любой элемент, который вам не нужен, просто оставив имя переменной и добавив еще одну запятую.

Кроме того, с деструктуризацией массива можно сделать еще две вещи:

// Assign a default value for a missing element.
const [apple, banana, cherry, melon = "?"] = ["?", "?", "?"];
console.log(melon); // "?"

// Get all remaining elements from an array using the rest operator (`...`).
const [apple, ...remainingFruits] = ["?", "?", "?"];
console.log(remainingFruits); // ["?", "?"]

2. Как создать версию массива без дубликатов

Чтобы удалить все дубликаты из массива, люди часто используют такую библиотеку, как lodash. Библиотека ни в коем случае не плохая, однако есть способ сделать это гораздо проще. Вы можете получить все уникальные значения без внешней зависимости. Для этого создайте новый Setиз вашего массива. Затем используйте оператор распространения ( ...), чтобы создать новый массив из вашего набора. Поскольку набор может содержать только уникальные значения, дубликатов не остается.

const fruits = ["?", "?", "?", "?", "?"];

// Create a new set from `fruits`, thereby removing all duplicates.
// Then, create a new array from it.
const uniqueFruits = [...new Set(fruits)];

console.log(uniqueFruits); // ["?", "?", "?"]

3. Как найти все элементы, соответствующие условию

Если вы работаете с массивами, иногда вам нужно удалить некоторые элементы. Возможно, вы хотите удалить нечетные числа или просто ищете короткие строки. Что бы вы ни делали, вы можете использовать Array#filterдля этого.

const names = ["Kai", "Katharina", "Tim"];

// Keep names that are shorter than 4 characters.
const shortNames = names.filter(name => name.length < 4);
console.log(shortNames); // ["Kai", "Tim"]

// Find names that are longer than 10 characters.
const extraLongNames = names.filter(name => name.length > 10);
console.log(extraLongNames); // []

4. Как удалить все ложные значения из массива

Иногда ваш массив содержит ложные значения, и вы хотите их удалить. Falsy значения false, null, 0, "", undefined, и NaN. Вы можете легко их отфильтровать. Для этого вы можете Array#filterснова использовать метод и просто проверить истинность элемента:

const fruits = ["?", false, "?", undefined, "?"];

// Keep all array elements where `fruit` is truthy.
const filteredFruits = fruits.filter(fruit => fruit);

console.log(filteredFruits); // ["?", "?", "?"]

// This shows an alternative way to remove all falsy values from an array.
const filteredFruits = fruits.filter(Boolean);

5. Как найти первый элемент, соответствующий условию

Подобно пункту 3, иногда нам просто нужен первый элемент, соответствующий нашему условию. Итак, мы можем воспользоваться Array#findметодом.

const names = ["Kai", "Katharina", "Tim"];

// Find a name that is shorter than 4 characters.
const shortName = names.find(name => name.length < 4);
console.log(shortName); // "Kai"

// Find a name that is longer than 10 characters.
const extraLongName = names.find(name => name.length > 10);
console.log(extraLongName); // undefined

6. Как проверить, соответствует ли какой-либо / каждый элемент условию

Массивы JavaScript реализуют два  метода. Array#someи Array#every. Можете использовать их, чтобы проверить, соответствует ли какой-либо element ( Array#some) или каждый element ( Array#every) определенному условию.

const names = ["Kai", "Katharina", "Tim"];

// Check if ANY name is shorter than 4 characters.
const containsShortName = names.some(name => name.length < 4);
console.log(containsShortName); // true

// Check if EVERY name is longer than 3 characters.
const containsLongNamesOnly = names.every(name => name.length > 3);
console.log(containsLongNamesOnly); // false

7. Как найти пересечение двух массивов

При сравнении двух массивов вы можете захотеть выяснить, какие элементы входят в оба массива. Это означает, что мы хотим найти пересечение обоих массивов. Итак, мы можем использовать комбинацию Array#filterи Array#includes.

const fruitsA = ["?", "?", "?"];
const fruitsB = ["?", "?", "?", "?"];

const intersection = fruitsA.filter(fruit => fruitsB.includes(fruit));
console.log(intersection); // ["?", "?"]

8. Как найти разницу двух массивов

Подобно 7. мы можем использовать комбинацию Array#filterи, Array#includesчтобы найти разницу между двумя массивами. Реализация зависит от того, хотите ли вы включить соответствующие элементы из второго массива или нет.

const fruitsA = ["?", "?", "?"];
const fruitsB = ["?", "?", "?", "?"];

// Keep all elements from `fruitsA` that are not included in `fruitsB`. 
const difference = fruitsA.filter(fruit => !fruitsB.includes(fruit));
console.log(difference); // ["?"]

// Keep all elements from `fruitsA` that are not included in `fruitsB` and vice versa.
const difference = [  ...fruitsA.filter(fruit => !fruitsB.includes(fruit)),  ...fruitsB.filter(fruit => !fruitsA.includes(fruit)),
];
console.log(difference); // ["?", "?", "?"]

9. Как найти союз двух массивов

Может быть, вы хотите объединить два массива и выбросить все дубликаты. Вы узнали, как удалять дубликаты в совете 2. Мы снова будем использовать оператор распространения ( ...) и набор.

const fruitsA = ["?", "?", "?"];
const fruitsB = ["?", "?", "?", "?"];

// Merge `fruitsA` and `fruitsB`. Then, use a set for removing duplicates.
// After that, create a new array from the set.
const union = [...new Set([...fruitsA, ...fruitsB])];
console.log(union); // ["?", "?", "?", "?", "?"]

10. Как получить первый и последний элемент

Время от времени единственный элемент, который вас интересует, - это первый или последний. Несложный способ доступа к ним являются Array#shiftи Array#popметоды. Однако обратите внимание, что это удалит первый и последний элемент из массива. Иногда вы не хотите изменять исходный массив.

const fruits = ["?", "?", "?"];

// Find the first element. Attention! This modifies the original array.
const first = fruits.shift();
console.log(first); // "?"

// Find the last element. Attention! This modifies the original array.
const last = fruits.pop();
console.log(last); // "?"

// Remember, both methods modify the original array.
console.log(fruits); // ["?"]

11. Как добавить элемент в массив

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

const fruits = ["?", "?", "?"];

// Append an element with `Array#push`.
// This means, we'll add it to the end.
fruits.push("?");
console.log(fruits); // ["?", "?", "?", "?"];

// Prepend an element with `Array#unshift`.
// This means, we'll add it to the beginning.
fruits.unshift("?");
console.log(fruits); // ["?", "?", "?", "?", "?"];

// You can also add multiple items at once.
// Works with `push` and `unshift`.
fruits.push("?", "?");
fruits.unshift("?", "?");

// Also, you could use the spread operator (...).
// This would add all elements from another array.
fruits.push(...["?", "?"]);
fruits.unshift(...["?", "?"]);

12. Как скопировать массив

Как вы уже видели в советах, некоторые действия изменяют исходный массив. Иногда это нежелательно. Таким образом, нам нужно как-то его скопировать. Простой способ сделать это - использовать Array#sliceметод.

// This example is similar to tip 11.
const fruitsA = ["?", "?", "?"];

// Here, we copy the `fruitsA` array.
const fruitsB = fruitsA.slice();

// Find the first element. Attention! This modifies our `fruitsB` array.
const first = fruitsB.shift();
console.log(first); // "?"

// Find the last element. Attention! This modifies our `fruitsB` array.
const last = fruitsB.pop();
console.log(last); // "?"

// This time, our original arrays stays intact.
// Only `fruitsB` has changed.
console.log(fruitsA); // ["?", "?", "?"]
console.log(fruitsB); // ["?"]

// This shows an alternative way to copy an array.
const fruitsB = [...fruitsA];

 Объекты и вложенные массивы передаются по ссылке. Итак, скажем, fruitsAбудет содержать объект, и вы скопируете массив в него fruitsB. Затем вы вынимаете этот объект fruitsBи модифицируете его. Вы можете подумать, что это оставит ваш исходный массив нетронутым. Но вы ошибаетесь. Полученный вами объект  fruitsB по-прежнему ссылается на объект fruitsA. Таким образом, любое изменение объекта в fruitsBбудет отражаться на том же объекте в fruitsA. Об этом важно помнить! Для копий рассмотрите возможность использования специальной библиотеки.

13. Как найти минимальное и максимальное значение из массива

Если вы работаете с большим количеством чисел, у вас будет время, чтобы найти минимальное или максимальное значение. Наверное, вы знаете, что можете использовать Math#minи Math#max. Объедините это с оператором распространения ( ...), и вы можете легко проверить полный массив на его минимальное и максимальное значение.

const priceHistory = [450, 500, 330, 600, 910];

// Find the minimum value.
const minimumPrice = Math.min(...priceHistory);
console.log(minimumPrice); // 330

// Find the maximum value.
const maximumPrice = Math.max(...priceHistory);
console.log(maximumPrice); // 910

14. Как отсортировать массив чисел

Если вы хотите отсортировать массив, вы, вероятно, будете использовать Array#sort. Но числа отсортированы не так, как вы думаете. При сортировке массивов в JavaScript он по умолчанию преобразует элементы в строки. Затем элементы сортируются путем сравнения их кодовых точек UTF-16. Для чисел это могло вызвать неожиданный заказ. Итак, мы изменим поведение по умолчанию и передадим функцию Array#sortметоду. Он работает, всегда сравнивая два элемента ( aи b) одновременно. Если результат меньше 0, aидет первым. Если результат больше 0, bидет первым.

const numbers = [15, 52, 23, 11, 9];

// Sort in ascending order. Attention! This modifies the original array.
numbers.sort((a, b) => a - b);
console.log(numbers); // [9, 11, 15, 23, 52]

// Sort in descending order. Attention! Again, this modifies the original array.
numbers.sort((a, b) => b - a);
console.log(numbers); // [52, 23, 15, 11, 9]