12 JavaScript triki, kurus izlaiž lielākā daļa apmācību

Kad sāku mācīties JavaScript, pirmais, ko izdarīju, bija sarakstu ar trikiem, kas man palīdzēja ietaupīt laiku. Es tos pamanīju no citiem programmētājiem, dažādās vietnēs un rokasgrāmatās.

Šajā rakstā es jums parādīšu 12 lieliskus veidus, kā uzlabot un paātrināt JavaScript kodu. Vairumā gadījumu tie ir universāli.

Atgādinām: visiem "Habr" lasītājiem - atlaide 10 000 rubļu, reģistrējoties jebkurā Skillbox kursā, izmantojot "Habr" reklāmas kodu.

Skillbox iesaka: Praktiskais kurss "Mobile Developer PRO".

Unikālo vērtību filtrēšana

MASĪVI

Objekta tips Set tika ieviests ES6 kopā ar..., izplatības operatoru, mēs varam to izmantot, lai izveidotu jaunu masīvu, kurā ir tikai unikālas vērtības.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Parastā situācijā vienas un tās pašas darbības veikšanai ir nepieciešams daudz vairāk koda.

Šis paņēmiens darbojas masīviem, kas satur primitīvus tipus: nenoteikts, nulles, Būla, virknes un numuru. Ja strādājat ar masīvu, kurā ir objekti, funkcijas vai papildu masīvi, jums būs nepieciešama cita pieeja.

Kešatmiņas masīva garums ciklos

CIKLI

Apgūstot cilpas, jums jāievēro standarta procedūra:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Tomēr, izmantojot šo sintaksi, cilpa for atkārtoti pārbauda masīva garumu katrā iterācijā.

Dažreiz tas var būt noderīgi, taču vairumā gadījumu efektīvāk ir saglabāt masīva garumu kešatmiņā, kas prasīs vienu piekļuvi. Mēs to varam izdarīt, definējot garuma mainīgo, kur mēs definējam mainīgo i, piemēram:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Principā gandrīz tāds pats kā iepriekš, bet, palielinot cilpas izmēru, mēs iegūsim ievērojamu laika ietaupījumu.

Īssavienojuma vērtējums (McCarthy reitings)

NOSACĪJUMI OPERATORI

Trīskāršais operators ir ātrs un efektīvs veids, kā rakstīt vienkāršus (un dažreiz ne tik vienkāršus) nosacījumu paziņojumus:

x> 100? “vairāk nekā 100”: “mazāk par 100”;
x> 100? (x>200? "vairāk nekā 200": "starp 100-200"): "mazāk nekā 100";

Bet dažreiz pat trīskāršais operators ir sarežģītāks nekā nepieciešams. Mēs varam izmantot "un" && un "or" vietā || Būla operatori, lai vēl kodolīgāk novērtētu noteiktas izteiksmes. To bieži sauc par "īssavienojumu" vai "īssavienojuma reitingu".

Kā tas darbojas

Pieņemsim, ka vēlamies atgriezt tikai vienu no diviem vai vairākiem nosacījumiem.

Izmantojot &&, tiks atgriezta pirmā nepatiesā vērtība. Ja katra operanda vērtība ir patiesa, tiks atgriezta pēdējā novērtētā izteiksme.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

Izmantojot || atgriezīs pirmo patieso vērtību. Ja katra operanda vērtība ir nepatiesa, tiks atgriezta pēdējā novērtētā vērtība.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

piemērs 1

Pieņemsim, ka mēs vēlamies atgriezt mainīgā lieluma garumu, bet nezinām tā veidu.

Šajā gadījumā varat izmantot if/else, lai pārbaudītu, vai foo ir pareizais veids, taču šī metode var būt pārāk gara. Tāpēc labāk ir izmantot mūsu “īssavienojumu”.

return (foo || []).length;

Ja mainīgajam foo ir piemērots garums, tas tiks atgriezts. Pretējā gadījumā mēs iegūsim 0.

piemērs 2

Vai jums ir bijušas problēmas ar piekļuvi ligzdotam objektam? Jūs varat nezināt, vai objekts vai kāds no tā apakšīpašumiem pastāv, un tas var radīt problēmas.

Piemēram, mēs vēlējāmies piekļūt datu rekvizītam statusā this.state, taču dati nav definēti, kamēr mūsu programma neatgriež izgūšanas pieprasījumu.

Atkarībā no tā, kur mēs to izmantojam, šī.state.data izsaukšana var neļaut lietojumprogrammai startēt. Lai atrisinātu problēmu, mēs to varētu ietīt nosacījuma izteiksmē:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

Labāks risinājums būtu izmantot operatoru "vai".

return (this.state.data || 'Fetching Data');

Mēs nevaram mainīt iepriekš minēto kodu, lai izmantotu &&. Operators “Datu ienešana” && this.state.data atgriezīs this.state.data neatkarīgi no tā, vai tie ir nedefinēti.

Pēc izvēles ķēde

Mēģinot atgriezt īpašumu dziļi koka struktūrā, varētu ieteikt izmantot neobligātu ķēdi. Tātad jautājuma zīmes simbols? var izmantot, lai izgūtu īpašumu tikai tad, ja tas nav nulle.

Piemēram, mēs varētu pārveidot iepriekš minēto piemēru, lai iegūtu this.state.data?..(). Tas ir, dati tiek atgriezti tikai tad, ja vērtība nav nulle.

