Μάθετε αυτά τα τακτοποιημένα κόλπα JavaScript σε λιγότερο από 5 λεπτά

Τεχνικές εξοικονόμησης χρόνου που χρησιμοποιούνται από επαγγελματίες

1. Διαγραφή ή περικοπή πίνακα

Ένας εύκολος τρόπος εκκαθάρισης ή περικοπής ενός πίνακα χωρίς να τον εκχωρήσετε είναι με την αλλαγή της lengthτιμής ιδιοκτησίας

const arr = [11, 22, 33, 44, 55, 66];
// truncantingarr.length = 3;console.log(arr); //=> [11, 22, 33]
// clearingarr.length = 0;console.log(arr); //=> []console.log(arr[2]); //=> undefined

2. Προσομοίωση ονομασμένων παραμέτρων με καταστροφή αντικειμένων

Οι πιθανότητες είναι μεγάλες που χρησιμοποιείτε ήδη αντικείμενα διαμόρφωσης όταν πρέπει να μεταβιβάσετε ένα μεταβλητό σύνολο επιλογών σε κάποια λειτουργία, όπως αυτή:

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) { const foo = config.foo !== undefined ? config.foo : 'Hi'; const bar = config.bar !== undefined ? config.bar : 'Yo!'; const baz = config.baz !== undefined ? config.baz : 13; // ...}

Πρόκειται για ένα παλιό αλλά αποτελεσματικό μοτίβο, το οποίο προσπαθεί να προσομοιώσει παραμέτρους με όνομα στο JavaScript. Η λειτουργία κλήσης φαίνεται μια χαρά. Από την άλλη πλευρά, η λογική χειρισμού αντικειμένων διαμόρφωσης είναι άσκοπα ριζική. Με την καταστροφή αντικειμένων ES2015, μπορείτε να παρακάμψετε αυτό το μειονέκτημα:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ...}

Και αν πρέπει να κάνετε το αντικείμενο config προαιρετικό, είναι επίσης πολύ απλό:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ...}

3. Καταστροφή αντικειμένων για στοιχεία πίνακα

Εκχωρήστε στοιχεία πίνακα σε μεμονωμένες μεταβλητές με αντικειμενική καταστροφή:

const csvFileLine = '1997,John Doe,US,j[email protected],New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. Εναλλαγή με εύρη

ΣΗΜΕΙΩΣΗ: Μετά από κάποια σκέψη, αποφάσισα να διαφοροποιήσω αυτό το κόλπο από τους άλλους σε αυτό το άρθρο. Αυτό ΔΕΝ είναι μια τεχνική εξοικονόμησης χρόνου, το NOR είναι κατάλληλο για πραγματικό κώδικα ζωής. Λάβετε υπόψη: "Αν" είναι πάντα καλύτερα σε τέτοιες καταστάσεις.

Διαφορετικά από τις άλλες συμβουλές σε αυτήν την ανάρτηση, είναι περισσότερο περιέργεια από κάτι που πραγματικά πρέπει να χρησιμοποιήσετε.

Τέλος πάντων, θα το κρατήσω σε αυτό το άρθρο για ιστορικούς λόγους.

Εδώ είναι ένα απλό τέχνασμα για τη χρήση εύρους στις εναλλαγές δηλώσεων:

function getWaterState(tempInCelsius) { let state; switch (true) { case (tempInCelsius  0 && tempInCelsius < 100): state = 'Liquid'; break; default: state = 'Gas'; }
 return state;}

5. Περιμένετε πολλές λειτουργίες async με async / wait

Μπορείτε awaitνα ολοκληρώσετε πολλές λειτουργίες ασύγχρονου χρησιμοποιώντας Promise.all:

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Δημιουργία καθαρών αντικειμένων

Μπορείτε να δημιουργήσετε ένα καθαρό αντικείμενο 100%, το οποίο δεν θα κληρονομήσει καμία ιδιότητα ή μέθοδο από Object(για παράδειγμα constructor, toString()και ούτω καθεξής).

const pureObject = Object.create(null);
console.log(pureObject); //=> {}console.log(pureObject.constructor); //=> undefinedconsole.log(pureObject.toString); //=> undefinedconsole.log(pureObject.hasOwnProperty); //=> undefined

7. Μορφοποίηση κώδικα JSON

JSON.stringifyμπορεί να κάνει περισσότερα από το να απλοποιεί ένα αντικείμενο. Μπορείτε επίσης να ομορφιάσετε την έξοδο JSON με αυτήν:

const obj = { foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } };
// The third parameter is the number of spaces used to // beautify the JSON output.JSON.stringify(obj, null, 4); // =>"{// => "foo": {// => "bar": [// => 11,// => 22,// => 33,// => 44// => ],// => "baz": {// => "bing": true,// => "boom": "Hello"// => }// => }// =>}"

8. Αφαίρεση διπλών αντικειμένων από έναν πίνακα

Χρησιμοποιώντας τα σύνολα ES2015 μαζί με τον τελεστή Spread, μπορείτε εύκολα να αφαιρέσετε διπλά στοιχεία από έναν πίνακα:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);//=> [42, "foo", true]

9. Ισιώνοντας πολυδιάστατες συστοιχίες

Οι συστοιχίες ισοπέδωσης είναι ασήμαντες με τον χειριστή Spread

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

Δυστυχώς, το παραπάνω κόλπο θα λειτουργήσει μόνο με δισδιάστατους πίνακες. Αλλά με αναδρομικές κλήσεις, μπορούμε να το κάνουμε κατάλληλο για συστοιχίες με περισσότερες από 2 διαστάσεις:

function flattenArray(arr) { const flattened = [].concat(...arr); return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened;}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); //=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

Και εκεί το έχετε! Ελπίζω αυτά τα τακτοποιημένα μικρά κόλπα να σας βοηθήσουν να γράψετε καλύτερα και πιο όμορφα JavaScript.