spread

Три точки "..." в JS - Пояснение Spread и Rest

Наши соц. сети: instagram, fb, tg

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

Такой синтаксис применяется для spread, rest операторов. Я проясню одну вещь, прежде чем мы начнем, синтаксис одинаков в обоих случаях, но варианты использования имеют некие различия.

Поскольку синтаксис один и тот же, он может быть очень запутанным, особенно во время собеседования (ты при этом очень волнуешься), когда интервьюер пытается тебя обмануть. Поверь мне, я допустил ошибки в своем первом собесе JS 😅.

Spread

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


const newArray = [...oldArray, 1, 2]

const newObject = [...oldObject, newProp : 'a']


Ты можешь быстро проверить примеры ниже, чтобы лучше это понять.

массивы


const numbers = [1, 2, 3, 4]

console.log([...numbers, 5, 6]) // [1, 2, 3, 4, 5, 6]

console.log([numbers, 5, 6]) // [[1, 2, 3, 4], 5, 6]


объекты

Теперь давайте проверим то же самое с объектами


const human = { name : "Kedar" }

console.log({ ...human, age : '21' }) // { age: "21", name: "Kedar" }

console.log({ human, age : '21' }) // { age: "21", human: { name: "Kedar" } }


Rest

Мы можем сказать, что это набор оставшихся элементов (следовательно, имя rest, то есть «остальные элементы») в массиве. Он в основном используется для объединения списка функциональных аргументов в массив, т.е. ты можешь использовать его, когда ты не знаешь, сколько аргументов будет передано твоему методу.

Давай посмотрим на пример:


const more_than_three = (...args) => {

console.log(args) /* давай посмотрим, что в аргументах */

return console.log(args.filter((x) => x > 3))

}

more_than_three(1,2,3,4,5,6,7,8)

// Ты получишь:

// [1, 2, 3, 4, 5, 6, 7, 8]

// [4, 5, 6, 7, 8]


ВОТ ЭТО ДА! 💪

Это было просто, чтобы прояснить ситуацию. Конечно, если ты хочешь погрузиться с головой в spread,rest - вперед!

Счастливого обучения!