Τρεις χρήσιμες τελείες - το υπόλοιπο και η εξάπλωση στο JavaScript

Παράμετροι ανάπαυσης

Η σύνταξη rest μας επιτρέπει να αναπαραστήσουμε έναν απεριόριστο αριθμό ορίων ως πίνακα. Ρίξτε μια ματιά σε μια συνάρτηση που αθροίζει όλα τα ορίσματα που έχουν περάσει.

const sum = (...args) => args.reduce((prev, current) => prev + current),

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

Σύνταξη εξάπλωσης

Ο τελεστής εξάπλωσης μας επιτρέπει να επεκτείνουμε τα επαναλήψιμα αντικείμενα σε μεμονωμένα στοιχεία. Αυτή η λειτουργικότητα είναι αντίθετη από αυτή που πετύχαμε με τις υπόλοιπες παραμέτρους. Μπορεί να εφαρμοστεί σε όλους τους επαναληπτικούς πίνακες, όπως πίνακες, αντικείμενα, σύνολα, χάρτες κ.λπ.

const sum = (x, y, z) => x + y + z,
const numbers = [1, 2, 3],

console.log(sum(...numbers)); // 6

Τρεις τελείες σε πραγματικές περιπτώσεις χρήσης

Αντιγραφή ενός πίνακα

Η σύνταξη spread πηγαίνει ουσιαστικά ένα επίπεδο βαθύτερα κατά την αντιγραφή ενός πίνακα. Ένα επίπεδο σημαίνει ότι αντιγράφεται το πρώτο επίπεδο αναφορών.

const array0 = [1, [2, 3]],
const array1 = [...array0],

console.log(array1); // [1, [2, 3]]

Δημιουργία ενός πίνακα μοναδικών στοιχείων

Δημιουργήστε το Set που αποθηκεύει μόνο μοναδικά στοιχεία και μετατρέψτε το σε πίνακα.

const array = [1, 1, 2, 3],
const uniqueElements = [...new Set(array)],

console.log(uniqueElements); // [1, 2, 3]

Συνδέστε πίνακες

const array0 = [1, 2],
const array1 = [3, 4],
const concated = [...array0, ...array1],

console.log(concated); // [1, 2, 3, 4]

Τεμαχισμός ενός πίνακα

const [firstElement, ...newArray] = [1, 2, 3, 4],

console.log(firstElement); // 1
console.log(newArray); // [2, 3, 4]

Μπορούμε επίσης να αφαιρέσουμε n τα πρώτα στοιχεία με κόμμα.

const [, , , , ...newArray] = [1, 2, 3, 4],

console.log(newArray); // [4]

Εισαγωγή ενός πίνακα στην αρχή ενός άλλου πίνακα

const array0 = [4, 5, 6],
const array1 = [1, 2, 3],
const newArray = [...array1, ...array0],

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

Δημιουργία ενός πίνακα αριθμών από το 0 έως το n

const array = [...Array(10)].map((_, i) => i),

console.log(array); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Αποδόμηση ενός αντικειμένου

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 },

console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Δημιουργία αντιγράφου ενός αντικειμένου

let person = {
  name: 'John',
  age: 25,
  wallet: {
    sum: 500,
    νόμισμα: 'USD'
  }
};
let personCopy = { ...person },

console.log(personCopy),
// {
// name: 'John',
// age: 25,
// wallet: {
// sum: 500,
// νόμισμα: 'USD'
// }
// }

Σημειώστε ότι το αντίγραφο του αντικειμένου που δημιουργείται είναι ένα νέο αντικείμενο με όλες τις ιδιότητες του αρχικού αντικειμένου, αλλά χωρίς τις πληροφορίες πρωτοτύπου του.

person.age = 20,

console.log(person.age); // 20
console.log(personCopy.age); // 25

Παρατηρήστε ότι η σύνταξη εξάπλωσης δημιουργεί "ρηχό" αντίγραφο του αντικειμένου, οπότε η ιδιότητα "πορτοφόλι" θα αντιγραφεί μόνο ως αναφορά στο αρχικό υπο-αντικείμενο. Για βαθιά κλωνοποίηση μπορείτε να χρησιμοποιήσετε την προσέγγιση JSON stringify/parse ή τη μέθοδο 'cloneDeep' που παρέχει η Lodash ανάλογα με την πολυπλοκότητα του αντικειμένου σας. Σε ορισμένες περιπτώσεις αυτή η μέθοδος μπορεί επίσης να είναι χρήσιμη:

let personCopy = { ...person, wallet = {...person.wallet}}, 

Προσθήκη ιδιοτήτων υπό όρους σε αντικείμενα

Μπορούμε να προσθέσουμε υπό όρους ιδιότητες σε ένα νέο αντικείμενο που δημιουργούμε κάνοντας χρήση του τελεστή εξάπλωσης μαζί με την αξιολόγηση βραχυκυκλώματος.

const colors = {
  red: '#ff0000',
  πράσινο: '#00ff00',
  blue: '#0000ff'
};
const black = {
  black: '#000000'
};

let extraBlack = false,
let conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge),
// {
// red: '#ff0000',
// πράσινο: '#00ff00',
// blue: '#0000ff'
// }

extraBlack = true,
conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge),
// {
// red: '#ff0000',
// πράσινο: '#00ff00',
// blue: '#0000ff'
// μαύρο: '#000000'
// }

Διαχωρισμός μιας συμβολοσειράς σε χαρακτήρες

Αυτό είναι παρόμοιο με την κλήση της μεθόδου split με κενή συμβολοσειρά ως παράμετρο.

const split = [...'qwerty'],
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]

Διαβάστε περισσότερα:

3 κοινές προκλήσεις της ανάπτυξης προϊόντων λογισμικού για νεοσύστατες επιχειρήσεις

Ο καλύτερος τύπος έργων για Java

Πώς να μην σκοτώσετε ένα έργο με κακές πρακτικές κωδικοποίησης;