5 vinkkiä JavaScript-taulukoiden optimointiin

Voit optimoida JavaScript-taulukoita useilla tavoilla suorituskyvyn ja tehokkuuden parantamiseksi. Yksi JavaScriptin useimmin käytetyistä tietorakenteista on taulukko. Se on suosittu valinta monille kehittäjille, koska se on niin joustava ja helppokäyttöinen.

Matriisit voivat kuitenkin nopeasti muodostua suorituskyvyn pullonkaulaksi, jos et käytä niitä oikein. Tässä on viisi tapaa optimoida JavaScript-taulukoita ja parantaa koodin yleistä suorituskykyä.

1. Käytä Spread-operaattoria

Voit luoda uuden taulukon, joka sisältää toisen taulukon elementit, käyttämällä levitysoperaattoria, joka on kolme pistettä (...).

Hajautusoperaattori voi yhdistää kaksi taulukkoa seuraavasti:

konst array1 = [1, 2, 3];
konst array2 = [4, 5, 6];
konst concatenatedArray = [...taulukko1, ...taulukko2];
konsoli.log (concatenatedArray); // Tulos: [1, 2, 3, 4, 5, 6]

Tässä tapauksessa hajautusoperaattori ketjuttaa kaksi taulukkoa — array1 ja array2 — uudeksi taulukoksi nimeltä

concatenatedArray. Tuloksena oleva taulukko sisältää kaikki taulukon 1 elementit ja sen jälkeen kaikki taulukon 2 elementit.

Hajautusoperaattori voi myös luoda uuden taulukon, jossa on enemmän elementtejä. Esimerkiksi:

konst OriginalArray = [1, 2, 3];
konst newArray = [...originalArray, 4, 5];
konsoli.log (newArray); // Tulostus: [1, 2, 3, 4, 5]

Luot uuden taulukon nimeltä uusi Array käyttämällä levitysoperaattoria. Se sisältää kaikki alkuperäisen taulukon elementit, joita seuraavat elementit 4 ja 5. Suuria taulukoita käsiteltäessä leviämisoperaattori voi olla tehokkaampi kuin menetelmät, kuten concat() tai työntää(). Lisäksi se tekee koodista luettavamman ja tiiviimmän.

Voit käyttää JavaScriptin taulukoita tehokkaammin spread-operaattorilla, mikä tekee myös uuden taulukon luomisen helpoksi, jossa on enemmän kohteita.

2. Vältä Delete-operaattorin käyttöä

Voit poistaa objektin ominaisuuden käyttämällä delete-operaattoria. Vaikka voit poistaa taulukon elementin poistamalla, sitä ei suositella, koska se voi jättää taulukkoon tyhjiä tai tyhjiä välilyöntejä. Tämä voi vaikuttaa taulukon suorituskykyyn, kun iteroit sen yli tai yrität käyttää tiettyjä elementtejä.

Sen sijaan, että käyttäisit poistaa -operaattori, harkitse liitos menetelmä. Tämä menetelmä voi poistaa taulukon elementit ja palauttaa uuden taulukon ilman tyhjiä välilyöntejä.

Voit käyttää liitos menetelmällä seuraavalla tavalla:

konst OriginalArray = [1, 2, 3, 4, 5];
// Poista elementti indeksistä 2
konst newArray = originalArray.splice(2, 1);

Tämä esimerkki poistaa elementin indeksistä 2 alkuperäinen Array käyttämällä liitosmenetelmää. Äskettäin luotu taulukko (uusiArray) sisältää elementin, jonka liitos on poistettu. Indeksin 2 elementtiä ei enää ole alkuperäinen Array, eikä taulukossa ole tyhjiä välilyöntejä.

3. Käytä kirjoitettuja taulukoita

JavaScriptissä voit työskennellä binääritietojen kanssa käyttämällä kirjoitettuja taulukoita. Nämä taulukot mahdollistavat taustalla olevan muistin suoran manipuloinnin ja käyttävät kiinteäpituisia elementtejä; ne ovat tehokkaampia kuin tavalliset taulukot.

Tässä on esimerkki kirjoitetun taulukon luomisesta:

konst myArray = UusiInt16Array(4);
konsoli.log (myArray); // Lähtö: Int16Array [0, 0, 0, 0]

Tämä esimerkki luo aivan uuden Int16Array jossa neljä elementtiä on asetettu nollaan.

Int8Array, Int16Array, Int32Array, Uint8Array, Uint16 Array, Uint32Array, Float32Array, ja Float64Array ovat kaikki esimerkkejä kirjoitettujen taulukoiden tyypeistä. Jokainen luokitus liittyy tietyntyyppiseen parilliseen tietoon ja sillä on vastaava tavukoko.

