ES6 Методы массива

Существует много методов массивов в JavaScript.

Один из самых полезных в React — это метод массива .map().

Метод .map() позволяет запустить функцию на каждом элементе массива, возвращая новый массив в качестве результата.

В React метод map() часто используется для генерации списков.

Пример

Генерация списка элементов из массива.


const myArray = ['яблоко', 'банан', 'апельсин'];

const myList = myArray.map((item) => <p>{item}</p>)

Помимо метода .map(), в React также широко применяются следующие методы массивов JavaScript:

1. .filter()

Метод фильтрует массив, оставляя только те элементы, которые соответствуют условию, переданному в функцию фильтра.

Пример

Отфильтруем список пользователей по возрасту старше 18 лет.


const users = [
  { id: 1, name: 'Иван', age: 25 },
  { id: 2, name: 'Анна', age: 16 },
  { id: 3, name: 'Сергей', age: 30 }
];

const adults = users.filter(user => user.age >= 18);
// adults === [{id: 1, name: 'Иван', age: 25}, {id: 3, name: 'Сергей', age: 30}]

2. .reduce()

Метод сводит массив к единственному значению, выполняя операцию агрегирования всех элементов.

Пример

Найдем сумму цен товаров в корзине покупок.


const cartItems = [
  { productName: 'Хлеб', price: 50 },
  { productName: 'Молоко', price: 80 },
  { productName: 'Сыр', price: 120 }
];

const totalPrice = cartItems.reduce((acc, currItem) => acc + currItem.price, 0);
// totalPrice === 250

3. .find()

Возвращает первый найденный элемент массива, соответствующий указанному условию.

Пример

Поиск пользователя по имени.


const users = [
  { id: 1, name: 'Иван' },
  { id: 2, name: 'Анна' },
  { id: 3, name: 'Сергей' }
];

const foundUser = users.find(user => user.name === 'Анна');
// foundUser === {id: 2, name: 'Анна'}

4. .forEach()

Выполняет указанную функцию для каждого элемента массива. Однако этот метод возвращает undefined и чаще всего используется лишь для побочных эффектов, таких как вызов API или выполнение операций с DOM.

Пример

Проходим по каждому элементу массива и выводим его в консоль.


const fruits = ['яблоко', 'груша', 'виноград'];
fruits.forEach(fruit => console.log(fruit));

5. .sort()

Сортирует элементы массива по указанному критерию.

Пример

Сортируем список пользователей по возрастанию возраста.


const users = [
  { id: 1, name: 'Иван', age: 25 },
  { id: 2, name: 'Анна', age: 16 },
  { id: 3, name: 'Сергей', age: 30 }
];

users.sort((a, b) => a.age - b.age);
// users === [{id: 2, name: 'Анна', age: 16}, {id: 1, name: 'Иван', age: 25}, {id: 3, name: 'Сергей', age: 30}]

Когда использовать?

  • .map() — идеально подходит для преобразования массива в набор компонентов, отображающихся на экране.
  • .filter() — полезен для удаления ненужных элементов из списка или подготовки данных перед рендерингом.
  • .reduce() — нужен для агрегации данных, подсчета сумм, нахождения среднего значения и т.п.
  • .find() — удобен для быстрого поиска конкретного элемента в списке.
  • .forEach() — редко используется в компонентах React, так как не создает нового массива, однако иногда бывает полезным для обхода коллекции и выполнения сторонних действий.
  • .sort() — помогает организовать упорядоченность данных перед отображением.

Правильное использование этих методов позволяет эффективно обрабатывать данные и улучшать производительность приложений React.