ProHoster > Blogg > Internetnyheter > 12 metoder för att arbeta med JavaScript som inte finns i de flesta handledningar

12 metoder för att arbeta med JavaScript som inte finns i de flesta handledningar

12 metoder för att arbeta med JavaScript som inte finns i de flesta handledningar

NÀr jag började lÀra mig JavaScript gjorde jag först en lista över tricks som hjÀlpte mig att spara tid. Jag snappade upp dessa frÄn andra programmerare, pÄ olika webbplatser och i manualer.

I den hÀr artikeln kommer jag att visa 12 fantastiska sÀtt att förbÀttra och snabba upp din JavaScript-kod. I de flesta fall Àr de universella.

PĂ„minnelse: för alla lĂ€sare av "Habr" — 10 000 rubel rabatt vid registrering för vilken kurs som helst pĂ„ Skillbox med rabattkoden "Habr".

Skillbox rekommenderar: Praktisk kurs «Mobilutvecklare PRO».

Filtrering av unika vÀrden

ARRAYS

Objekttypen Set introducerades i ES6, tillsammans med 
, spread-operatorn, kan vi anvĂ€nda den för att skapa en ny array som bara innehĂ„ller unika vĂ€rden.

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

I vanliga fall krÀvs det mycket mer kod för att utföra samma operation.

Detta trick fungerar för arrayer som innehÄller primitiva typer: undefined, null, boolean, string och number. Om du arbetar med en array som innehÄller objekt, funktioner eller ytterligare arrayer kommer du att behöva en annan metod.

Caching av arraylÀngd i loopar

LOOPAR

NÀr du lÀr dig om for-loopar följer du den standardproceduren:

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

Men med denna syntax kontrollerar for-loopen arrayens lÀngd vid varje iteration.

Ibland kan detta vara anvÀndbart, men i de flesta fall Àr det mer effektivt att cacha lÀngden pÄ arrayen, vilket krÀver ett enda ÄtkomstförfrÄgning. Vi kan göra detta genom att definiera en lÀngdvariabel dÀr vi anger variabeln i, till exempel sÄ hÀr:

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

I princip nÀstan samma sak som ovan, men nÀr storleken pÄ loopen ökar fÄr vi en betydande tidsbesparing.

Kortslutningsbedömning (McCarthy-bedömning)

VILLKORLIGA OPERATÖRER

TernÀra operatorer Àr ett snabbt och effektivt sÀtt att skriva enkla (och ibland inte sÄ enkla) villkorssatser:

x > 100 ? "mer Àn 100" : "mindre Àn 100";
x > 100 ? (x > 200 ? "mer Àn 200" : "mellan 100-200") : "mindre Àn 100";

Men ibland blir till och med den ternÀra operatorn mer komplex Àn nödvÀndigt. IstÀllet kan vi anvÀnda 'and' && och 'or' || logiska operatorer för att utvÀrdera vissa uttryck pÄ ett Ànnu mer kompakt sÀtt. Det kallas ofta "kortslutning" eller "kortslutningsbedömning".

Hur det fungerar

LÄt oss sÀga att vi vill returnera endast ett av tvÄ eller fler villkor.

AnvÀndning av && returnerar det första falska vÀrdet. Om varje operand utvÀrderas till true, kommer det sista berÀknade uttrycket att returneras.

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

AnvÀndning av || returnerar det första sanna vÀrdet. Om varje operand utvÀrderas till false, kommer det sista berÀknade vÀrdet att returneras.

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

Exempel 1

Anta att vi vill returnera lÀngden pÄ en variabel men inte vet dess typ.

I det hÀr fallet kan vi anvÀnda if/else för att kontrollera att foo Àr av rÀtt typ, men det hÀr sÀttet kan ta för lÄng tid. SÄ det Àr bÀttre att anvÀnda vÄr "kortslutning".

return (foo || []).length;

Om variabeln foo har en lÀmplig lÀngd, kommer den att returneras. Annars fÄr vi 0.

Exempel 2

Har du haft problem med att komma Ät ett inbÀddat objekt? Du kanske inte vet om objektet eller nÄgot av dess underattribut finns, vilket kan leda till problem.

Till exempel ville vi komma Ät egenskapen data i this.state, men data Àr inte definierad förrÀn vÄrt program returnerar ett anrop för hÀmtning.

Beroende pÄ var vi anvÀnder det kan anropet this.state.data hindra applikationen frÄn att starta. För att lösa problemet kan vi lÀgga detta i ett villkorsuttryck:

if (this.state.data) {
  return this.state.data;
} else {
  return 'HĂ€mtar data';
}

Ett mer lÀmpligt alternativ skulle vara att anvÀnda "eller"-operatorn.

return (this.state.data || 'HĂ€mtar data');

Vi kan inte justera koden ovan för att anvĂ€nda &&. Operatorn ‘HĂ€mtar data’ && this.state.data kommer att returnera this.state.data oavsett om den Ă€r undefined eller inte.

Valfri kedja

Det skulle vara lÀmpligt att anvÀnda en valfri kedja nÀr man försöker returnera en egenskap djupt i en trÀdliknande struktur. SÄ, frÄgetecknet ? kan anvÀndas för att extrahera egenskapen, endast om den inte Àr null.

Till exempel skulle vi kunna omstrukturera exemplet ovan till this.state.data?.. (). Det vill sÀga att data returneras endast om vÀrdet inte Àr null.

