Întotdeauna mi-am dorit să creez videoclipuri în jurul hobby-ului meu de programare. Dar nu sunt vorbitor nativ de engleză și mi-a fost frică să încerc.

Dar acum câteva săptămâni, în timp ce pregăteam câteva sfaturi JavaScript pentru a-mi începe călătoria pe YouTube, am scris această listă de sfaturi care economisesc timp. Sper că te vor ajuta așa cum m-au ajutat și pe mine.

În acest articol, vă voi împărtăși 5 sfaturi utile JavaScript (sunteți gata să vă scufundați? 😀).

Și acum, ghici ce? Unele dintre aceste sfaturi sunt active canalul meu YouTube📹! (aici este lista de redare).

Destructurarea obiectelor

Destructurarea este o caracteristică care a fost introdusă în ES6. Este una dintre caracteristicile pe care le veți folosi zilnic odată ce veți ști cum.

Vă ajută să vă ocupați de trei probleme principale:

  • Repetiţie. De fiecare dată când doriți să extrageți o proprietate de obiect și să creați o nouă variabilă, creați o nouă linie.
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;
  • Accesibilitate. De fiecare dată când doriți să accesați o proprietate obiect, ar trebui să scrieți calea către aceasta. (exemplu: user.firstName, user.family.sister, si asa mai departe).
  • Utilizare. De exemplu, atunci când creați o funcție nouă și lucrați numai cu o singură proprietate a unui obiect.

Acum că ați văzut care sunt aceste trei probleme cu obiectele, cum credeți că le puteți rezolva?

Cum se rezolvă problema repetării

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const { firstName, lastName, password } = user;

console.log(firstName, lastName, password);
// Output: 'John', 'Doe', '123'

Destructurarea este procesul de extragere a unei proprietăți dintr-un obiect prin cheia sa. Luând o cheie existentă în obiectul dvs., apoi plasând-o între două paranteze ({ firstName }) spuneți JavaScript:

“Hei JavaScript, vreau să creez o variabilă cu același nume ca proprietatea mea. Vreau să creez o variabilă firstName pentru firstName proprietatea obiectului meu. “

Notă: Dacă doriți să distrugeți un obiect, ar trebui să utilizați întotdeauna o cheie existentă. În caz contrar, nu va funcționa.

Cum se rezolvă problema accesibilității

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'

Când lucrați cu obiecte imbricate, acesta poate deveni destul de repetitiv și pierde mult timp accesând aceeași proprietate de multe ori.

Folosind destructurarea, într-o singură linie, puteți reduce calea proprietății la o singură variabilă.

Cum se rezolvă problema de utilizare

Acum, că știți cum să distrugeți un obiect, permiteți-mi să vă arăt cum să extrageți proprietăți direct în definiția parametrilor funcției.

Dacă știi React, probabil că ești deja familiarizat cu el.

function getUserFirstName({ firstName }) {
  return firstName;
}

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

console.log(getUserFirstName(user));
// Output: 'John'

În exemplul de mai sus, avem un getUserFirstName funcție și știm că va folosi doar o proprietate a obiectului nostru, firstName.

În loc să treacă întregul obiect sau să creeze o nouă variabilă, putem distruge parametrii funcției obiectului.

Cum se îmbină obiecte în ES6

În programare, trebuie adesea să abordați problemele legate de structurile de date. Mulțumită operatorul spread introduse în ES6, manipulările de obiecte și matrice sunt mai simple.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

Să ne imaginăm că avem două obiecte:

  • Utilizator. Un obiect care definește informații generale despre utilizator.
  • UserJob. Un obiect care definește informațiile despre job ale utilizatorului.

Vrem să creăm un obiect care să conțină doar proprietățile acestor două obiecte.

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

Utilizarea operatorului spread (...), putem extrage toate proprietățile unui obiect la altul.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

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

Cum se îmbină matricele

const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];

const namesWithSpreadSyntax = [...girlNames, ...boyNames];

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

La fel ca obiectele, operatorul spread (...) extrage toate elementele dintr-o matrice în alta.

const girlNames = ["Jessica", "Emma", "Amandine"];

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

Cum se elimină duplicatele de matrice

