Как передать массив в функцию JavaScript: простые способы и примеры

hannadev

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

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

Прямая передача массива как параметра

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

Рассмотрим функцию для суммы элементов. Мы создаем массив чисел, передаем его и получаем результат. Такой подход работает везде - от скриптов до фреймворков. Но помните: если не хотите менять исходный массив, создайте копию с помощью slice() или spread-оператора.

Вот базовый пример:

function sumArray(arr) {
  return arr.reduce((sum, num) => sum + num, 0);
}

const numbers = [1, 2, 3, 4];
console.log(sumArray(numbers)); // 10

Плюсы прямой передачи: Код читаемый, не требует дополнительных методов.
Нюанс: Массив передается по ссылке - изменения видны снаружи.
Используйте для простых задач, как подсчет или поиск максимума.

Способ	Синтаксис	Пример результата
Прямая	function fn(arr) {} fn([1,2])	[1,2] внутри fn
По ссылке	arr.push(3)	Оригинал меняется

Использование spread-оператора для аргументов

Spread-оператор (…) разворачивает массив в отдельные аргументы. Это полезно, когда функция ожидает не массив, а список параметров. Метод гибкий и современный, работает в ES6+.

Представьте функцию для приветствия нескольких человек. Без spread пришлось бы писать имена вручную. С ним передаем массив имен - и все работает. Это экономит время при динамических данных.

Пример с математикой:

function maxNumber(a, b, c) {
  return Math.max(a, b, c);
}

const vals = [5, 12, 3];
console.log(maxNumber(...vals)); // 12

Разворачивает массив в аргументы: удобно для Math.max() или custom-функций.
Ограничение: Фиксированное число аргументов - для переменного используйте apply.
Идеально для функций вроде console.log(…arr).

Сравнение spread и прямой передачи:

Метод	Код	Когда использовать
Spread	fn(…arr)	Несколько аргументов
Прямая	fn(arr)	Обработка массива целиком
Apply	fn.apply(null, arr)	Старые браузеры

Метод apply и его применение

Метод apply() передает массив как аргументы, привязывая this к объекту. Это альтернатива spread для старого кода. Функция получает элементы массива по отдельности, что полезно для legacy-проектов.

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

Практический пример:

function greet(first, last) {
  console.log(`Привет, ${first} ${last}`);
}

const person = ['Анна', 'Иванова'];
greet.apply(null, person); // Привет, Анна Иванова

thisArg: Первый параметр - контекст выполнения.
Совет: В новых проектах предпочитайте spread - короче и быстрее.
Подходит для функций с переменным числом аргументов.

Метод	Преимущества	Недостатки
apply()	Работает везде	Синтаксис устаревший
Spread	Короткий код	Только ES6+

Обработка массивов внутри функций

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

Например, удвоим числа. Map создаст новый массив без мутации оригинала. Такие методы цепочечны - можно комбинировать filter и reduce. Это ускоряет разработку сложной логики.

Код с map:

function doubleArray(arr) {
  return arr.map(num => num * 2);
}

const orig = [1, 2, 3];
console.log(doubleArray(orig)); // [2, 4, 6]

forEach: для побочных эффектов, как вывод в консоль.
map/filter/reduce: Возвращают новый массив - иммутабельность.
Цепочки: arr.filter().map().reduce().

Методы массивов на практике

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

Рассмотрим поиск четных чисел. Filter проверит условие для каждого. Reduce посчитает сумму. Комбинации дают гибкость без циклов for.

Пример reduce:

function findEven(arr) {
  return arr.filter(num => num % 2 === 0);
}

Эффективность: Методы оптимизированы движком V8.
Нюанс: Избегайте мутации в колбэках.
Для больших массивов - пагинация или генераторы.

Ключевые приемы для надежного кода

В реальных проектах учитывайте типы данных и edge-кейсы. Проверяйте, что параметр - массив с помощью Array.isArray(). Обрабатывайте пустые массивы.

Используйте деструктуризацию для удобства: function fn([first, …rest]). TypeScript добавит типизацию. Тестируйте на разных браузерах.

Пример с проверкой:

function safeSum(arr) {
  if (!Array.isArray(arr)) return 0;
  return arr.reduce((a, b) => a + b, 0);
}

Коротко о нюансах

Массивы в JS - объекты, передача по ссылке требует внимания. Spread и apply решают задачи с аргументами. Методы вроде map делают код выразительным. Дальше экспериментируйте с async/await в функциях с массивами или React-хуками.