У цьому посібнику ви дізнаєтесь про оператор поширення JavaScript за допомогою прикладів.
Оператор поширення - це нове доповнення до функцій, доступних у версії JavaScript ES6 .
Оператор розвороту
Оператор розповсюдження … використовується для розширення або розповсюдження ітерабелу або масиву. Наприклад,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
У цьому випадку код:
console.log(… arrValue)
еквівалентно:
console.log('My', 'name', 'is', 'Jack');
Скопіюйте масив за допомогою оператора розповсюдження
Ви також можете використовувати синтаксис поширення, … щоб скопіювати елементи в єдиний масив. Наприклад,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Клонувати масив за допомогою оператора розповсюдження
У JavaScript об'єкти призначаються за посиланням, а не за значеннями. Наприклад,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Тут обидві змінні arr1 і arr2 посилаються на один і той же масив. Отже, зміна однієї змінної призводить до зміни обох змінних.
Однак, якщо ви хочете скопіювати масиви, щоб вони не посилалися на один і той же масив, ви можете використовувати оператор поширення. Таким чином, зміна одного масиву не відображається в іншому. Наприклад,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Спред оператора з об'єктом
Ви також можете використовувати оператор поширення з літералами об’єктів. Наприклад,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Тут обидва obj1і obj2властивості додаються до obj3використання оператора поширення.
Параметр відпочинку
Коли в якості параметра використовується оператор поширення, він відомий як параметр відпочинку.
Ви також можете прийняти кілька аргументів у виклику функції, використовуючи параметр rest. Наприклад,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Ось,
- Коли функція передає один аргумент
func(), параметр rest приймає лише один параметр. - Коли передано три аргументи, параметр rest приймає всі три параметри.
Примітка : Використання параметра rest передаватиме аргументи як елементи масиву.
Ви також можете передати декілька аргументів функції за допомогою оператора поширення. Наприклад,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Якщо ви передаєте кілька аргументів за допомогою оператора поширення, функція бере необхідні аргументи, а решту ігнорує.
Примітка : Оператор розповсюдження був введений в ES6 . Деякі браузери можуть не підтримувати використання синтаксису поширення. Відвідайте підтримку оператора розповсюдження JavaScript, щоб дізнатися більше.
