آشنایی با عملگر Spread در جاوااسکریپت

ارسال شده توسط توسط sadegh_khan 7 دقیقه مطالعه

با سلام و درود، خب با یکی از عملگرهای رایج و مرسوم جاوا اسکریپت به نام Spread در خدمتتون هستم 🙂 عملگر Spread ( عملگر سه نقطه )، عملگری کاربردی و سینتکسی سریع برای افزودن آیتم ها به آرایه ها، ترکیب آرایه ها یا Objectها و همچنین دادن آیتم های یک آرایه به عنوان آرگومان های یک تایع.

در جاوا اسکریپت، عملگر Spread با استفاده از سه نقطه (…) به گستردن یک شی ای که قابل تکرار هست به لیستی از آرگومان ها استفاده میشه(ممکن یک مقدار این تعریف گنگ باشه، اجازه بدید با هم پیش بریم تا این تعریف براتون کاملا واضح بشه).

زمانی که ..arr به هنگام فراخوانی یک تابع استفاده می شود، شی arr که قابل تکرار هست را به شکل یک لیست گسترده اش کرده و به عنوان آرگومان به تایع می دهد.

JavaScript.info

این عملگر در سال ۲۰۱۵ در ES6 به همراه پارامترهای rest ارائه شد که دقیقا سینتکس مشابهی دارند (سه نقطه – … )

خب همین اول کار به مثال زیر توجه کنید:

Math.max(1,3,5) // 5
Math.max([1,3,5]) // NaN

تلاش برای دادن آرایه به عنوان آرگومان ورودی یک تابع با این شرط که آیتم های آرایه به عنوان آرگومان های ورودی تابع در نظر گرفته شوند، می بینید که در مثال بالا به مشکل بر میخوریم و نتیجه NAN تولید می شود. اما به سه نقطه قبل آرایه این مشکل حل میشه :

Math.max(...[1,3,5]) // 5

عملگر spread ، آرایه را به آرگومان های جدا از هم گسترده می کند.

عملگر Spread دیگر چه کارهایی می کند؟

این عملگر برای task های رایج متفاوت و زیادی در جاوا اسکریپت به کار می آید، از جمله:

  • گپی کردن آرایه
  • ترکیب یا به هم چسباندن آرایه ها
  • استفاده از توابع ریاضی
  • استفاده از آرایه به عنوان لیست آرگومان
  • افزودن یک آیتم به یک لیست
  • افزودن به stateدر react
  • ترکیب کردن object ها
  • تبدیل NodeList به آرایه

در هر مورد، سینتکس sppread یک شی قابل تکرار که معمولا آرایه است را گسترده می کند (هر شی قابل تکراری همچون stringنیز می تواند باشد)

مثال هایی از استفاده عملگر spread در جاوا اسکریپت

[...["😋😛😜🤪😝"]] // Array [ "😋😛😜🤪😝" ]
[..."🙂🙃😉😊😇🥰😍🤩!"] // Array(9) [ "🙂", "🙃", "😉", "😊", "😇", "🥰", "😍", "🤩", "!" ]

const hello = {hello: "😋😛😜🤪😝"}
const world = {world: "🙂🙃😉😊😇🥰😍🤩!"}

const helloWorld = {...hello,...world}
console.log(helloWorld) // Object { hello: "😋😛😜🤪😝", world: "🙂🙃😉😊😇🥰😍🤩!" }

حال به مثال برای کاربرد های spreadکه رد بالاتر قید شده بود می پردازیم:

کپی کردن آرایه با استفاده از عملگر spread در جاوا اسکریپت

const fruits = ['🍏','🍊','🍌','🍉','🍍']
const moreFruits = [...fruits];
console.log(moreFruits) // Array(5) [ "🍏", "🍊", "🍌", "🍉", "🍍" ]
fruits[0] = '🍑'
console.log(...[...fruits,'...',...moreFruits]) //  🍑 🍊 🍌 🍉 🍍 ... 🍏 🍊 🍌 🍉 🍍

به هم چسباندن آرایه ها با استفاده از عملگر spread در جاوا اسکریپت

