5 συμβουλές JavaScript που θα σας βοηθήσουν να εξοικονομήσετε χρόνο

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

Αλλά πριν από μερικές εβδομάδες, ενώ ετοίμαζα μερικές συμβουλές JavaScript για να ξεκινήσω το ταξίδι μου στο YouTube, έγραψα αυτήν τη λίστα συμβουλών εξοικονόμησης χρόνου. Ελπίζω να σε βοηθήσουν καθώς με βοήθησαν.

Σε αυτό το άρθρο, θα μοιραστώ μαζί σας 5 χρήσιμες συμβουλές JavaScript (είστε έτοιμοι να καταδυθείτε; ?).

Και τώρα, μαντέψτε τι; Μερικές από αυτές τις συμβουλές βρίσκονται στο κανάλι μου στο YouTube?! (εδώ είναι η λίστα αναπαραγωγής).

Καταστροφή αντικειμένων

Το Destructuring είναι ένα χαρακτηριστικό που παρουσιάστηκε στο ES6. Είναι ένα από τα χαρακτηριστικά που θα χρησιμοποιείτε καθημερινά μόλις μάθετε πώς.

Σας βοηθά να αντιμετωπίσετε τρία κύρια θέματα:

  • Επανάληψη. Κάθε φορά που θέλετε να εξαγάγετε μια ιδιότητα αντικειμένου και να δημιουργήσετε μια νέα μεταβλητή, δημιουργείτε μια νέα γραμμή.
const user = { firstName: "John", lastName: "Doe", password: "123", }; // Wow... should we display // John's password like that? const firstName = user.firstName; const lastName = user.lastName; const password = user.password; 
  • Προσιτότητα. Κάθε φορά που θέλετε να αποκτήσετε πρόσβαση σε μια ιδιότητα αντικειμένου, θα πρέπει να γράφετε τη διαδρομή προς αυτήν. ( Παράδειγμα:user.firstName , user.family.sister, και ούτω καθεξής).
  • Χρήση. Για παράδειγμα, όταν δημιουργείτε μια νέα συνάρτηση και εργάζεστε μόνο με μία ιδιότητα ενός αντικειμένου.

Τώρα που έχετε δει ποια είναι αυτά τα τρία ζητήματα με αντικείμενα, πώς νομίζετε ότι μπορείτε να τα λύσετε;

Τρόπος επίλυσης του ζητήματος επανάληψης

const user = { firstName: "John", lastName: "Doe", password: "123", }; const { firstName, lastName, password } = user; console.log(firstName, lastName, password); // Output: 'John', 'Doe', '123' 

Η καταστροφή είναι η διαδικασία εξαγωγής μιας ιδιότητας από ένα αντικείμενο με το κλειδί της. Παίρνοντας ένα υπάρχον κλειδί στο αντικείμενο σας και τοποθετώντας το ανάμεσα σε δύο αγκύλες ( { firstName }) λέτε JavaScript:

"Γεια σου JavaScript, θέλω να δημιουργήσω μια μεταβλητή με το ίδιο όνομα με την ιδιότητά μου. Θέλω να δημιουργήσω μια μεταβλητή firstNameγια την firstNameιδιότητα του αντικειμένου μου."

Σημείωση: Εάν θέλετε να καταστρέψετε ένα αντικείμενο, πρέπει πάντα να χρησιμοποιείτε ένα υπάρχον κλειδί. Διαφορετικά, δεν θα λειτουργήσει.

Τρόπος επίλυσης του ζητήματος προσβασιμότητας

const user = { firstName: "John", lastName: "Doe", password: "123", family: { sister: { firstName: "Maria", }, }, }; // We access to the nested object `sister` // and we extract the `firstName` property const { firstName } = user.family.sister; console.log(firstName); // Output: 'Maria' 

Όταν εργάζεστε με ένθετα αντικείμενα, μπορεί να γίνει αρκετά επαναλαμβανόμενο και σπαταλά πολύ χρόνο πρόσβαση στην ίδια ιδιότητα πολλές φορές.

