Я подумал, что объединю общие методы массива JavaScript с небольшим описанием и примерами в качестве краткого руководства и удобного справочника.
Прежде чем мы перейдем к методам массива, давайте объявим массив.
const items = [
{
id: 1,
name: 'Cereal',
price: 4
},
{
id: 2,
name: 'Action Figure',
price: 7
},
{
id: 3,
name: 'Video Game',
price: 50
},
{
id: 4,
name: 'DVD',
price: 20
},
{
id: 5,
name: 'Tablet',
price: 500
},
{
id: 6,
name: 'Laptop',
price: 1000
},
{
id: 7,
name: 'Vacuum Cleaner',
price: 200
},
{
id: 8,
name: 'Microwave',
price: 200
},
{
id: 9,
name: 'Sunglasses',
price: 25
},
{
id: 10,
name: 'TV',
price: 750
},
];
Отлично, перейдем к методам.
метод карты
Возвращает массив значений, которые были возвращены предоставленной функцией. Метод map выполняет функцию один раз для каждого элемента в массиве. Он не изменяет исходный массив
const itemNames = items.map(item => item.name); console.log(itemNames); /* [ 'Cereal', 'Action Figure', 'Video Game', 'DVD', 'Tablet', 'Laptop', 'Vacuum Cleaner', 'Microwave', 'Sunglasses', 'TV' ] */
метод фильтрации
Возвращает массив значений, которые передают условный оператор из предоставленной функции. Метод filter выполняет функцию один раз для каждого элемента в массиве. Он не изменяет исходный массив.
const affordableItems = items.filter(item => item.price < 100);
console.log(affordableItems);
/*
[
{ id: 1, name: 'Cereal', price: 4 },
{ id: 2, name: 'Action Figure', price: 7 },
{ id: 3, name: 'Video Game', price: 50 },
{ id: 4, name: 'DVD', price: 20 },
{ id: 9, name: 'Sunglasses', price: 25 }
]
*/
найти метод
Возвращает значение первого элемента в массиве, который передает условный оператор из предоставленной функции. Как только функция вернет истину, метод find вернет true и не проверяет остальные элементы. Он не изменяет массив.
const foundItem = items.find(item => item.id === 3);
console.log(foundItem);
// { id: 3, name: 'Video Game', price: 50 }
какой-то метод
Возвращает логическое значение, проверяя, передает ли какой-либо из элементов в массиве условный оператор из предоставленной функции. Когда функция возвращает true, метод some возвращает true и не проверяет остальные элементы. Он не изменяет массив.
const hasExpensiveItems = items.some(item => item.price >= 500); console.log(hasExpensiveItems); // true
каждый метод
Возвращает логическое значение, проверяя, все ли элементы в массиве передают условный оператор из предоставленной функции. Когда функция возвращает false, метод every возвращает false и не проверяет остальные элементы. Он не изменяет массив.
const allItemsExpensive = items.every(item => item.price >= 500); console.log(allItemsExpensive); // false
forEach метод
Выполняет функцию для каждого элемента в массиве. Он не изменяет массив.
items.forEach(item => console.log(item.name)); /* Cereal Action Figure Video Game DVD Tablet Laptop Vacuum Cleaner Microwave Sunglasses TV */
метод уменьшения
Уменьшает массив до одного значения. Предоставленная функция, которая является первым аргументом в методе reduce, выполняется для каждого элемента в массиве. Второй аргумент - это начальное значение аккумуляторной переменной, используемой в функции. Предоставленной функции также требуются два параметра - аккумуляторная переменная и текущий элемент. При каждой итерации аккумулятор становится возвращаемым значением, а когда цикл завершается, аккумулятор возвращается как единственное значение.
const total = items.reduce((accumulatedTotal, item) => item.price + accumulatedTotal, 0); console.log(total); // 2756
В этом примере функция reduce выполняет итерацию по массиву items, выполняя предоставленную функцию для каждого элемента. Начальное значение accumulatedTotal равно 0 из-за второго аргумента, переданного в reduce method. На каждой итерации цена текущего товара добавляется к accumulatedTotal и возвращается accumulatedTotal. По завершении цикла функция reduce возвращает accumulatedTotal.
включает метод
Возвращает логическое значение, проверяя, содержит ли массив свой аргумент. Он не изменяет массив.
const pets = ['dog', 'cat', 'rabbit', 'hamster', 'parrot', 'fish'];
const isFishIncluded = pets.includes('fish');
console.log(isFishIncluded);
// true
метод сортировки
Сортирует элементы массива. По умолчанию метод sort сортирует значения как строки в алфавитном порядке и по возрастанию. Он изменяет исходный массив.
Я добавлю «собачку» к нашему предыдущему массиву pets, чтобы показать, как sort сортирует строки по возрастанию для сортировки 'dog' и 'doggy'.
const pets2 = ['doggy', 'dog', 'cat', 'rabbit', 'hamster', 'parrot', 'fish']; pets2.sort(); console.log(pets2); // ['cat', 'dog', 'doggy', 'fish', 'hamster', 'parrot', 'rabbit']
Обратите внимание, что 'dog' сортируется до 'doggy'. Обе строки начинаются с одних и тех же трех букв, но поскольку 'dog' короче по длине, она сортируется первой в порядке возрастания.
Это хорошо работает для строк, однако поведение метода sort по умолчанию сортирует числа как строки и не сортирует их численно. Например, «20» больше, чем «100», потому что метод sort сравнивает цифру «2» с цифрой «1». Чтобы исправить это поведение, метод sort принимает функцию для сравнения элементов.
const numbers = [20, 100, 55, 8, 13]; // sort in ascending order numbers.sort((a, b) => a - b); console.log(numbers); // [ 8, 13, 20, 55, 100 ] // sort in descending order numbers.sort((a, b) => b - a); console.log(numbers); // [ 100, 55, 20, 13, 8 ]
метод соединения
Возвращает массив в виде строки. Он принимает необязательный параметр, который используется в качестве разделителя. Если ничего не указано, используется разделитель по умолчанию - , - без пробела следует запятая. Если разделитель не нужен, вы можете передать пустую строку. Он не изменяет массив.
const drinks = ['Juice', 'Milk', 'Water', 'Coffee', 'Tea'];
console.log(drinks.join());
// Juice,Milk,Water,Coffee,Tea
console.log(drinks.join(' and '));
// Juice and Milk and Water and Coffee and Tea
console.log(drinks.join(''));
// JuiceMilkWaterCoffeeTea
обратный метод
Меняет порядок элементов в массиве на обратный. Он изменяет исходный массив.
const drinks = ['Juice', 'Milk', 'Water', 'Coffee', 'Tea']; console.log(drinks.reverse()); // [ 'Tea', 'Coffee', 'Water', 'Milk', 'Juice' ]
Вот и все! Надеюсь, вы узнали что-то новое или получили более глубокое понимание того, что уже знали. Не стесняйтесь ссылаться на это при необходимости. Спасибо за прочтение! Будьте хорошими людьми.
