Разпространеният синтаксис в 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