Χρησιμοποιώντας το destructuring, μόνο σε μία γραμμή, μπορείτε να μειώσετε τη διαδρομή ιδιοτήτων σε μία μεταβλητή.

Τρόπος επίλυσης του ζητήματος χρήσης

Τώρα που ξέρετε πώς να καταστρέψετε ένα αντικείμενο, επιτρέψτε μου να σας δείξω πώς να εξαγάγετε ιδιότητες απευθείας στον ορισμό των παραμέτρων της λειτουργίας σας.

Εάν γνωρίζετε το React, μάλλον είστε ήδη εξοικειωμένοι με αυτό.

function getUserFirstName({ firstName }) { return firstName; } const user = { firstName: "John", lastName: "Doe", password: "123", }; console.log(getUserFirstName(user)); // Output: 'John' 

Στο παραπάνω παράδειγμα, έχουμε μια getUserFirstNameλειτουργία, και γνωρίζουμε ότι θα χρησιμοποιήσει μόνο μια ιδιότητα του αντικειμένου μας, firstName.

Αντί να περάσουμε ολόκληρο το αντικείμενο ή να δημιουργήσουμε μια νέα μεταβλητή, μπορούμε να καταστρέψουμε τις παραμέτρους της λειτουργίας του αντικειμένου.

Πώς να συγχωνεύσετε αντικείμενα στο ES6

Στον προγραμματισμό, πρέπει συχνά να αντιμετωπίζετε ζητήματα με δομές δεδομένων. Χάρη στον χειριστή spread που εισήχθη στο ES6, οι χειρισμοί αντικειμένων και συστοιχιών είναι πιο απλοί.

const user = { firstName: "John", lastName: "Doe", password: "123", }; const userJob = { jobName: "Developer", jobCountry: "France", jobTimePerWeekInHour: "35", }; 

Ας φανταστούμε ότι έχουμε δύο αντικείμενα:

  • Χρήστης. Ένα αντικείμενο που ορίζει γενικές πληροφορίες για τον χρήστη.
  • UserJob. Ένα αντικείμενο που ορίζει τις πληροφορίες εργασίας του χρήστη.

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

const user = { firstName: "John", lastName: "Doe", password: "123", }; const userJob = { jobName: "Developer", jobCountry: "France", jobTimePerWeekInHour: "35", }; const myNewUserObject = { ...user, ...userJob, }; console.log(myNewUserObject); // Output: //{ // firstName: 'John', // lastName: 'Doe', // password: '123', // jobName: 'Developer', // jobCountry: 'France', // jobTimePerWeekInHour: '35' //} 

Χρησιμοποιώντας τον τελεστή επέκτασης ( ...), μπορούμε να εξαγάγουμε όλες τις ιδιότητες ενός αντικειμένου σε ένα άλλο.

