5 JavaScript savjeta pomoću kojih ćete uštedjeti vrijeme

Oduvijek sam želio stvarati video zapise oko svog programskog hobija. Ali ja nisam izvorni govornik engleskog jezika i bojala sam se pokušati.

No, prije nekoliko tjedana, dok sam pripremao neke JavaScript savjete za započinjanje svog YouTube putovanja, napisao sam ovaj popis savjeta za uštedu vremena. Nadam se da će vam pomoći kao što su pomogli i meni.

U ovom članku podijelit ću s vama 5 korisnih JavaScript savjeta (jeste li spremni zaroniti? ?).

A sada, pogodite što? Neki od ovih savjeta nalaze se na mom YouTube kanalu?! (ovdje je popis za reprodukciju).

Destrukturiranje objekata

Destrukturiranje je značajka koja je uvedena u ES6. To je jedna od značajki koju ćete svakodnevno koristiti kad znate kako.

Pomaže vam u rješavanju tri glavna problema:

  • Ponavljanje. Svaki put kada želite izdvojiti jedno svojstvo objekta i stvoriti novu varijablu, stvorite novi redak.
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; 
  • Pristupačnost. Svaki put kada želite pristupiti svojstvu objekta, trebali biste mu napisati put. ( Primjer:user.firstName , user.family.sisteri tako dalje).
  • Upotreba. Kao primjer, kada kreirate novu funkciju i radite samo s jednim svojstvom objekta.

Sad kad ste vidjeli koja su ova tri problema s objektima, kako mislite da ih možete riješiti?

Kako riješiti problem ponavljanja

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

Destrukturiranje je postupak izdvajanja svojstva iz objekta pomoću njegovog ključa. Uzimajući postojeći ključ u svom objektu, a zatim ga stavljajući između dvije zagrade ( { firstName }), kažete JavaScriptu:

"Hej JavaScript, želim stvoriti varijablu s istim imenom kao i moje svojstvo. Želim stvoriti varijablu firstNameza firstNamesvojstvo svog objekta."

Napomena: Ako želite uništiti objekt, uvijek biste trebali koristiti postojeći ključ. Inače to neće uspjeti.

Kako riješiti problem pristupačnosti

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' 

Kada radite s ugniježđenim objektima, to se može prilično ponavljati i mnogo puta troši puno vremena na pristup istom svojstvu.

Koristeći destrukturiranje, samo u jednom retku, možete smanjiti put svojstva na jednu varijablu.

Kako riješiti problem upotrebe

Sad kad znate kako destrukturirati objekt, dopustite mi da vam pokažem kako izvući svojstva izravno u definiciji parametra funkcije.

Ako znate React, vjerojatno ste ga već upoznali.

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

U gore navedenom primjeru, imamo getUserFirstNamefunkciju, a znamo da će koristiti samo jedan objekt našeg objekta, firstName.

Umjesto da prosljeđujemo cijeli objekt ili stvaramo novu varijablu, možemo destrukturirati parametre funkcije objekta.

Kako spojiti objekte u ES6

U programiranju često morate rješavati probleme sa strukturama podataka. Zahvaljujući operateru širenja uvedenom u ES6, manipulacije objektima i nizovima jednostavnije su.

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

Zamislimo da imamo dva predmeta:

  • Korisnik. Objekt koji definira opće informacije o korisniku.
  • UserJob. Objekt koji definira podatke o poslu korisnika.

Želimo stvoriti jedan objekt koji sadrži samo svojstva ova dva objekta.

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

Pomoću operatora širenja ( ...) možemo izdvojiti sva svojstva jednog objekta u drugi.

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

Kako spojiti nizove

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

Poput objekata, operator širenja ( ...) izvlači sve elemente iz jednog polja u drugi.

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

Kako ukloniti duplikate niza

Budući da su nizovi popisi, možete imati mnogo predmeta iste vrijednosti. Ako želite ukloniti duplikate u svom nizu, možete slijediti jedan od primjera u nastavku.

Jedan od njih bit će samo jedan redak zahvaljujući ES6, ali tamo sam pustio "stari" primjer kako biste mogli usporediti.

Kako ukloniti duplikate niza "na stari način"

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

U gornjem primjeru želimo očistiti animalsniz uklanjanjem svih duplikata.

To možemo učiniti pomoću funkcije filters indexOfunutar nje.

filterFunkcija uzima sve elemente animalsniza ( animals.filter). Zatim za svaku pojavu pruža:

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

If you want to learn JavaScript with catchy visuals, I'm publish programming tutorials on my Instagram.