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

Спред-синтаксис . . .

Упрощает создание объектов и массивов на основе других объектов и массивов.

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

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

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

Пример

Скопировать ссылку «Пример» Скопировано

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

 function multiplyThreeNumbers(a, b, c)  return a * b * c> const nums = [1, 2, 3] console.log(multiplyThreeNumbers(. nums))// 6 function multiplyThreeNumbers(a, b, c)  return a * b * c > const nums = [1, 2, 3] console.log(multiplyThreeNumbers(. nums)) // 6    Скопировать Скопировано Не удалось скопировать   

В массиве скопировать элементы из другого массива в новый:

 const donor = ['это', 'старые', 'значения']const newArray = [. donor, 1, true, 'мама'] console.log(newArray)// ['это', 'старые', 'значения', 1, true, 'мама'] const donor = ['это', 'старые', 'значения'] const newArray = [. donor, 1, true, 'мама'] console.log(newArray) // ['это', 'старые', 'значения', 1, true, 'мама']    Скопировать Скопировано Не удалось скопировать   

У объекта скопировать свойства из другого объекта в новый:

 const persona = const userData = console.log(userData)// // name: 'Иван',// lastName: 'Объектов',// username: 'killer3000'// > const persona =  name: 'Иван', lastName: 'Объектов'> const userData =  . persona, username: 'killer3000' > console.log(userData) // // name: 'Иван', // lastName: 'Объектов', // username: 'killer3000' // >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Спред-синтаксис легче всего изучать на примерах. Есть три контекста, в которых он применяется.

При вызове функции

Скопировать ссылку «При вызове функции» Скопировано

Часто встречается ситуация, когда мы хотим использовать данные из итерируемой коллекции в качестве аргументов функции. Чаще всего такая коллекция — массив. Если функция не умеет принимать массив аргументом, то придётся доставать элементы вручную:

 function multiplyThreeNumbers(a, b, c)  return a * b * c> const nums = [1, 2, 3] console.log(multiplyThreeNumbers(nums[0], nums[1], nums[2]))// 6 function multiplyThreeNumbers(a, b, c)  return a * b * c > const nums = [1, 2, 3] console.log(multiplyThreeNumbers(nums[0], nums[1], nums[2])) // 6    Скопировать Скопировано Не удалось скопировать   

Если элементов становится больше, доставать значения вручную становится неудобно. Чтобы решить эту проблему, в старых версиях языка использовали метод apply ( ) . Этот метод принимает первым аргументом значение this , а вторым — список аргументов для вызова функции:

 function multiplyThreeNumbers(a, b, c)  return a * b * c> const nums = [1, 2, 3] console.log(multiplyThreeNumbers.apply(null, nums))// 6 function multiplyThreeNumbers(a, b, c)  return a * b * c > const nums = [1, 2, 3] console.log(multiplyThreeNumbers.apply(null, nums)) // 6    Скопировать Скопировано Не удалось скопировать   

Такой синтаксис сложно читается, его нельзя использовать при создании объектов с помощью конструктора new . Его упростили до спред-синтаксиса. В этом случае элементы как бы выкладываются из списка в нужном порядке:

 function multiplyThreeNumbers(a, b, c)  return a * b * c> const nums = [1, 2, 3] console.log(multiplyThreeNumbers(. nums))// 6 function multiplyThreeNumbers(a, b, c)  return a * b * c > const nums = [1, 2, 3] console.log(multiplyThreeNumbers(. nums)) // 6    Скопировать Скопировано Не удалось скопировать   

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

 function multiplyThreeNumbers(a, b, c)  return a * b * c> const nums = [1, 2, 3, 5, 6] console.log(multiplyThreeNumbers(. nums))// 6 function multiplyThreeNumbers(a, b, c)  return a * b * c > const nums = [1, 2, 3, 5, 6] console.log(multiplyThreeNumbers(. nums)) // 6    Скопировать Скопировано Не удалось скопировать   

При создании массивов с помощью литерала [ ]

Скопировать ссылку «При создании массивов с помощью литерала []» Скопировано

Спред-синтаксис решает задачу создания нового массива с использованием данных из другого массива. Без него неудобно создавать массив, который содержит элементы другого. Приходится использовать методы массива, например, concat ( ) :

 const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']const watchedVideos = ['Rick&Morty', 'lofi hip hop radio'].concat(watchedMovies) console.log(watchedVideos)// ['Rick&Morty', 'lofi hip hop radio', 'Rocky', 'Terminator 2', 'The Matrix'] const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix'] const watchedVideos = ['Rick&Morty', 'lofi hip hop radio'].concat(watchedMovies) console.log(watchedVideos) // ['Rick&Morty', 'lofi hip hop radio', 'Rocky', 'Terminator 2', 'The Matrix']    Скопировать Скопировано Не удалось скопировать   

