Массив — это одна из наиболее распространенных концепций Javascript, которая дает нам много возможностей для работы с данными, хранящимися внутри.
Принимая во внимание, что массив является одной из самых основных тем в Javascript, о которой вы узнаете в начале своего пути программирования, в этой статье я хотел бы показать вам несколько уловок, о которых вы, возможно, не знаете, и которые могут быть очень полезно в кодировании! Давайте начнем.
1. Удалить дубликаты из массива
Это очень популярный вопрос интервью о массивах Javascript, как извлечь уникальные значения из массива Javascript. Вот быстрое и простое решение этой проблемы, вы можете использовать новый Set () для этой цели. И я хотел бы показать вам два возможных способа сделать это: один с методом .from (), а второй с оператором распространения (…).
|
1 2 3 4 5 6 7 8 9 |
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 для удаления, valueToAdd) и передать туда все три параметра, указывающие, где мы хотим начать модификацию, сколько значений мы хотим изменить и новые значения.
|
1 2 3 |
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 () для этой цели.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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, и все!
|
1 2 3 4 5 |
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]; fruits.length = 0; console.log(fruits); // returns [] |
5. Конвертировать массив в объект
Бывает, что у нас есть массив, но для какой-то цели нам нужен объект с этими данными, и самый быстрый способ преобразовать массив в объект — это использовать хорошо известный оператор распространения (…).
|
1 2 3 |
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 () поставляется с простым и понятным решением.
|
1 2 |
var newArray = new Array(10).fill(“1”); console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”] |
7. Слияние массивов
Знаете ли вы, как объединить массивы в один массив, не используя метод .concat ()? Существует простой способ объединить любое количество массивов в одну строку кода. Как вы, наверное, поняли, оператор распространения (…) довольно полезен при работе с массивами, и в этом случае он такой же.
|
1 2 3 4 5 |
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 и метод .include. В результате мы получим массив со значениями, которые были представлены в обоих массивах. Проверьте код:
|
1 2 3 4 |
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 ().
|
1 2 3 |
var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false]; var trueArr = mixedArr.filter(Boolean); console.log(trueArr); // returns [“blue”, 9, true, “white”] |
10. Получить случайное значение из массива
Иногда нам нужно выбрать значение из массива случайным образом. Чтобы создать его простым, быстрым и коротким способом и сохранить наш код в чистоте, мы можем получить случайный номер индекса в соответствии с длиной массива. Давайте посмотрим код:
|
1 2 |
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”]; var randomColor = colors[(Math.floor(Math.random() * (colors.length)))] |
11. Реверсивный массив
Когда нам нужно перевернуть наш массив, нет необходимости создавать его через сложные циклы и функции, есть простой метод массива, который делает все это за нас, и с одной строкой кода мы можем перевернуть наш массив. Давайте проверим это:
|
1 2 3 |
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 есть интересный метод, который позволяет найти индекс последнего вхождения данного элемента. Например, если наш массив имеет дублированные значения, мы можем найти позицию последнего вхождения этого. Давайте посмотрим пример кода:
|
1 2 3 |
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. Здесь нет ничего страшного; это можно решить с помощью метода .reduce в одной строке кода. Давайте проверим код:
|
1 2 3 |
var nums = [1, 5, 2, 6]; var sum = nums.reduce((x, y) => x + y); console.log(sum); // returns 14 |
Заключение
В этой статье я представил вам 13 хитростей и советов, которые могут помочь вам с кодированием и сохранить ваш код коротким и чистым. Кроме того, помните, что в Javascript можно использовать множество различных приемов, которые стоит изучить не только для массивов, но и для различных типов данных. Надеюсь, вам понравятся решения, представленные в статье, и вы будете использовать их для улучшения процесса разработки.
Приятного кодирования!