Этот пост был первоначально опубликован в kais.blog .
Давайте вместе продвинусь к обучению! Следуй за мной в Твиттере Для вашей ежедневной дозы советов разработчика. Спасибо, что прочитали мой контент!
Обновление: Не забудьте проверить 10 потрясающих советов по строке JavaScript Вы, возможно, не знаете о !
Массивы везде. Всякий раз, когда вы работаете с JavaScript, вы, вероятно, используете массивы. Часто программисты используют конкретные библиотеки, чтобы сделать массивы более полезными. Тем не менее, я хотел бы показать вам 14 замечательных советов о массивах JavaScript, возможно, вы не знали. Таким образом, вы можете избавиться от внешних зависимостей. Вместо этого используйте эти простые фрагменты кода.
- Как использовать деструктурирование массива
- Как создать без дубликатов версию массива
- Как найти все элементы, соответствующие условию
- Как удалить все фальшивые значения из массива
- Как найти первый элемент, соответствующий условию
- Как проверить, соответствует ли какой -либо/каждый элемент условие
- Как найти пересечение двух массивов
- Как найти разницу в двух массивах
- Как найти союз из двух массивов
- Как получить первый и последний элемент
- Как сдать/добавить элемент к массиву
- Как скопировать массив
- Как найти минимальное и максимальное значение из массива
- Как сортировать массив чисел
С Массив деструктуризация Вы можете извлечь отдельные элементы из массива 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); // ["🍌", "🍒"]
Есть еще больше, что вы можете сделать с деструктуризацией массива. Может, я напишу еще один пост об этом позже.
Чтобы удалить все дубликаты из массива, люди часто используют библиотеку, такую как Лодаш Анкет Библиотека ни в коем случае не плохая, однако, есть гораздо более простой способ сделать это. Вы можете получить все уникальные значения без внешней зависимости. Для этого создайте новый Установить из вашего массива. Затем используйте оператор спреда ( ... ), чтобы создать новый массив из вашего набора. Поскольку набор может содержать только уникальные значения, не осталось дубликатов.
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); // ["🍎", "🍌", "🍒"]
Если вы работаете с массивами, иногда вы хотите удалить некоторые элементы. Может быть, вы хотите удалить нечетные числа или просто ищете короткие строки. Что бы вы ни хотели, вы можете использовать Массив#Фильтр для этого.
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); // []
Иногда ваш массив содержит фальшивые значения, и вы хотите удалить их. Фальшивые значения ложный , нулевой , 0 , "" , неопределенное и НАН Анкет Вы можете отфильтровать их очень легко. Для этого вы можете использовать Массив#Фильтр метод снова и просто проверьте правдивость элемента:
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);
Похоже на 3. Иногда нам просто нужен первый элемент, который соответствует нашему состоянию. Итак, мы можем использовать Массив#Найти метод
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
Массивы JavaScript реализуют два потрясающих метода. Массив#немного и Массив#каждый Анкет Часто я замечаю, что многие люди не знают этих двоих. Вы можете использовать их, чтобы проверить, соответствует ли какой -либо элемент ( Array#немного ) или каждый элемент ( Array#каждый ) соответствует определенному условию.
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
Сравнивая два массива, вы можете узнать, какие элементы включены в обоих массивов. Это означает, что мы хотим найти пересечение обоих массивов. Итак, мы можем использовать комбинацию Массив#Фильтр и Массив#включает Анкет
const fruitsA = ["🍎", "🍌", "🍒"]; const fruitsB = ["🍒", "🍆", "🍉", "🍌"]; const intersection = fruitsA.filter(fruit => fruitsB.includes(fruit)); console.log(intersection); // ["🍌", "🍒"]
Похоже на 7. Мы можем использовать Combine Массив#Фильтр и Массив#включает Чтобы найти разницу между двумя массивами. Реализация отличается от того, хотите ли вы включить соответствующие элементы со второго массива или нет.
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); // ["🍎", "🍆", "🍉"]
Может быть, вы хотите объединить два массива и выбросить все дубликаты. Хорошо, что вы узнали, как удалить дубликаты в кончике 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); // ["🍎", "🍌", "🍒", "🍆", "🍉"]
Время от времени единственный элемент вас интересует, – это первый или последний. Простой способ доступа к ним – это Массив#shift и Массив#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); // ["🍌"]
Вы, вероятно, знаете это. Но, на всякий случай, я расскажу вам, как вы можете приготовить или добавить элемент к массиву 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(...["🍍", "🍊"]);
Как вы видели в советах раньше, некоторые действия меняют ваш первоначальный массив. Иногда это нежелательно. Таким образом, нам каким -то образом нужно скопировать это. Простой способ сделать это – использовать Массив#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 Анкет Это важно помнить! Для глубоких копий рассмотрите возможность использования специальной библиотеки.
Если вы работаете с большим количеством чисел, будет время, когда вы должны найти минимальное или максимальное значение. Наверное, вы знаете, что можете использовать Математика#мин и Математика#Макс . Объедините это с оператором спреда ( ... ), и вы можете легко проверить полный массив на предмет его минимального и максимального значения.
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
Если вы хотите сортировать массив, вы, вероятно, используете Массив#sort Анкет Но цифры не отсортированы так, как вы думаете. При сортировке массивов в JavaScript он конвертирует элементы в строки по умолчанию. Затем элементы сортируются путем сравнения их кодепоинтов UTF-16. Для чисел это может вызвать неожиданный заказ. Итак, мы изменим поведение по умолчанию и передам функцию в Массив#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]
Вы можете использовать массивы для широкого спектра вещей. Часто есть простые родные способы, которые делают работу. Может быть, вы уже знали эти советы. Возможно, нет. Тем не менее, я надеюсь, что этот пост был интересным для вас. Я постараюсь обновить этот пост с новыми советами в будущем.
Большое спасибо за чтение этого поста. Пожалуйста, поделитесь этим со своими друзьями и коллегами. До скорого!
Обновление: Не забудьте проверить 10 потрясающих советов по строке JavaScript Вы, возможно, не знаете о !
Давайте вместе продвинусь к обучению! Следуй за мной в Твиттере Для вашей ежедневной дозы советов разработчика. Спасибо, что прочитали мой контент!
Этот пост был первоначально опубликован в kais.blog .
Оригинал: “https://dev.to/kais_blog/14-awesome-javascript-array-tips-you-should-know-about-1d0m”