Vai arī, ja ir svarīgi, vai stāvoklis ir definēts vai nē, mēs varētu atgriezt this.state?.data.

Konvertēt uz Būla

TIPA PĀRVĒRŠANA

Papildus parastajām Būla funkcijām patiesa un nepatiesa, JavaScript arī visas pārējās vērtības uzskata par patiesām vai nepatiesām.

Kamēr nav norādīts citādi, visas JavaScript vērtības ir patiesas, izņemot 0, "", nulles, undefined, NaN un, protams, false. Pēdējie ir viltoti.

Mēs varam viegli pārslēgties starp abiem, izmantojot operatoru !, kas arī pārveido veidu par Būla vērtību.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

Pārvērst par virkni

TIPA PĀRVĒRŠANA

Ātru pārvēršanu no vesela skaitļa uz virkni var veikt šādi.

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

Konvertēt uz veselu skaitli

TIPA PĀRVĒRŠANA

Mēs veicam apgriezto transformāciju šādi.

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Šo metodi var izmantot arī, lai pārveidotu Būla datu tipu parastās skaitliskās vērtībās, kā parādīts tālāk:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

Var būt situācijas, kad + tiks interpretēts kā savienošanas operators, nevis pievienošanas operators. Lai no tā izvairītos, jums vajadzētu izmantot tildes: ~~. Šis operators ir līdzvērtīgs -n-1. Piemēram, ~15 ir vienāds ar -16.

Izmantojot divas tildes pēc kārtas, darbība tiek noliegta, jo - (- - n - 1) - 1 = n + 1 - 1 = n. Citiem vārdiem sakot, ~-16 ir vienāds ar 15.

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

OPERĀCIJAS

Sākot ar ES7, jūs varat izmantot kāpināšanas operatoru ** kā pilnvaru saīsinājumu. Tas ir daudz ātrāk nekā izmantojot Math.pow(2, 3). Šķiet vienkārši, bet šis punkts ir iekļauts paņēmienu sarakstā, jo tas nav minēts visur.

console.log(2 ** 3); // Result: 8

To nevajadzētu sajaukt ar simbolu ^, ko parasti izmanto kāpināšanai. Bet JavaScript tas ir XOR operators.

Pirms ES7 saīsni ** varēja izmantot tikai 2. bāzes pakāpēm, izmantojot bitu pa kreisi nobīdes operatoru <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Piemēram, 2 << 3 = 16 ir ekvivalents 2** 4 = 16.

Peldēt līdz veselam skaitlim

OPERĀCIJAS / TIPA PĀRVĒRŠANA

Ja jums ir jāpārvērš pludiņš par veselu skaitli, varat izmantot Math.floor(), Math.ceil() vai Math.round(). Bet ir ātrāks veids, šim nolūkam mēs izmantojam |, tas ir, operatoru VAI.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

Uzvedība | lielā mērā ir atkarīgs no tā, vai jums ir darīšana ar pozitīviem vai negatīviem skaitļiem, tāpēc šī metode ir piemērota tikai tad, ja esat pārliecināts par to, ko darāt.

n | 0 noņem visu pēc decimāldaļas atdalītāja, saīsinot pludiņu līdz veselam skaitlim.

Jūs varat iegūt tādu pašu noapaļošanas efektu, izmantojot ~~. Pēc piespiedu konvertēšanas uz veselu skaitli vērtība paliek nemainīga.

Beigu skaitļu noņemšana

Operatoru VAI var izmantot, lai no skaitļa noņemtu jebkuru ciparu skaitu. Tas nozīmē, ka mums nav jāpārveido veidi, piemēram, šeit:

let str = "1553";
Number(str.substring(0, str.length - 1));

Tā vietā mēs vienkārši rakstām:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

Automātiska saistīšana

KLASES

ES6 bultiņu apzīmējumus var izmantot klases metodēs, un tas nozīmē saistīšanu. Tas nozīmē, ka varat atvadīties no tādām atkārtotām izteiksmēm kā this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Masīva apgriešana

MASĪVI

Ja jums ir jāizņem vērtības no masīva, ir ātrākas metodes nekā splice ().

Piemēram, ja zināt sākotnējā masīva lielumu, varat ignorēt tā garuma rekvizītu šādi:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

Bet ir vēl viena metode un ātrāka. Ja jums ir svarīgs ātrums, šeit ir mūsu izvēle:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

Masīva pēdējās vērtības(-u) drukāšana

MASĪVI
Šim paņēmienam ir jāizmanto slice() metode.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

JSON koda formatēšana

JSON

Iespējams, jūs jau esat izmantojis JSON.stringify. Vai zinājāt, ka tas palīdz formatēt jūsu JSON?

Stringify() metodei ir nepieciešami divi izvēles parametri: aizstājēja funkcija, ko var izmantot, lai filtrētu parādīto JSON, un atstarpes vērtība.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

Tas arī viss, es ceru, ka visas šīs metodes bija noderīgas. Kādus trikus jūs zināt? Rakstiet tos komentāros.

Skillbox iesaka:

• Divu gadu praktiskais kurss "Es esmu PRO tīmekļa izstrādātājs".
• Tiešsaistes kurss "C# izstrādātājs no 0".
• Praktiskā gada kurss "PHP izstrādātājs no 0 līdz PRO".

Avots: www.habr.com