În acest tutorial, veți afla despre operatorul de răspândire JavaScript cu ajutorul unor exemple.
Operatorul de răspândire este o nouă completare a funcțiilor disponibile în versiunea JavaScript ES6 .
Operator Spread
Operatorul de răspândire … este utilizat pentru a extinde sau răspândi un iterabil sau o matrice. De exemplu,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
În acest caz, codul:
console.log(… arrValue)
este echivalent cu:
console.log('My', 'name', 'is', 'Jack');
Copiere matrice folosind Spread Operator
De asemenea, puteți utiliza sintaxa spread … pentru a copia articolele într-o singură matrice. De exemplu,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Clonează matricea utilizând operatorul Spread
În JavaScript, obiectele sunt atribuite prin referință și nu prin valori. De exemplu,
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)
Aici, ambele variabile arr1 și arr2 se referă la aceeași matrice. Prin urmare, schimbarea unei variabile are ca rezultat schimbarea ambelor variabile.
Cu toate acestea, dacă doriți să copiați tablouri astfel încât acestea să nu se refere la aceeași matrice, puteți utiliza operatorul spread. În acest fel, schimbarea într-o matrice nu se reflectă în cealaltă. De exemplu,
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)
Spread Operator cu obiect
Puteți utiliza, de asemenea, operatorul de răspândire cu litere de obiect. De exemplu,
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)
Aici, ambele obj1și obj2proprietățile sunt adăugate la obj3utilizarea operatorului spread.
Parametru Rest
Când operatorul spread este folosit ca parametru, acesta este cunoscut ca parametrul rest.
De asemenea, puteți accepta mai multe argumente într-un apel funcțional utilizând parametrul rest. De exemplu,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Aici,
- Când un singur argument este trecut la
func()funcție, parametrul rest ia doar un parametru. - Când sunt trecute trei argumente, parametrul rest ia toți cei trei parametri.
Notă : Utilizarea parametrului rest va trece argumentele ca elemente matrice.
De asemenea, puteți transmite mai multe argumente unei funcții folosind operatorul spread. De exemplu,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Dacă treceți mai multe argumente folosind operatorul spread, funcția preia argumentele necesare și ignoră restul.
Notă : operatorul Spread a fost introdus în ES6 . Este posibil ca unele browsere să nu accepte utilizarea sintaxei răspândite. Accesați asistența JavaScript Spread Operator pentru a afla mai multe.
