5 ЈаваСцрипт савета који ће вам помоћи да уштедите време

Одувек сам желео да стварам видео записе око свог програмског хобија. Али ја нисам изворни говорник енглеског језика и бојала сам се покушати.

Али пре неколико недеља, док сам припремао неке ЈаваСцрипт савете за започињање ИоуТубе путовања, написао сам ову листу савета за уштеду времена. Надам се да ће вам помоћи као што су помогли и мени.

У овом чланку поделићу са вама 5 корисних ЈаваСцрипт савета (да ли сте спремни да зароните? ?).

А сада, погодите шта? Неки од ових савета налазе се на мом ИоуТубе каналу?! (овде је листа за репродукцију).

Деструктурирање објеката

Деструктурирање је карактеристика која је уведена у ЕС6. То је једна од карактеристика коју ћете свакодневно користити кад знате како.

Помаже вам у решавању три главна проблема:

  • Понављање. Сваки пут када желите да издвојите једно својство објекта и креирате нову променљиву, направите нову линију.
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 }), кажете ЈаваСцрипт-у:

"Хеј ЈаваСцрипт, желим да направим променљиву са истим именом као и моје својство. Желим да направим променљиву 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' 

Када радите са угнежђеним објектима, то се може прилично понављати и много пута троши пуно времена на приступ истој особини.

Користећи деструктурирање, само у једном реду, можете смањити пут својства на једну променљиву.

Како решити проблем употребе

Сад кад знате како да деструктуришете објекат, дозволите ми да вам покажем како да извучете својства директно у дефиницији параметра функције.

Ако знате Реацт, вероватно сте га већ упознали.

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

У горњем примеру, имамо getUserFirstNameфункцију, и ми знамо да ће само користити један производ нашег објекта, firstName.

Уместо да проследимо цео објекат или креирамо нову променљиву, можемо да деструктурирамо параметре функције објекта.

Како спојити објекте у ЕС6

У програмирању често морате решавати проблеме са структурама података. Захваљујући оператеру ширења уведеном у ЕС6, манипулације објектима и низовима су једноставније.

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

Замислимо да имамо два предмета:

  • Корисник. Објекат који дефинише опште информације о кориснику.
  • УсерЈоб. Објекат који дефинише информације о послу корисника.

Желимо да направимо један објекат који садржи само својства ова два објекта.

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 `[]` ]; 

Како уклонити дупликате низа

Будући да су низови листе, можете имати много предмета исте вредности. Ако желите да уклоните дупликате из низа, можете следити један од примера у наставку.

Један од њих биће само један ред захваљујући ЕС6, али пустио сам „стари“ пример тамо да бисте могли да упоредите.

Како уклонити дупликате низа „на стари начин“

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.

Ако желите да научите ЈаваСцрипт помоћу допадљивих визуелних слика, објављујем туторијале за програмирање на свом Инстаграму.