- Использование массива в качестве параметра функции в JavaScript
- Как использовать массивы в качестве параметров функции
- Передача массивов в функции с помощью оператора spread
- Передача массивов в функции с помощью apply()
- Javascript передача массива функциями
- Объединение массивов
- Передача аргументов функции
- Копирование массивов
- Как передать массив в функцию js
- How to pass an array as argument to a function in 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 соответственно.
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 по прежнему хранит ссылку на старый объект.
Как передать массив в функцию 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 .
How to pass an array as argument to a function in javascript?
I’m trying to make helper functions to make use of the Google Analytics API, and I have a simple problem building strings. The scenario is, I have to apply a filter, and there may be n number of filters (a nominal amount, not more than 128 anyhow). I wanted to write a function which can take in the n strings and combine them with comma-separation in between. I don’t know if the number of arguments can be variable in javascript, and if it can take arrays as arguments in javascript (I am a newbie to JS), but I see no difference as variables are simply var and there is no datatype anywhere in JS (I come from a C++/Java background and find it confusing as it is). So I tried passing an array as an argument to a function so that the no. of things I can work with can be dynamic, decided by the elements in the array. When I started searching for solutions, I came across this page. After that I recently came across this thread which also refers the same link and the format they have provided does me no good. For the sake of clarity, let me provide the function definition I’ve written.
/** * Utility method to build a comma-ed string from an array of strings * for the multiple-condition requests to the GA API */ function buildString(strArray)
buildString.apply(this,[desc(visits),source])
where desc(visits) and source are both strings, so I assumed I’m sending an array of strings. Strangely, both this and null in the apply() call to the buildString function give me «0,1» as the return value. Please tell me where I’m going wrong. Am I passing the array in a wrong manner? Or is my function definition wrong? Or is there some other simpler way to achieve what I’m trying?