Eller, om det Àr viktigt att veta om state Àr definierat eller inte, skulle vi kunna returnera this.state?.data.

Omvandling till Boolean

TYPE OMVANDLING

Förutom de vanliga logiska funktionerna true och false betraktar JavaScript ocksÄ alla andra vÀrden som truthy eller falsy.

Om annat inte anges, Àr alla vÀrden i JavaScript truthy, förutom 0, "", null, undefined, NaN och förstÄs false. De senare Àr falsy.

Vi kan enkelt vÀxla mellan dem med hjÀlp av operatorn !, som ocksÄ konverterar typen till boolesk.

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

Konverterar till strÀng

TYPE OMVANDLING

En snabb konvertering av ett heltal till strÀng kan göras pÄ följande sÀtt.

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

Konvertering till heltal

TYPE OMVANDLING

Den omvÀnda konverteringen gör vi sÄ.

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

Denna metod kan ocksÄ anvÀndas för att konvertera den booleska datatypen till vanliga numeriska vÀrden, som visas nedan:

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

Det kan finnas situationer nÀr + kommer att tolkas som en sammanfogningaroperator istÀllet för addition. För att undvika detta kan man anvÀnda tildor: ~~. Denna operator motsvarar uttrycket -n-1. Till exempel, ~ 15 Àr lika med -16.

AnvĂ€ndningen av tvĂ„ tildor i rad upphĂ€ver operationen, eftersom — (- — n — 1) — 1 = n + 1 — 1 = n. Med andra ord, ~ -16 Ă€r lika med 15.

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

<Quick Powers

OPERATIONER

FrÄn och med ES7 kan man anvÀnda exponentieringsoperatorn ** som en förkortning för exponenter. Detta Àr mycket snabbare Àn att anvÀnda Math.pow (2, 3). Det verkar enkelt, men denna punkt ingÄr i listan över tricks, eftersom den inte alltid nÀmns.

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

Det Àr viktigt att inte förvÀxla det med symbolen ^, som vanligtvis anvÀnds för exponentiering. Men i JavaScript Àr detta en XOR-operator.

Innan ES7 kunde förkortningen ** endast anvÀndas för exponenter med basen 2 med hjÀlp av bitvis vÀnster förskjutning <<:

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

Till exempel, 2 << 3 = 16 Àr ekvivalent med uttrycket 2 ** 4 = 16.

Float till heltal

OPERATIONER / TYPOVERGANG

NÀr det Àr nödvÀndigt att konvertera float till heltal kan man anvÀnda Math.floor(), Math.ceil() eller Math.round(). Men det finns ocksÄ en snabbare vÀg, som till exempel anvÀnder |, det vill sÀga OR-operatorn.

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

Beteende | beror till stor del pÄ om man har att göra med positiva eller negativa tal, sÄ denna metod Àr endast lÀmplig om du Àr sÀker pÄ vad du gör.

n | 0 tar bort allt efter decimalavgrÀnsaren, vilket avkortar flyttal till heltal.

Du kan fÄ samma avrundningseffekt genom att anvÀnda ~~. Efter den tvingande omvandlingen till heltal förblir vÀrdet oförÀndrat.

Ta bort avskÀrande tal

OR-operatorn kan anvÀndas för att ta bort vilket antal siffror som helst frÄn ett tal. Det innebÀr att vi inte behöver omvandla typer, som hÀr:

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

IstÀllet skriver vi helt enkelt:

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

Automatisk bindning

KLASSER

Pilar i ES6 kan anvÀndas i klassmetoder, vilket innebÀr att bindningen antas. Detta gör att vi kan sÀga adjö till upprepade uttryck som this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () =&gt; {
    // Denna metod är implicit bunden!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

BeskÀrning av array

ARRAYS

Om du behöver ta bort vÀrden frÄn en array finns det snabbare metoder Àn splice().

Till exempel, om du kÀnner till storleken pÄ den ursprungliga arrayen kan du ÄsidosÀtta dess lÀngd pÄ följande sÀtt:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Resultat: [0, 1, 2, 3]

Men det finns ocksÄ en annan metod som Àr snabbare. Om hastighet Àr viktigt för dig, hÀr Àr vÄrt val:

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

console.log(array); // Resultat: [0, 1, 2, 3]

Utdata av det sista vÀrdet (eller vÀrdena) frÄn arrayen

ARRAYS
Denna teknik krÀver anvÀndning av metoden slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Resultat: [9]
console.log(array.slice(-2)); // Resultat: [8, 9]
console.log(array.slice(-3)); // Resultat: [7, 8, 9]

Formatering av JSON-kod

JSON

Kanske har du redan anvÀnt JSON.stringify. Visste du att det hjÀlper till att formatera din JSON?

Metoden stringify() tar tvÄ valfria parametrar: en replacer-funktion som kan anvÀndas för att filtrera den visade JSON:en, och ett vÀrde för space.

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

// Resultat:
// '{
//     "alpha": A,
//     "beta": B
// }'

Och det Àr allt, jag hoppas att alla nÀmnda tekniker har varit anvÀndbara. Vilka knep kÀnner du till? Skriv dem i kommentarerna.

Skillbox rekommenderar:

KĂ€lla: habr.com

Köp pĂ„litlig webbhotell med DDoS-skydd, VPS VDS-servrar đŸ”„ Köp pĂ„litlig webbhotell med DDoS-skydd, VPS VDS-servrar | ProHoster