Массивы - важная часть JavaScript. Они позволяют хранить несколько элементов в одной переменной. Представьте, что у вас есть 100 контактов, создать переменную для каждого из них будет очень сложно. С массивами вы можете хранить контакты в одной переменной.
Массивы имеют встроенные методы, которые дают нам возможность изменять и преобразовывать данные по своему усмотрению.
В этой статье мы рассмотрим 10 методов массива и варианты их использования.
1. Фильтр ()
Вы слышали о функциях высшего порядка? По сути, функции высшего порядка - это методы, которые принимают функцию в качестве параметра или возвращают функцию в качестве вывода, как и метод фильтрации. Метод filter буквально фильтрует массив и возвращает базу вывода по условию (функции), которое он принимает в качестве аргумента.
Это один из самых крутых и обязательных методов (мной), и если вы не использовали его раньше, вы многое упускаете.
const employees = [
{
id: '001',
name: 'Siradji',
isPermanent: true,
},
{
id: '002',
name: 'Lydia',
isPermanent: false,
},
];
// Filters through employees array and return permanent employees.
const permEmployees = employees.filter(
(employee) => employee.isPermanent === true
);
console.log(permEmployees);
// [{
// id: '001',
// name: 'Siradji',
// isPermanent: true,
// }]
2. Нажмите ()
Это, пожалуй, один из наиболее часто используемых методов Array. Метод push вставляет элемент, который он принимает в качестве аргумента, в конец существующего массива.
const fruits = ['banana', 'mango', 'apple', 'kiwi'];
fruits.push('orange');
console.log(fruits);
// [ "bananan", "mango", "apple", "kiwi", "orange"]
3. Присоединиться ()
Этот метод создает и возвращает строку, объединяя все элементы внутри массива, разделенные запятыми или строкой.
const names = ['Ola', 'james', 'jackie', 'nina'];
const joinAll = names.join('');
console.log(joinAll);
// Olajamesjackienina
const dashSeperator = names.join('-');
console.log(dashSeperator);
// Ola-james-jackie-nina
4. Карта ()
Помните функции высшего порядка? Он также получает функцию в качестве аргумента. Он создает новый массив из результата принятого аргумента. Как разработчик реакции вы, должно быть, довольно часто этим пользуетесь.
const news = [
{
title: 'finally, tom has managed to eat jerry mouse',
publishedAt: 10,
isAHit: true,
},
{
title: 'UFO spotted in califionia',
publishedAt: 11,
isAHit: true,
},
]
const newsTitle = news.map( news => news.title)
console.log(newsTitle)
// ["finally, tom has managed to eat jerry mouse",
// "UFO spotted in califionia"]
5. Соединение ()
Этот метод удаляет или заменяет элемент существующего массива. Обратите внимание, что этот метод изменяет исходный массив.
// replace an element
const cars = ['audi', 'volvo', 'benz', 'honda'];
// @params start index, delete count, new dara
cars.splice(1, 0, 'BMW');
console.log(cars);
// ["audi", "volvo", "BMW", "benze", "honda"]
6. Concat ()
Я считаю, что все в сообществе javascript знают, что такое конкатенации. Этот метод не требует пояснений. Судя по названию, он объединяет два массива в один. Метод вызывается для первого массива и принимает в качестве аргумента второй массив.
const africa = ['nigeria', 'niger', 'ghana', 'kenya'];
const asia = ['korea', 'japan', 'vietnam', 'china'];
const countries = africa.concat(asia);
console.log(countries);
// ["nigeria", "niger", "ghana", "kenya", "korea", "japan", "vietnam", "china"]
7. Некоторые ()
Ах! вот и мой любимый метод массива. Этот метод сопоставляет каждый элемент с функцией, которую он получает, и возвращает логическое значение.
Я использовал этот метод много раз, и ниже приведен пример недавнего варианта использования.
const postcodes = ['45220', '46689', '56322', '44520', '23252', '6422'];
const { postcode } = { name: 'james', paid: true, postcode: 45220 };
const isValidPostCode = postcodes.some((code) => code === postcode);
console.log(isValidPostCode);
// true
Что здесь случилось? Допустим, мы создаем форму заказа. У нас есть определенные почтовые индексы, по которым мы доставляем товары, и мы не хотим, чтобы клиент размещал заказ в месте, которое мы не доставляем. поэтому мы извлекаем почтовый индекс, который они ввели в форму заказа (строка 2), и проверяем его с помощью метода some. В приведенном выше блоке кода isValidPostCode будет истинным, потому что почтовый индекс соответствует тому, что у нас есть внутри нашего массива почтовых индексов.
8. Сортировать ()
Не будет весело, если мы не сможем отсортировать элементы внутри массива. К счастью, есть метод, который позволяет нам это сделать. Метод сортировки в javascript возвращает массив отсортированных элементов на основе функции, которую он получает в качестве аргумента. По умолчанию сортировка выполняется по возрастанию, но мы можем это изменить.
const fruits = ['banana', 'mango', 'apple', 'kiwi'];
fruit.sort();
console.log(fruits);
// ["apple", "banana", "kiwi", "mango"]
const numbers = [9, 5, 7, 3, 2];
// descending
numbers.sort((a, b) => b - a);
console.log(numbers);
// [9, 7, 5, 3, 2]
// ascending
numbers.sort((a, b) => a - b);
console.log(numbers);
// [2, 3, 5, 7, 9]
9. FindIndex ()
Поиск индекса элемента внутри массива может быть довольно сложной задачей, особенно если этот массив очень большой. К счастью, с методом findIndex мы можем это легко сделать. Метод findIndex принимает функцию и возвращает индекс первого элемента или отрицательное значение 1, если элемент не существует.
const cars = ['audi', 'volvo', 'benz', 'honda'];
// returns true
const carIndex = cars.findIndex((car) => car === 'honda');
console.log(carIndex);
// 3
// returns false
const carIndex = cars.findIndex((car) => car === 'toyota');
console.log(carIndex);
// -1
10. Срез ()
Этот метод просматривает массив и возвращает основание фрагментированной части на основе начального индекса и количества фрагментов. требуется два аргумента. Первый аргумент - это начальный индекс, а второй аргумент - это количество фрагментов от начального индекса.
const asia = ['korea', 'japan', 'vietnam', 'china'];
// @params starting index, slice count
const sliced = asia.slice(1, 3)
console.log(sliced)
// ['japan', 'vietnam']
Вы можете проверить репозиторий github здесь. Не забудьте оставить звезду.
Спасибо за чтение, и я надеюсь, что вы что-то узнали из этой статьи.
Первоначально опубликовано на https://dev.to 8 апреля 2020 г.