Tässä on esimerkki a Float32Array.

konst myArray = UusiFloat32Array([1.0, 2.0, 3.0, 4.0]);
konsoli.log (myArray); // Tulos: Float32Array [1, 2, 3, 4]

Tämä esimerkki luo uuden Float32Array jossa on neljä elementtiä 1.0, 2.0, 3.0 ja 4.0.

Kirjoitetut taulukot ovat erityisen hyödyllisiä käytettäessä suuria tietojoukkoja tai suoritettaessa matemaattisia laskelmia. Ne voivat olla paljon nopeampia kuin tavalliset taulukot, koska niiden avulla voit suoraan käsitellä muistia.

Kirjoitettujen taulukoiden käyttö helpottaa JavaScript-koodin optimointia helpottamalla binääritietojen käsittelyä ja matemaattisten laskelmien tekemistä.

4. Minimoi iteraatiot

Se on yleistä käytä JavaScript-silmukkaa iteroimaan taulukon yli. Joka tapauksessa iterointi suurten taulukoiden yli voi olla suorituskyvyn pullonkaula. Vähennä JavaScript-taulukoiden iterointien määrää niiden optimoimiseksi.

Yksi tapa saavuttaa tämä on käyttää suodattaa, kartta, ja vähentää perinteisten silmukoiden sijaan. Nämä strategiat parantavat koodin suorittamista ja ovat usein nopeampia kuin manuaalinen iterointi taulukon yli.

Voit käyttää karttamenetelmää seuraavalla tavalla:

konst OriginalArray = [1, 2, 3, 4, 5];
// Kerro jokainen elementti kahdella
konst newArray = originalArray.map((elementti) => elementti * 2)

Tässä tapauksessa koodi luo uuden taulukon nimeltä uusi Array käyttämällä karttamenetelmää. Karttamenetelmä soveltaa funktiota jokaiseen komponenttiin alkuperäinen Array ja palauttaa tulokset uudessa taulukossa.

5. Käytä tuhoava syntaksia

JavaScriptin rakenteen tuhoava ominaisuus on JavaScriptin tehokas ominaisuus, jonka avulla voit poimia arvoja taulukoista ja objekteista. Tämä menetelmä tekee koodista tehokkaamman suorittamalla vähemmän muuttujamäärityksiä ja vähemmän taulukkokäyttöjä. Destructuringin käytön edut ulottuvat luettavuuteen ja pienempään kirjoitustyöhön.

Seuraava esimerkki arvojen poimimisesta taulukosta rakenteen muuttamisen avulla:

konst myArray = [1, 2, 3, 4, 5];
// Tuhoa ensimmäinen ja kolmas elementti
konst [ensimmäinen,, kolmas] = myArray;
konsoli.log (ensimmäinen); // Tulos: 1
konsoli.log (kolmas); // Tulos: 3

Tämä esimerkki käyttää rakenteen purkamista ensimmäisen ja kolmannen elementin poimimiseen myArray. Se määrittää taulukon ensimmäisen elementin arvon ensimmäinen muuttuja ja kolmannen elementin arvo kolmas muuttuja. Jättämällä tyhjän tilan purkukuvioon se ohittaa toisen elementin.

Voit myös käyttää funktion argumenttien purkamista arvojen poimimiseen taulukoista:

toimintomyFunction([ensimmäinen sekunti]) {
konsoli.log (ensimmäinen);
konsoli.log (toinen);
}
konst myArray = [1, 2, 3, 4, 5];
myFunction (myArray); // Lähtö: 1\n2

Tämä esimerkki määrittelee funktion nimeltä myFunction joka ottaa taulukon parametriksi. Sitten se kirjaa taulukon ensimmäisen ja toisen elementin konsoliin destructuringin avulla.

Optimoi JavaScript-taulukot nopeampia sovelluksia varten

JavaScript-taulukoiden virtaviivaistaminen on välttämätöntä koodin suorituskyvyn parantamiseksi. Voit parantaa merkittävästi sovellusten reagointikykyä ja nopeutta tekemällä näin.

Jotta saat kaiken irti taulukoistasi, muista käyttää spread-operaattoria, välttää delete-operaattoria, käyttää kirjoitettuja taulukoita, vähentää iteraatioiden määrää ja käyttää destructuringia. Yritä myös mitata koodisi suorituskykyä ja tehdä perustavanlaatuisia parannuksia varmistaaksesi, että sovelluksesi toimii sujuvasti.

Voit luoda sovelluksia, jotka ovat nopeampia, luotettavampia ja tarjoavat paremman käyttökokemuksen optimoimalla taulukoitasi.