Спред решает эту проблему лучше:

 const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']const watchedVideos = ['Rick&Morty', 'lofi hip hop radio', . watchedMovies] console.log(watchedVideos)// ['Rick&Morty', 'lofi hip hop radio', 'Rocky', 'Terminator 2', 'The Matrix']  const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix'] const watchedVideos = ['Rick&Morty', 'lofi hip hop radio', . watchedMovies] console.log(watchedVideos) // ['Rick&Morty', 'lofi hip hop radio', 'Rocky', 'Terminator 2', 'The Matrix']    Скопировать Скопировано Не удалось скопировать   

Таким образом можно создать копию существующего массива:

 const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']const myWatchedMovies = [. watchedMovies] const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix'] const myWatchedMovies = [. watchedMovies]    Скопировать Скопировано Не удалось скопировать   

Или склеить несколько массивов в один:

 const movies = ['Rocky', 'Terminator 2', 'The Matrix']const series = ['Prison Break', 'Rick&Morty', 'Lost'] const watched = [. movies, . series]// [// 'Rocky',// 'Terminator 2',// 'The Matrix',// 'Prison Break',// 'Rick&Morty',// 'Lost'// ] const movies = ['Rocky', 'Terminator 2', 'The Matrix'] const series = ['Prison Break', 'Rick&Morty', 'Lost'] const watched = [. movies, . series] // [ // 'Rocky', // 'Terminator 2', // 'The Matrix', // 'Prison Break', // 'Rick&Morty', // 'Lost' // ]    Скопировать Скопировано Не удалось скопировать   

При использовании спред-синтаксиса элементы массива копируются только на один уровень вложенности. Если массив содержит объекты, то это будут те же самые объекты, что и в исходном массиве. Для глубокого копирования пользуйтесь библиотеками, например, lodash

Пример поведения с уровнем вложенности больше одного:

 const users = [< name: 'Иван', lastName: 'Объектов' >]const copyUsers = [. users] copyUsers[0].name = 'Николай'console.log(users[0])// const users = [ name: 'Иван', lastName: 'Объектов' >] const copyUsers = [. users] copyUsers[0].name = 'Николай' console.log(users[0]) //   Скопировать Скопировано Не удалось скопировать   

При создании объекта с помощью литерала <>

Скопировать ссылку «При создании объекта с помощью литерала <>» Скопировано

По аналогии с массивами, спред-синтаксис решает проблему копирования свойств в новый объект. В версии языка без спреда для копирования использовался метод Object . assign ( ) , который принимал два объекта — куда копировать свойства и откуда:

 const person = const userData = Object.assign(< username: 'killer3000' >, person) console.log(userData)// // name: 'Иван',// lastName: 'Объектов',// username: 'killer3000'// > const person =  name: 'Иван', lastName: 'Объектов' > const userData = Object.assign( username: 'killer3000' >, person) console.log(userData) // // name: 'Иван', // lastName: 'Объектов', // username: 'killer3000' // >    Скопировать Скопировано Не удалось скопировать   

Спред упрощает код и делает его читабельнее:

 const person = const userData = console.log(userData)// // name: 'Иван',// lastName: 'Объектов',// username: 'killer3000'// > const person =  name: 'Иван', lastName: 'Объектов' > const userData =  username: 'killer3000', . person > console.log(userData) // // name: 'Иван', // lastName: 'Объектов', // username: 'killer3000' // >    Скопировать Скопировано Не удалось скопировать   

Если свойства в новом и старом объекте совпадают, то будет использоваться значение свойства, которое шло последним:

 const person = const userData = console.log(userData)// const person =  name: 'Иван', lastName: 'Объектов' > const userData =  name: 'Николай', . person > console.log(userData) //   Скопировать Скопировано Не удалось скопировать   

Если поставить спред в начало, то будет использоваться новое имя:

 const person = const userData = console.log(userData)// const person =  name: 'Иван', lastName: 'Объектов' > const userData =  . person, name: 'Николай' > console.log(userData) //   Скопировать Скопировано Не удалось скопировать   

При использовании спред-синтаксиса свойства объекта копируются только на один уровень вложенности. Это называется поверхностным копированием. Для глубокого копирования пользуйтесь библиотеками, например, lodash

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

🛠 Спред на объектах используют в библиотеке React. Программист может передать в функцию объект с произвольными свойствами, но мы хотим запретить устанавливать некоторые из них. В этом случае создаётся новый объект, в который сначала копируются присланные значения, а потом значения «запрещённых» свойств. В этом случае даже если запрещённое свойство было передано, оно будет перезаписано:

 function Headline(props)  const filteredProps = return createElement('h1', filteredProps, 'Текст заголовка')> function Headline(props)  const filteredProps = . props, ariaHidden: false> return createElement('h1', filteredProps, 'Текст заголовка') >    Скопировать Скопировано Не удалось скопировать   

Источник

Использование массива в качестве параметра функции в 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 соответственно.

Источник