Σε αυτό το σεμινάριο, θα μάθετε για τον χειριστή spread JavaScript με τη βοήθεια παραδειγμάτων.
Ο τελεστής spread είναι μια νέα προσθήκη στις δυνατότητες που διατίθενται στην έκδοση JavaScript ES6 .
Διαχειριστής Spread
Ο τελεστής spread … χρησιμοποιείται για την επέκταση ή την εξάπλωση ενός επαναληπτικού ή ενός πίνακα. Για παράδειγμα,
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');
Αντιγραφή συστοιχίας χρησιμοποιώντας Spread Operator
Μπορείτε επίσης να χρησιμοποιήσετε τη σύνταξη spread … για να αντιγράψετε τα στοιχεία σε έναν μόνο πίνακα. Για παράδειγμα,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Clone Array με χρήση Spread Operator
Στο 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)
Διαχειριστής Spread με αντικείμενο
Μπορείτε επίσης να χρησιμοποιήσετε τον τελεστή διασποράς με κυριολεκτικά αντικείμενα. Για παράδειγμα,
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χρήση του χειριστή spread
Παράμετρος ανάπαυσης
Όταν ο τελεστής spread χρησιμοποιείται ως παράμετρος, είναι γνωστός ως παράμετρος υπόλοιπου.
Μπορείτε επίσης να αποδεχτείτε πολλά ορίσματα σε μια κλήση συνάρτησης χρησιμοποιώντας την παράμετρο υπόλοιπου. Για παράδειγμα,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Εδώ,
- Όταν ένα μεμονωμένο όρισμα μεταβιβάζεται στη
func()συνάρτηση, η υπόλοιπη παράμετρος παίρνει μόνο μία παράμετρο. - Όταν περάσουν τρία ορίσματα, η υπόλοιπη παράμετρος λαμβάνει και τις τρεις παραμέτρους.
Σημείωση : Η χρήση της παραμέτρου υπόλοιπου θα μεταβιβάσει τα ορίσματα ως στοιχεία πίνακα.
Μπορείτε επίσης να μεταβιβάσετε πολλά ορίσματα σε μια συνάρτηση χρησιμοποιώντας τον τελεστή επέκτασης. Για παράδειγμα,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Εάν περάσετε πολλά ορίσματα χρησιμοποιώντας τον τελεστή spread, η συνάρτηση λαμβάνει τα απαιτούμενα ορίσματα και αγνοεί τα υπόλοιπα.
Σημείωση : Ο τελεστής Spread παρουσιάστηκε στο ES6 . Ορισμένα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν τη χρήση σύνταξης spread. Επισκεφτείτε την υποστήριξη JavaScript Spread Operator για να μάθετε περισσότερα.
