Javascript функции параметры массивы

Использование массива в качестве параметра функции в JavaScript

В Javascript у нас часто есть данные, хранящиеся в виде массивов, и функции, которые мы хотим вызвать. Иногда данные в массивах — это именно те данные, которые мы хотим передать в функцию. К счастью, в Javascript есть способы использовать массивы в качестве входных значений для функций. Давайте рассмотрим, как использовать массивы в качестве параметров функций.

Как использовать массивы в качестве параметров функции

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

let numbers = [ 1, 2, 3 ] let myFunction = (x, y, z) =>  return x + y + z; > // Returns 6 let getCalculation = myFunction(numbers[0], numbers[1], numbers[2]); 

Конечно, это может быть довольно раздражающим, особенно при работе с функциями, которые имеют очень длинные списки свойств. Поэтому Javascript предоставляет нам два способа использования массивов в качестве параметров функций — apply() и оператор spread.

Передача массивов в функции с помощью оператора spread

Современный и самый простой способ передать массив в функцию — это использовать оператор spread. Оператор spread ( . ) просто добавляется перед массивом. Используя наш предыдущий пример, это выглядит следующим образом:

let numbers = [ 1, 2, 3 ] let myFunction = (x, y, z) =>  return x + y + z; > // Returns 6 let getCalculation = myFunction(. numbers); 

Мы также можем напрямую добавить массив в функцию, без использования переменной. Например:

let myFunction = (x, y, z) =>  return x + y + z; > // Returns 6 let getCalculation = myFunction(. [ 1, 2, 3 ]); 

Если вы хотите узнать обо всех возможностях оператора spread, ознакомьтесь с моим руководством по этому вопросу здесь.

Передача массивов в функции с помощью apply()

Другой способ сделать это — использовать apply() . Если вы не знакомы с основным вариантом использования apply() , ознакомьтесь с моим полным руководством по этому объекту Javascript здесь.

В конечном итоге, apply() позволяет нам взять функцию и передать в нее массив. Первый атрибут apply() фактически ссылается на объект this , который мы хотим использовать в функции. Второй аргумент — это массив всех параметров для этой функции. Это означает, что вы можете определить структуру this , а также передать массив в саму функцию.

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

let myFunction = (x, y, z) =>  return x + y + z; > // Returns 6 let getCalculation = myFunction.apply(<>, [ 1, 2, 3 ]); 

Здесь я оставляю объект this пустым, поэтому если бы мы использовали this в myFunction , это был бы пустой объект — именно это делает первый аргумент apply() . Второй — это наш массив [1, 2, 3] , ссылающийся на x , y и z соответственно.

Источник

Как передать массив в функцию js

При объявлении (создании) функции в js мы можем в круглых скобках задать параметры этой функции. Параметры — это то, что мы планируем передавать внутрь нашей функции при её вызове. Те конкретные значения параметров, с которыми мы вызываем функцию, называют аргументами функции.

Аргументами функции могут выступать любые нужные нам данные, в том числе и массивы. В качестве примера рассмотрим функцию, которая принимает массив чисел и умножает каждое число на 2.

// объявляем функцию и задаем параметр array const multiplyByTwo = (array) =>  return array.map((number) => number * 2); >; // массив чисел, который мы хотим передать в функцию const numbers = [1, 2, 3, 4, 5]; // вызываем функцию и в качестве аргумента передаем в неё массив numbers console.log(multiplyByTwo(numbers)) // => [2, 4, 6, 8, 10] 

Пример функции myFunction с передачей массива myArray через метод apply :

function myFunction(a, b, c)  console.log(a + b + c); > const myArray = [1, 2, 3]; myFunction.apply(null, myArray); 

В данном примере мы создали функцию myFunction , которая принимает три аргумента и выводит их сумму в консоль. Затем мы создали массив myArray , содержащий три числа. И, наконец, мы вызвали функцию myFunction и передали ей массив myArray через метод apply . В результате в консоль будет выведено число 6 , которое является суммой элементов массива myArray .

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

Источник

Javascript функции параметры массивы

spread-оператор (оператор . ) позволяет разложить массив на отдельные значения. Для этого перед массивом ставится многоточие:

const users = ["Tom", "Sam", "Bob"]; console.log(. users); // Tom Sam Bob

И, применяя этот оператор, мы можем наполнить один массив значениями из другого массива:

const users = ["Tom", "Sam", "Bob"]; console.log(users); // ["Tom", "Sam", "Bob"] const people1 = [. users]; const people2 = new Array(. users); const people3 = Array.of(. users); console.log(people1); // ["Tom", "Sam", "Bob"] console.log(people2); // ["Tom", "Sam", "Bob"] console.log(people3); // ["Tom", "Sam", "Bob"]

Объединение массивов

С помощью spread-оператора можно при создания нового массива передать ему значения сразу нескольких массивов. Например:

const men = ["Tom", "Sam", "Bob"]; const women = ["Kate", "Alice", "Mary"]; const people = [. men, "Alex", . women]; console.log(people); // ["Tom", "Sam", "Bob", "Alex", "Kate", "Alice", "Mary"]

В данном случае в массив people передаются значения из массивов men, women, и, кроме того, мы можем дополнительно передать отдельные значения, которые не входят в эти массивы.

Передача аргументов функции

Подобным образом можно передавать из массива значения параметрам функции:

const people = ["Tom", "Sam", "Bob"]; function print(first, second, third) < console.log(first); console.log(second); console.log(third); >print(. people); // Tom // Sam // Bob

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

Стоит отметить, что это не то же самое, что передать при вызове функции массив:

В этом случае весь массив будет передан первому параметру функции — параметру first , а остальные будут иметь значение undefined .

Еще один пример передачи параметрам значений из массива:

function sum(a, b, c) < const d = a + b + c; console.log(d); >sum(1, 2, 3); const nums = [4, 5, 6]; sum(. nums);

Во втором случае в функцию передается числа из массива nums. Но чтобы передавался не просто массив, как одно значение, а именно числа из этого массива, применяется spread-оператор (многоточие . ).

Если количество параметров функции меньше количества элементов массива, то оставшие элементы массива просто будут отброшены. Если количество параметров больше количества элементов массива, то параметры, которым не досталось значений, получат значение undefined :

const people1 = ["Tom", "Sam", "Bob", "Mike"]; const people2 = ["Alex", "Bill"]; function print(first, second, third)< console.log(`$, $, $`); > print(. people1); // Tom, Sam, Bob print(. people2); // Alex, Bill, undefined

Копирование массивов

spread-оператор предоставляет самый простой способ скопировать элементы одного массива в другой. Однако тут надо соблюдать осторожность. Рассмотрим пример:

const people = ["Sam", "Tom", "Bob"]; const employees = [. people]; employees[0] = "Dan"; console.log(employees); // ["Dan", "Tom", "Bob"] console.log(people); // ["Sam", "Tom", "Bob"]

Здесь создаются два массива. При этом массиву employees передаются элементы массива people. Далее мы меняем первый элемент массива employees. И по консольному выводу мы можем увидеть, что изменение одного массива не повлияло на другой массив.

Однако что будет, если мы скопируем массив объектов:

const people = [, , ]; const employees = [. people]; //employees[0] = ; employees[0].name = "Dan"; console.log(employees); // [, , ] console.log(people); // [, , ]

Теперь массив people предоставляет массив объектов, где каждый объект имеет одно свойство — name. Далее мы изменяем значение свойства name у первого элемента.

И консольный вывод нам покажет, что изменение одного массива привело к изменению второго массива. Поскольку объекты — представляют ссылочный тип, и при копировании в новый массив передается не копия объекта (как в случае со строками), а сам объект. Поэтому первый элемент одного массива и первый элемент второго массива фактически будет представлять один и тот же объект.

Однако мы можем полностью заменить элемент одного массива на другой объект, и тогда элемент второго массива по прежнему будет хранить ссылку на старый объект и будет не зависеть от первого массива:

const people = [, , ]; const employees = [. people]; employees[0] = ; console.log(employees); // [, , ] console.log(people); // [, , ]

В данном случае первый элемент массива employees заменяется на ссылку на новый объект, а первый элемент массива people по прежнему хранит ссылку на старый объект.

Источник