Разпространеният синтаксис в JavaScript прави възможно манипулирането на низове, обекти или масиви, за да се превърнат в други форми, както се очаква. Тук Id More Academy ще предостави някои прости примери за случаи, които може да ви потрябват, когато работите по проект някой ден.

Случай 1: Разпределете масива като аргументи

Имам функция за изчисляване на средната стойност на 3 аргумента. Като на снимката по-долу.

function average(a,b,c) {
  return parseInt((a + b + c) / 3)
}

Но освен мен имам масив от 3 стойности, които искам да бъдат аргумент във функцията average()по-горе.

const digit = [3,4,3]

Ако не използвате разширен синтаксис, можете да го извикате въз основа на индекса като аргумент, като средно(цифра[0], цифра[1], цифра[2]). Но това може да бъде опростено в следния cide, ако използвате разширен синтаксис.

const result = average(...arg)
// expected value: 3

Случай 2: Обединяване на масиви

const arr1 = [1,2,3,4]
const arr2 = [1]
const arr3 = [...arr2, ...arr1]
//exprected value [1,1,2,3,4]

Използвайки sntax spreads, той може да се използва за комбиниране на 2 или повече масива, било то 1 или повече от 1 измерение. Преди да използвате този метод, уверете се, че данните, които ще се комбинират, са от тип масив, ако не ядете сливане, няма да работи.

Случай 3: Замяна на данни в обект

Нека ви дам примерни данни:

const user = {
name: "andra",
fullname: "andra full",
is_like: false,
is_follow: false
}

И програмата изпълнява някаква логика, която връща нов обект, както следва

const response = {
is_like: true,
is_follow: true
}

От обекта за връщане, моята задача е да заменя данните със същото свойство в потребителските данни, като използвам синтаксис на разпространение, кодът може да бъде направен толкова прост, колкото следното.

const nextdata = ({...user, ...response})

Причината, поради която потребителят е поставен в началото, защото това са първоначалните данни и отговорът завършва като нови данни. След това атрибутите ще бъдат съпоставени, ако са налични в старите данни, те ще бъдат заменени с нови данни, ако не са налични, ще бъде създаден нов атрибут.

Случай 4: Замяна на същите атрибути на обект

Горният случай също ще работи, ако старите данни и новите данни имат точно същото свойство, за следния пример.

const oldDataUser = {
name: "andra",
fullname: "andra full",
is_like: false,
is_follow: false
}
const newDataUser = {
name: "andra",
fullname: "andra full",
is_like: true,
is_follow: true
}
const nextDataUser = {...oldDataUser, ...newDataUser}
//expected result
// Object {
//   fullname: "andra full",
//   is_follow: true,
//   is_like: true,
//   name: "andra"
// }

Случай 5: Замяна на същите атрибути на обект с изключение на някои атрибути

Докато не открих нов случай, използвайки метода в случай 4, но има едно свойство, което не искам да включва актуализации, въпреки че има актуализации в новите данни. Свойството е is_follow. Искам винаги да използвам старата стойност, въпреки че има актуализация от новите данни. Ето го решението.

const oldDataUser = {
name: "andra",
fullname: "andra full",
is_like: false,
is_follow: false
}
const newDataUser = {
name: "andra",
fullname: "andra full",
is_like: true,
is_follow: true
}
const nextDataUser = {...oldDataUser, ...newDataUser, is_follow: false}}

Използване на метода като случай 4, но с допълнителни фиктивни данни на гърба, както желаете.

Случай 6: Комбинация от намиране на масив и разпространение на обекти

Това е следващ тип база от случаи на случаи 4 и 5, само първоначалните данни, които се притежават, са масив, състоящ се от много потребителски данни, както е показано по-долу.

const users = [
 {
  name: "andra",
  fullname: "andra full",
  is_like: false,
  is_follow: false
  },
  {
  name: "andri",
  fullname: "andri full",
  is_like: false,
  is_follow: false
 }
]

И също така получих връщане на нови данни, точно като случаи 4 и 5.

const newDataUser = {
name: "andra",
fullname: "andra full",
is_like: true,
is_follow: true
}

Следващата ми задача е да заменя някои данни в потребители, които имат име като резултат от логиката. В този случай получавам името „Андре“. Решението е да се използва масив за съпоставяне, след което да се извърши кондиционирането, ако името е същото като newDataUser.name, тогава разпространението на обекта започва.

users.map((n,key) => {
  if(n.name === newDataUser.name)
    users[key] = {...n, ...newDataUser}
})

справка

https://academy.byidmore.com/post/Mastering-Javascript-Spread-Syntax-5c1b3c579c52eb5246fdce7c