JavaScript имеет большое количество функций, которые помогут вам работать с массивами. Вот несколько советов по использованию 3 моих любимых.

карта

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

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

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

const directory = [
  {
    firstName: "Joe",
    lastName: "Williams",
    position: "Accountant",
    salary: 41000
  },{
    firstName: "Helen",
    lastName: "Johnson",
    position: "Manager",
    salary: 125000
  },{
    firstName: "Pat",
    lastName: "Rogers",
    position: "Receptionist",
    salary: 32000
  }
]

Теперь представьте, что вам действительно нужен массив имен сотрудников, где имя и фамилия объединены в одну строку. Функция карты может быстро выполнить это преобразование следующим образом.

const names = directory.map(person => `${person.firstName} ${person.lastName}`);

Это возвращает массив строк, как показано здесь.

[
  "Joe Williams",
  "Helen Johnson",
  "Pat Rogers"
]

фильтр

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

Допустим, используя тот же массив каталогов сотрудников, вы собираетесь выполнить операцию для всех сотрудников с зарплатой выше 40 000. Найти это подмножество было бы легко с помощью следующей строки кода.

const salaryOver40k = directory.filter(person => person.salary > 40000);

Как вы можете видеть, мы просто предоставили функцию, которая проверяет, превышает ли свойство «зарплата» объекта значение 40 000. Если это так, он возвращает true, что означает, что он будет включен в отфильтрованный выходной массив.

Результирующий массив включает в себя первые два объекта, так как они имеют зарплату более 40 000, но пропустит третий.

присоединиться

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

Например, если мы воспользуемся нашим массивом комбинированных строк имени и фамилии, указанным выше, и напечатаем его по умолчанию, мы получим следующее:

document.write(names);

// Joe Williams,Helen Johnson,Pat Rogers

А что, если вам тоже нужен интервал? Или если мы хотим использовать точки с запятой вместо запятых. Мы могли бы сделать что-то вроде этого.

document.write(names.join("; "));

// Joe Williams; Helen Johnson; Pat Rogers

Объединение функций

Вы также можете связать эти функции вместе, если хотите. Например, следующий код выведет полные имена сотрудников, которые зарабатывают более 40 000 человек.

const names = directory
  .filter(person => person.salary > 40000)
  .map(person => `${person.firstName} ${person.lastName}`)
  .join("; ");

document.write(names)

Многие другие функции на выбор

Я выбрал некоторые из моих любимых, но есть из чего выбирать. Я упомянул, что ранее писал о функции сортировки, что является еще одним очень полезным. Конечно, forEach тоже часто используется, но большинство разработчиков, вероятно, уже знают его.

Какие из них ваши любимые?