Массив - одна из самых распространенных концепций 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
0 комментариев
Добавить комментарий