Массивы - важная часть 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 г.