5 JavaScript-tip, der hjælper dig med at spare tid

Jeg har altid ønsket at oprette videoer omkring min programmeringshobby. Men jeg er ikke engelsk som modersmål, og jeg var bange for at prøve.

Men for et par uger siden, mens jeg forberedte nogle JavaScript-tip til at starte min YouTube-rejse, skrev jeg denne liste over tidsbesparende tip. Jeg håber, de hjælper dig, som de har hjulpet mig.

I denne artikel vil jeg dele med dig 5 nyttige JavaScript-tip (er du klar til at dykke i? ?).

Og nu, gæt hvad? Nogle af disse tip findes på min YouTube-kanal?! (her er afspilningslisten).

Objektdestrukturering

Destruktion er en funktion, der blev introduceret i ES6. Det er en af ​​de funktioner, du vil bruge dagligt, når du ved hvordan.

Det hjælper dig med at håndtere tre hovedspørgsmål:

  • Gentagelse. Hver gang du vil udtrække en objektegenskab og oprette en ny variabel, opretter du en ny linje.
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; 
  • Tilgængelighed. Hver gang du vil have adgang til en objektegenskab, skal du skrive stien til den. ( Eksempel:user.firstName , user.family.sister, og så videre).
  • Anvendelse. Som et eksempel, når du opretter en ny funktion, og du kun arbejder med en egenskab for et objekt.

Nu hvor du har set, hvad disse tre problemer med objekter er, hvordan tror du, du kan løse dem?

Sådan løses gentagelsesproblemet

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

Destruktion er processen med at udvinde en ejendom fra et objekt ved hjælp af dens nøgle. Ved at tage en eksisterende nøgle i dit objekt og derefter placere den mellem to parenteser ( { firstName }) fortæller du JavaScript:

"Hej JavaScript, jeg vil oprette en variabel med samme navn som min ejendom. Jeg vil oprette en variabel firstNamefor firstNameejendommen til mit objekt."

Bemærk: Hvis du vil destruere et objekt, skal du altid bruge en eksisterende nøgle. Ellers fungerer det ikke.

Sådan løses problemet med tilgængelighed

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' 

Når du arbejder med indlejrede genstande, kan det blive ret gentaget og spilde meget tid på at få adgang til den samme ejendom mange gange.

Ved hjælp af destruktion kan du kun reducere egenskabsstien til en variabel i en linje.

Sådan løses problemet med brugen

Nu hvor du ved, hvordan du ødelægger et objekt, lad mig vise dig, hvordan du udtrækker egenskaber direkte i din funktionsparameterdefinition.

Hvis du kender React, er du sandsynligvis allerede fortrolig med det.

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

I ovenstående eksempel har vi en getUserFirstNamefunktion, og vi ved, at det kun vil bruge én egenskab af vores objekt, firstName.

I stedet for at videregive hele objektet eller oprette en ny variabel, kan vi ødelægge objektets funktionsparametre.

Sådan flettes objekter i ES6

I programmeringen skal du ofte tackle problemer med datastrukturer. Takket være den spredeoperatør, der blev introduceret i ES6, er objekt- og arraymanipulationer mere ligetil.

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

Lad os forestille os, at vi har to objekter:

  • Bruger. Et objekt, der definerer generel information om brugeren.
  • UserJob. Et objekt, der definerer jobinformation for brugeren.

Vi ønsker at oprette et objekt, der kun indeholder egenskaberne for disse to objekter.

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' //} 

Ved hjælp af spredningsoperatoren ( ...) kan vi udtrække alle egenskaberne for et objekt til et andet.

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

Sådan flettes arrays

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

Ligesom objekter ...ekstraherer spredningsoperatoren ( ) alle elementerne fra et array til et andet.

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

Sådan fjernes matrixdubletter

Da arrays er lister, kan du have mange emner af samme værdi. Hvis du vil fjerne dubletter i dit array, kan du følge et af eksemplerne nedenfor.

En af dem vil kun være en linje takket være ES6, men jeg lod det "gamle" eksempel derinde, så du kan sammenligne.

Sådan fjernes matrixdubletter "på den gamle måde"

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'] 

I ovenstående eksempel ønsker vi at rense animalsarrayet ved at fjerne alle dubletter.

Vi kan gøre det ved at bruge funktionen filtermed indexOfinde i den.

Den filterfunktion tager alle elementer i animalsarray ( animals.filter). Så for hver forekomst giver det:

  • 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.

Hvis du vil lære JavaScript med iøjnefaldende grafik, offentliggør jeg programmeringsvejledninger på min Instagram.