const myArray = [`🤪`,`🐻`,`🎌`]
const yourArray = [`🙂`,`🤗`,`🤩`]
const ourArray = [...myArray,...yourArray]
console.log(...ourArray) // 🤪 🐻 🎌 🙂 🤗 🤩

استفاده از عملگر spread در توابع ریاضی جاوا اسکریپت

یکی از بهترین مثال ها برای استفاد عملگر spread ، مثال توابع ریاضی در جاوا اسکریپت همانند  Math.min() و Math.max() هست که هر جفتشان لیستی از آرگومان ها می خواهند و آرایه را به عنوان آرگومان ورودی قبول نمی کنند:

const numbers = [37, -17, 7, 0]
console.log(Math.min(numbers)) // NaN
console.log(Math.min(...numbers)) // -17
console.log(Math.max(...numbers)) // 37

استفاده از آرایه به عنوان آرگومان با استفاده از عملگر spreadدر جاوا اسکریپت

const fruitStand = ['🍏','🍊','🍌']
const sellFruit = (f1, f2, f3) => { console.log(`Fruits for sale: ${f1}, ${f2}, ${f3}`) }
sellFruit(...fruitStand) // Fruits for sale: 🍏, 🍊, 🍌
fruitStand.pop()
fruitStand.pop()
fruitStand.push('🍉')
fruitStand.push('🍍')
sellFruit(...fruitStand) // Fruits for sale: 🍏, 🍉, 🍍
fruitStand.pop()
fruitStand.pop()
sellFruit(...fruitStand,'🍋') // Fruits for sale: 🍏, 🍋, undefined

افزودن آیتم به لیست با استفاده از عملگر Spread در JavaScript

const fewFruit = ['🍏','🍊','🍌']
const fewMoreFruit = ['🍉', '🍍', ...fewFruit]
console.log(fewMoreFruit) //  Array(5) [ "🍉", "🍍", "🍏", "🍊", "🍌" ]

افزودن به State در react ، با استفاده از عملگر Spread در جاوااسکریپت

خب با استفاده از عملگر spread ، تفزودن یک ایتم به آرایه در state ری اکت به سادگی انجام می شود. به مثال زیر توجه داشته باشید (بیشتر بخوانید):

import React, { useState } from "react"
import ReactDOM from "react-dom"

import "./styles.css"

function App() {
  // React Hooks declarations
  const [searches, setSearches] = useState([])
  const [query, setQuery] = useState("")

  const handleClick = () => {
    // Add the search term to the list onClick of Search button
    // (Actually searching would require an API call here)

    // Save search term state to React Hooks
    setSearches(searches => [...searches, query])
  }
  
  // ...

ترکیب Objectها با استفاده از عملگر spread در JavaScript 

const objectOne = {hello: "🤪"}
const objectTwo = {world: "🐻"}
const objectThree = {...objectOne, ...objectTwo, laugh: "😂"}
console.log(objectThree) // Object { hello: "🤪", world: "🐻", laugh: "😂" }
const objectFour = {...objectOne, ...objectTwo, laugh: () => {console.log("😂".repeat(5))}}
objectFour.laugh() // 😂😂😂😂😂

نکته: یکی از نکات اصلی کپی کردن با حفظ مرجع هست، یعنی اگه با استفاده از spreadکپی انجام دهید و آرایه اصلی را تغییر دهید، آرایخه کپی شده تغییر نمی کند.

const array = ['😉','😊','😇']
const copyWithEquals = array // Changes to array will change copyWithEquals
const copyWithSpread = [...array] // Changes to array will not change copyWithSpread

array[0] = '😡' // Whoops, a bug

console.log(...array) // 😡 😊 😇
console.log(...copyWithEquals) // 😡 😊 😇
console.log(...copyWithSpread) // 😉 😊 😇

جمع بندی و نتیجه گیری

عملگر Spread می تواند آیتمی که دارای المان های قابل تکرار باشد، مانند string یا یک آرایه را به المان های جدا از هم اسپلیت کند ( CodinGame.com).

منابع بیشتر :

https://www.geeksforgeeks.org/javascript-spread-operator/

https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

https://zendev.com/2018/05/09/understanding-spread-operator-in-javascript.html