5 JavaScript-vinkkiä, jotka auttavat sinua säästämään aikaa

Olen aina halunnut luoda videoita ohjelmointiharrastukseni ympärille. Mutta en ole englannin äidinkielenään puhuja, ja pelkäsin kokeilla.

Mutta muutama viikko sitten, kun valmistelin joitain JavaScript-vinkkejä YouTube-matkan aloittamiseksi, kirjoitin tämän luettelon aikaa säästävistä vinkeistä. Toivon, että he auttavat sinua, koska he ovat auttaneet minua.

Tässä artikkelissa aion jakaa kanssasi 5 hyödyllistä JavaScript-vinkkiä (oletko valmis sukeltamaan? ?).

Ja nyt, arvaa mitä? Jotkut näistä vinkeistä ovat YouTube-kanavallani?! (tässä on soittolista).

Kohteen uudelleenjärjestely

Uudelleenjärjestely on ominaisuus, joka otettiin käyttöön ES6: ssa. Se on yksi ominaisuuksista, joita käytät päivittäin, kun osaat.

Se auttaa sinua käsittelemään kolmea pääkysymystä:

  • Kertaus. Aina kun haluat purkaa yhden objektin ominaisuuden ja luoda uuden muuttujan, luot uuden rivin.
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; 
  • Esteettömyys. Aina kun haluat käyttää objektin ominaisuutta, sinun on kirjoitettava polku siihen. ( Esimerkki:user.firstName , user.family.sister, ja niin edelleen).
  • Käyttö. Esimerkiksi, kun luot uuden toiminnon ja työskentelet vain yhden objektin ominaisuuden kanssa.

Nyt kun olet nähnyt, mitä nämä kolme esineisiin liittyvää ongelmaa ovat, kuinka luulet voivasi ratkaista ne?

Kuinka ratkaista toistoa koskeva ongelma

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

Uudelleenjärjestely on prosessi, jolla ominaisuus puretaan objektista sen avaimella. Ottamalla objektiisi olemassa olevan avaimen ja asettamalla sen kahden sulun väliin ( { firstName }) kerrot JavaScriptille:

"Hei JavaScript, haluan luoda muuttuja on sama nimi kuin minun omaisuutta. Haluan luoda muuttujan firstNamevarten firstNameomaisuutta minun esine."

Huomaa: Jos haluat purkaa objektin, sinun on aina käytettävä olemassa olevaa avainta. Muuten se ei toimi.

Esteettömyysongelman ratkaiseminen

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' 

Kun työskentelet sisäkkäisten esineiden kanssa, siitä voi tulla melko toistuva ja tuhlaa paljon aikaa saman omaisuuden käyttämiseen monta kertaa.

Destrukturointia käyttämällä vain yhdellä rivillä voit vähentää ominaisuuspolun yhdeksi muuttujaksi.

Kuinka ratkaista käyttöongelma

Nyt kun tiedät miten objekti voidaan strukturoida, haluan näyttää sinulle, kuinka ominaisuudet erotetaan suoraan toimintoparametrimäärityksessä.

Jos tiedät Reactin, olet todennäköisesti jo perehtynyt siihen.

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

Yllä olevassa esimerkissä meillä on getUserFirstNamefunktio, ja tiedämme, että se käyttää vain yhtä objektimme ominaisuutta firstName.

Sen sijaan, että välitämme koko objektin tai luomme uuden muuttujan, voimme tuhota objektin toimintoparametrit.

Objektien yhdistäminen ES6: ssa

Ohjelmoinnissa joudut usein käsittelemään tietoja tietorakenteilla. ES6: ssa esitetyn hajautusoperaattorin ansiosta objekti- ja matriisikäsittelyt ovat suoraviivaisempia.

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

Kuvitellaan, että meillä on kaksi esinettä:

  • Käyttäjä. Objekti, joka määrittelee käyttäjän yleiset tiedot.
  • Käyttäjän työ. Objekti, joka määrittelee käyttäjän työtiedot.

Haluamme luoda yhden objektin, joka sisältää vain näiden kahden objektin ominaisuudet.

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

Levitysoperaattorin ( ...) avulla voimme purkaa objektin kaikki ominaisuudet toiseen.

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

Taulukoiden yhdistäminen

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

Kuten esineitä, hajautusoperaattori ( ...) purkaa kaikki elementit taulukosta toiseen.

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

Taulukon kaksoiskappaleiden poistaminen

Koska taulukot ovat luetteloita, sinulla voi olla useita samanarvoisia kohteita. Jos haluat poistaa kaksoiskappaleet taulukostasi, voit noudattaa yhtä alla olevista esimerkeistä.

Yksi niistä on vain yksi rivi ES6: n ansiosta, mutta annoin "vanhan" esimerkin sinne, jotta voit vertailla.

"Vanhan tavan" matriisin kaksoiskappaleiden poistaminen

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

Yllä olevassa esimerkissä haluamme puhdistaa animalstaulukon poistamalla kaikki kaksoiskappaleet.

Voimme tehdä sen käyttämällä toimintoa filtersen indexOfsisällä.

filterToiminto ottaa kaikki osat animalsarray ( animals.filter). Sitten jokaiselle tapahtumalle se tarjoaa:

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

Jos haluat oppia JavaScriptiä tarttuvalla grafiikalla, julkaisen ohjelmointikursseja Instagramissani.