5 JavaScript tipp, amelyek segítenek időt spórolni

Mindig szerettem volna videókat készíteni a programozási hobbim körül. De nem vagyok angol anyanyelvű, és féltem kipróbálni.

De néhány héttel ezelőtt, miközben néhány JavaScript-tippet készítettem a YouTube-utazás megkezdéséhez, megírtam ezt az időtakarékos tippeket. Remélem, segítenek, ahogy segítettek nekem is.

Ebben a cikkben öt hasznos JavaScript-tippet osztok meg veled (készen állsz a merülésre? ?).

És most, kitalálod? Néhány tipp a YouTube-csatornámon található! (itt van a lejátszási lista).

Objektum szerkezetátalakítása

A szerkezetátalakítás az ES6-ban bevezetett funkció. Ez az egyik olyan funkció, amelyet naponta használni fog, ha már tudja.

Ez három fő kérdés kezelésében segít:

  • Ismétlés. Minden alkalommal, amikor egy objektumtulajdonságot szeretne kibontani és új változót létrehozni, új sort hoz létre.
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; 
  • Megközelíthetőség. Minden alkalommal, amikor hozzá akar férni egy objektum tulajdonságához, meg kell írnia annak elérési útját. ( példa:user.firstName ,, user.family.sisterés így tovább).
  • Használat. Például, ha új függvényt hoz létre, és csak egy objektum egyetlen tulajdonságával dolgozik.

Most, hogy látta, mi ez a három kérdés az objektumokkal kapcsolatban, mit gondol, hogyan tudja megoldani?

Az ismétlési probléma megoldása

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

A szerkezetátalakítás az a folyamat, amikor egy objektumból kulcsot nyerünk ki egy tulajdonságból. Ha egy meglévő kulcsot vesz be az objektumba, majd két zárójel közé helyezi ( { firstName }), akkor azt mondja a JavaScript-nek:

„Hé JavaScript, szeretnék létrehozni egy változót ugyanazzal a névvel, mint az én tulajdon. Azt akarom, hogy hozzon létre egy változót firstNamea firstNametulajdonát célom.”

Megjegyzés: Ha egy objektumot fel akar építeni, mindig használjon meglévő kulcsot. Ellenkező esetben nem fog működni.

Hogyan lehet megoldani az akadálymentességet

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' 

Ha beágyazott objektumokkal dolgozik, az meglehetősen ismétlődővé válhat, és sok időt pazarol sokszor ugyanahhoz a tulajdonsághoz.

A szerkezetátalakítással csak egy sorban csökkentheti a tulajdonság útvonalát egy változóra.

Hogyan lehet megoldani a használati problémát

Most, hogy tudja, hogyan kell felépíteni egy objektumot, hadd mutassam meg, hogyan lehet közvetlenül kinyerni a tulajdonságokat a függvényparaméter-meghatározásban.

Ha ismered a React-et, akkor valószínűleg már ismered.

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

A fenti példában, van egy getUserFirstNamefunkció, és tudjuk, hogy ez csak az egyik használható tulajdonsága célunk, firstName.

Ahelyett, hogy átadnánk az egész objektumot vagy új változót hoznánk létre, roncsolhatjuk az objektum funkcióparamétereit.

Objektumok egyesítése az ES6-ban

A programozás során gyakran problémákat kell megoldania az adatstruktúrákkal. Az ES6-ban bevezetett spread operátornak köszönhetően az objektum és a tömb manipulációja egyszerűbb.

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

Képzeljük el, hogy két tárgyunk van:

  • Felhasználó. A felhasználóval kapcsolatos általános információkat meghatározó objektum.
  • UserJob. A felhasználó jobinformációit meghatározó objektum.

Egy olyan objektumot akarunk létrehozni, amely csak ennek a két objektumnak a tulajdonságait tartalmazza.

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

A spread operátor ( ...) segítségével kinyerhetjük az egyik objektum összes tulajdonságát a másikba.

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

A tömbök egyesítése

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

Az objektumokhoz hasonlóan a spread operátor ( ...) az összes elemet kibontja egyik tömbből a másikba.

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

A tömb duplikátumok eltávolítása

Mivel a tömbök listák, sok azonos értékű elem lehet. Ha el szeretné távolítani a tömb duplikátumait, kövesse az alábbi példák egyikét.

Egyikük csak egy sor lesz az ES6-nak köszönhetően, de azért beengedtem a "régi" példát, hogy össze lehessen hasonlítani.

A tömb duplikátumok eltávolítása a "régi módon"

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

A fenti példában meg akarjuk tisztítani a animalstömböt az összes másolat eltávolításával.

Ezt megtehetjük filtera indexOfbenne lévő függvény használatával .

A filterfüggvény a animalstömb ( animals.filter) összes elemét felveszi . Ezután minden előforduláshoz a következőket írja elő:

  • az aktuális érték ( példaduck :)
  • az index ( példa: 0)
  • a kezdeti tömb ( példa: a animalstömb => ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])

indexOfMinden előfordulásra az eredeti tömböt alkalmazzuk , és paraméterként megadjuk a animalváltozót (az aktuális értéket).

indexOfaz aktuális érték első indexét adja vissza ( például: az „bagoly” esetében az index 0).

Ezután a szűrő belsejében összehasonlítjuk a (z) értékét indexOfaz aktuális indexhez. Ha ugyanaz, akkor truemásként térünk vissza false.

filterúj tömböt hoz létre, csak azokat az elemeket hozza létre, amelyeknél a visszaadott érték volt true.

Tehát a mi esetünkben: ['owl', 'frog', 'canary', 'duck', 'goose'].

Az "új út" tömbmásolatok eltávolítása

Nos, a "régi módot" érdekes megérteni, de hosszú és kissé nehéz. Nézzük meg most az új módot:

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

Válasszuk ki a különböző lépéseket:

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

Van egy animalstömbünk, amelyet konvertálunk a-ba Set, amely egy speciális típusú objektum az ES6-ban.

A dolog abban különbözik, hogy lehetővé teszi egyedi értékek gyűjteményének létrehozását.

Megjegyzés:Set egyedi értékek gyűjteménye, de nem Array.

Miután megvan az Setobjektumunk egyedi értékekkel, vissza kell alakítanunk egy tömbdé.

Ehhez a spread operátorokat használjuk a szerkezet felszámolásához és az összes tulajdonság elküldéséhez egy újhoz Array.

Mivel az Setobjektum egyedi tulajdonságokkal rendelkezik, új tömbünknek is csak egyedi értékei lesznek.

A Ternary Operátorok használata

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.