Deoarece matricele sunt liste, puteți avea multe articole de aceeași valoare. Dacă doriți să eliminați duplicatele din matrice, puteți urma unul dintre exemplele de mai jos.

Una dintre ele va fi o singură linie datorită ES6, dar am lăsat exemplul „vechi” acolo, astfel încât să puteți compara.

Cum se elimină duplicatele matricei „la vechiul mod”

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

În exemplul de mai sus, dorim să curățăm animals matrice eliminând toate duplicatele.

Putem face acest lucru folosind funcția filter cu indexOf inauntru.

filter funcția preia toate elementele animals matrice (animals.filter). Apoi, pentru fiecare apariție, oferă:

  • valoarea curentă (exemplu: duck)
  • indicele (exemplu: 0)
  • matricea inițială (exemplu: animals matrice => ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])

Vom aplica indexOf pe matricea originală pentru fiecare apariție și dați ca parametru animal variabilă (valoarea curentă).

indexOf va returna primul index al valorii curente (exemplu: pentru „bufniță” indicele este 0).

Apoi, în interiorul filtrului, comparăm valoarea lui indexOf la indicele curent. Dacă e la fel, ne întoarcem true in caz contrar false.

filter va crea o nouă matrice cu numai elementele în care a fost valoarea returnată true.

Deci, în cazul nostru: ['owl', 'frog', 'canary', 'duck', 'goose'].

Cum se elimină duplicatele matricei „în noul mod”

Ei bine, „vechiul mod” este interesant de înțeles, dar este lung și cam greu. Deci, haideți să verificăm acum noul mod:

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithSet = [...new Set(animals)];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

Să separăm diferiții pași:

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

Avem un animals matrice și îl convertim într-un Set, care este un tip special de obiect în ES6.

Lucrul care diferă în acest sens este că vă permite să creați o colecție de valori unice.

Notă: Set este o colecție de valori unice, dar nu este un Array.

Odată ce avem Set obiect cu valori unice, trebuie să îl convertim înapoi într-o matrice.

Pentru a face acest lucru, folosim operatorii de răspândire pentru a-l destructura și a trimite toate proprietățile către un nou Array.

Pentru că Set obiectul are proprietăți unice, noua noastră matrice va avea, de asemenea, numai valori unice.

Cum se utilizează operatorii ternari

Ați auzit deja despre o modalitate de a scrie condiții mici într-un singur rând?

Dacă nu, este timpul să vă îndepărtați o mulțime de if și else blocuri și convertiți-le în operații ternare mici.

Să vedem un exemplu cu console.log a începe. Ideea este de a verifica valoarea unei variabile și de a afișa condiționat o ieșire.

const colour = "blue";

if (colour === "blue") {
  console.log(`It's blue!`);
} else {
  console.log(`It's not blue!`);
}

Acest exemplu este un caz tipic în care puteți utiliza operatorul ternar pentru a reduce aceste 5 if și else linii către o singură!

O linie care să le conducă pe toate!

const colour = "blue";

colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`);
// [condition] ? [if] : [else]

Operatorii ternari înlocuiesc if și else pentru condiții mici.

Notă: Nu este recomandat să creați condiții complexe cu operatori ternari, deoarece poate reduce lizibilitatea.

Mai jos este un alt exemplu care utilizează operatori ternari, dar de această dată în return a unei funcții.

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!"

Doriți să contribuiți? Iată cum.

Sunteți binevenit (ă) să contribuiți la acest depozit GitHub. Orice contribuție este apreciată și ne va ajuta pe fiecare dintre noi să ne îmbunătățim abilitățile JavaScript.
GitHub: Sfaturi minunate pentru JavaScript

Concluzie

Sper că ați aflat câteva lucruri noi despre JavaScript în timp ce citiți această postare.

Puteți rămâne în legătură cu mine până la urmărindu-mi contul de Twitter aici. Postez tweet-uri despre noul meu conținut, programarea în general și călătoria mea ca dezvoltator web.

De asemenea, puteți verifica HereWeCode pe Instagram

Îmi place să împărtășesc conținut pe diferite platforme. Este interesant să variați tipurile de publicații și să vă adaptați la fiecare platformă.

Dacă doriți să aflați JavaScript cu imagini captivante, public tutoriale de programare pe Instagram-ul meu.