const user = { firstName: "John", lastName: "Doe", password: "123", }; const myNewUserObject = { ...user, // We extract: // - firstName // - lastName // - password // and send them to // a new object `{}` }; 

Πώς να συγχωνεύσετε πίνακες

const girlNames = ["Jessica", "Emma", "Amandine"]; const boyNames = ["John", "Terry", "Alexandre"]; const namesWithSpreadSyntax = [...girlNames, ...boyNames]; console.log(namesWithSpreadSyntax); // Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre'] 

Όπως και τα αντικείμενα, ο τελεστής εξαγωγής ( ...) εξάγει όλα τα στοιχεία από τη μια σειρά στην άλλη.

const girlNames = ["Jessica", "Emma", "Amandine"]; const newNewArray = [ ...girlNames, // We extract: // - 'Jessica' // - 'Emma' // - 'Amandine' // and send them to // a new array `[]` ]; 

Τρόπος κατάργησης διπλότυπων συστοιχιών

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

Ένα από αυτά θα είναι μόνο μια γραμμή χάρη στο ES6, αλλά άφησα το "παλιό" παράδειγμα εκεί ώστε να μπορείτε να συγκρίνετε.

Πώς να αφαιρέσετε τα αντίγραφα συστοιχιών "ο παλιός τρόπος"

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"]; const uniqueAnimalsWithFilter = animals.filter( // Parameters example: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'] (animal, index, array) => array.indexOf(animal) == index ); console.log(uniqueAnimalsWithSet); // Output: ['owl', 'frog', 'canary', 'duck', 'goose'] 

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

Μπορούμε να το κάνουμε χρησιμοποιώντας τη συνάρτηση filterμε indexOfμέσα της.

Η filterσυνάρτηση λαμβάνει όλα τα στοιχεία του animalsπίνακα ( animals.filter). Στη συνέχεια, για κάθε εμφάνιση παρέχει:

  • the current value (example:duck)
  • the index (example: 0)
  • the initial array (example: the animals array =>['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])

We will apply indexOf on the original array for each occurrence and give as a parameter the animal variable (the current value).

indexOf will return the first index of the current value (example: for 'owl' the index is 0).

Then inside of the filter, we compare the value of indexOf to the current index. If it's the same, we return true otherwise false.

filter will create a new array with only the elements where the returned value was true.

So, in our case: ['owl', 'frog', 'canary', 'duck', 'goose'].

How to remove array duplicates "the new way"

Well, the "old way" is interesting to understand, but it's long and a bit hard. So let's check out the new way now:

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"]; const uniqueAnimalsWithSet = [...new Set(animals)]; console.log(uniqueAnimalsWithSet); // Output: ['owl', 'frog', 'canary', 'duck', 'goose'] 

Let's separate out the different steps:

// 1 const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"]; // 2 const animalsSet = new Set(animals); console.log(animalsSet); // Output: Set { 'owl', 'frog', 'canary', 'duck', 'goose' } // 3 const uniqueAnimalsWithSet = [...animalsSet]; console.log(uniqueAnimalsWithSet); // Output: ['owl', 'frog', 'canary', 'duck', 'goose'] 

We have an animals array, and we convert it into a Set, which is a special type of object in ES6.

The thing that's different about it is that it lets you create a collection of unique values.

Note:Set is a collection of unique values, but it's not an Array.

Once we have our Set object with unique values, we need to convert it back to an array.

To do that, we use the spread operators to destructure it and send all the properties to a new Array.

Because the Set object has unique properties, our new array will also have unique values only.

How to Use Ternary Operators

Have you already heard about a way to write small conditions in only one line?

If not, it's time to remove a lot of your if and else blocks and convert them to small ternary operations.

Let's look at an example with console.log to start. The idea is to check the value of a variable and conditionally display an output.

const colour = "blue"; if (colour === "blue") { console.log(`It's blue!`); } else { console.log(`It's not blue!`); } 

This example is a typical case where you can use the ternary operator to reduce these 5 if and else lines to only one!

One line to rule them all!

const colour = "blue"; colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`); // [condition] ? [if] : [else] 

Ternary operators replace if and else for small conditions.

Note: It's not recommended to create complex conditions with ternary operators because it can reduce readability.

Below is another example that uses ternary operators, but this time in the return of a function.

function sayHelloToAnne(name) { return name === "Anne" ? "Hello, Anne!" : "It's not Anne!"; } console.log(sayHelloToAnne("Anne")); // Output: 'Hello, Anne!' console.log(sayHelloToAnne("Gael")); // Output: "It's not Anne!" 

Want to Contribute? Here's How.

You are welcome to contribute to this GitHub repository. Any contribution is appreciated, and it will help each of us improve our JavaScript skills.

GitHub: JavaScript Awesome Tips

Conclusion

I hope you learned some new things about JavaScript while reading this post.

You can stay in touch with me by following my Twitter account here. I post tweets about my new content, programming in general, and my journey as a web developer.

You can also check out HereWeCode on Instagram

I love to share content on different platforms. It's interesting to vary the publication types and adapt to each platform.

Αν θέλετε να μάθετε JavaScript με ελκυστικά γραφικά, δημοσιεύω μαθήματα προγραμματισμού στο Instagram μου.