• Vertaling

De meeste applicaties die tegenwoordig worden ontwikkeld, vereisen interactie met een of andere dataset. Het omgaan met elementen in verzamelingen is een veel voorkomende handeling die u waarschijnlijk bent tegengekomen. Als je bijvoorbeeld met arrays werkt, kun je zonder na te denken een reguliere for-lus gebruiken, die er ongeveer zo uitziet: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Stel dat we een lijst met producten moeten weergeven en deze, indien nodig, in categorieën moeten verdelen, filteren, er een zoekopdracht op moeten uitvoeren, deze lijst of de elementen ervan moeten wijzigen. Misschien moet u snel enkele berekeningen uitvoeren waarbij de elementen van een lijst betrokken zijn. Laten we zeggen dat je iets met iets moet optellen, iets met iets moet vermenigvuldigen. Is het mogelijk om in JavaScript tools te vinden waarmee je dergelijke problemen sneller en gemakkelijker kunt oplossen dan met een gewone for-lus?

In feite zijn er dergelijke faciliteiten in JavaScript. Sommigen van hen worden besproken in het materiaal, waarvan we de vertaling vandaag onder uw aandacht brengen. In het bijzonder hebben we het over de spread-operator, de for...of-lus, en de methoden include(), some(), every(), filter(), map() en reduce(). We hebben het hier vooral over arrays, maar de hier besproken technieken zijn over het algemeen geschikt voor het werken met andere typen objecten.

Opgemerkt moet worden dat beoordelingen moderne benaderingen JS-ontwikkeling omvat meestal voorbeelden die zijn opgesteld met behulp van pijlfuncties. Misschien gebruik je ze niet zo vaak - misschien omdat je ze niet leuk vindt, misschien omdat je niet te veel tijd wilt besteden aan het leren van iets nieuws, of misschien zijn ze gewoon niet geschikt voor jou. Daarom worden hier in de meeste situaties twee opties getoond voor het uitvoeren van dezelfde acties: gebruiken normale functies(ES5) en het gebruik van pijlfuncties (ES6). Voor degenen die nieuw zijn in het werken met pijlfuncties: pijlfuncties zijn niet het equivalent van functiedeclaraties en functie-expressies. Je moet het een niet door het ander vervangen. Dit komt met name door het feit dat in gewone en pijlfuncties trefwoord dit gedraagt ​​zich anders.

1. Expansie-operator

Met de spread-operator kunt u arrays “uitbreiden” door hun elementen te vervangen in plaats van arrays op de plaats waar deze operator wordt gebruikt. Een soortgelijke aanpak is voorgesteld voor letterlijke objectobjecten.

▍Sterke punten van de expansie-operator

• Het is eenvoudig en snelle manier“trek” de individuele elementen uit een array.
• Deze operator is geschikt voor het werken met array- en objectletterlijke waarden.
• Dit is een snelle en intuïtieve methode om met functieargumenten te werken.
• De extensie-operator neemt niet veel ruimte in beslag in de code: het lijkt op drie punten (...).

▍Voorbeeld

Stel dat u de taak heeft uw favoriete lekkernijen op te sommen zonder een lus te gebruiken. Met behulp van de extensie-operator gaat dit als volgt:

2. Lus voor…van

De for…of-instructie is ontworpen om iterabele objecten te doorkruisen. Het geeft toegang tot individuele elementen dergelijke objecten (in het bijzonder array-elementen), waardoor ze bijvoorbeeld kunnen worden gewijzigd. Het kan worden beschouwd als een vervanging voor het gebruikelijke voor lus.

▍Sterke punten van de for…of-lus

• Dit is een eenvoudige manier om collectie-items toe te voegen of bij te werken.
• Met de for...of-lus kunt u verschillende berekeningen uitvoeren met behulp van elementen (optelling, vermenigvuldiging, enzovoort).
• Het is handig om te gebruiken wanneer u eventuele voorwaarden moet controleren.
• Het gebruik ervan leidt tot het schrijven van schonere en beter leesbare code.

▍Voorbeeld

Stel dat u een gegevensstructuur heeft die de inhoud van een gereedschapskist beschrijft en dat u deze gereedschappen wilt weergeven. Hier ziet u hoe u dit doet met behulp van een for...of-lus:

3. De methode include().

De methode include() wordt gebruikt om te controleren of een bepaald element in de verzameling aanwezig is, met name bijvoorbeeld: specifieke lijn in een array die strings bevat. Deze methode retourneert waar of onwaar, afhankelijk van de resultaten van de test. Wanneer u het gebruikt, moet u er rekening mee houden dat het hoofdlettergevoelig is. Als de collectie bijvoorbeeld het stringelement SCHOOL bevat, en include() de aanwezigheid ervan controleert met behulp van de string school , retourneert de methode false .

▍De sterke punten van de methode include()

• De methode include() is handig bij het creëren van eenvoudige mechanismen voor het ophalen van gegevens.
• Het geeft de ontwikkelaar een intuïtief duidelijke manier het bepalen van de aanwezigheid van bepaalde gegevens in de array.
• Het is handig om in voorwaardelijke expressies te gebruiken om elementen te wijzigen, te filteren en andere bewerkingen uit te voeren.
• Het gebruik ervan leidt tot een betere leesbaarheid van de code.

▍Voorbeeld

Stel dat u een garage heeft, vertegenwoordigd door een array met een lijst met auto's, en u weet niet of een bepaalde auto in deze garage staat of niet. Om dit probleem op te lossen, moet je code schrijven waarmee je kunt controleren of er een auto in de garage staat. Laten we de methode include() gebruiken:

4. een() methode

Met de methode some() kunt u controleren of bepaalde elementen die u zoekt in de array voorkomen. Op basis van de resultaten van de controle wordt true of false geretourneerd. Het is vergelijkbaar met de methode include() hierboven, behalve dat het argument ervan een functie is in plaats van bijvoorbeeld een gewone tekenreeks.

▍De sterke punten van de some() methode

• Met de methode some() kunnen we controleren of de array ten minste één van de elementen bevat waarin we geïnteresseerd zijn.
• Het voert een conditietest uit met behulp van de functie die eraan is doorgegeven.
• Deze methode is handig in gebruik.

▍Voorbeeld

Stel dat u eigenaar bent van een club en dat het u in het algemeen niet interesseert wie er precies naar uw club komt. Sommige bezoekers mogen de club echter niet betreden, omdat ze vatbaar zijn voor overmatige consumptie van alcoholische dranken ten minste, in het geval dat ze zich alleen in uw etablissement bevinden en er niemand bij hen is die voor hen kan zorgen. IN in dit geval een groep bezoekers mag de club alleen betreden als minimaal één van hen minimaal 18 jaar oud is. Om dit soort controle te automatiseren, zullen we de methode some() gebruiken. Hieronder wordt de toepassing ervan in twee versies gedemonstreerd.

ES5

ES6

5. Elke() methode

De methode every() doorloopt een array en test elk element op een bepaalde voorwaarde, waarbij true wordt geretourneerd als alle elementen van de array aan de voorwaarde voldoen, en anders false. Je kunt zien dat het vergelijkbaar is met de methode some().

▍De sterke punten van de methode every().

• Met de methode every() kun je controleren of alle elementen van een array aan een voorwaarde voldoen.
• Voorwaarden kunnen worden ingesteld met behulp van functies.
• Het bevordert een declaratieve benadering van programmeren.

▍Voorbeeld

Laten we terugkeren naar het vorige voorbeeld. Daar liet u bezoekers onder de 18 jaar toe in de club, maar iemand schreef een verklaring aan de politie, waarna u in een vervelende situatie terechtkwam. Nadat alles was geregeld, besloot je dat je dit allemaal niet nodig had en scherpte je de regels voor het bezoeken van de club aan. Nu kan een groep bezoekers de club alleen betreden als elk lid van de groep minimaal 18 jaar oud is. Net als de vorige keer zullen we overwegen het probleem in twee versies op te lossen, maar deze keer zullen we de methode every() gebruiken.

ES5

ES6

6. filter()-methode

Met de filter()-methode kunt u, op basis van een array, nieuwe reeks, die alleen die elementen van de bronarray bevat die aan een bepaalde voorwaarde voldoen.

▍Sterke punten van de filter()-methode

• De filter()-methode vermijdt wijziging van de oorspronkelijke array.
• Hiermee kunt u onnodige elementen verwijderen.
• Het verbetert de leesbaarheid van de code.

▍Voorbeeld

Stel dat u uit een lijst met prijzen alleen prijzen hoeft te selecteren die groter zijn dan of gelijk zijn aan 30. Laten we de methode filter() gebruiken om dit probleem op te lossen.

ES5

ES6

7. Map()-methode

De methode map() is vergelijkbaar met de methode filter() omdat deze ook een nieuwe array retourneert. Het wordt echter gebruikt om de elementen van de originele array te wijzigen.

▍Sterke punten van de map()-methode

• De map() methode vermijdt de noodzaak om de elementen van de originele array te wijzigen.
• Het kan worden gebruikt om array-elementen gemakkelijk te wijzigen.
• Het verbetert de leesbaarheid van de code.

▍Voorbeeld

Stel dat u een lijst met producten met prijzen heeft. Uw manager heeft nodig nieuwe lijst goederen waarvan de prijzen met 25% zijn verlaagd. Laten we de methode map() gebruiken om dit probleem op te lossen.

ES5

ES6

8. reduce() methode

Met de methode reduce() kunt u in zijn eenvoudigste vorm elementen optellen numerieke arrays. Met andere woorden: het reduceert de array tot één enkele waarde. Hierdoor kun je er verschillende berekeningen mee uitvoeren.

▍De sterke punten van de reduce()-methode

• Met de methode reduce() kunt u de som of het gemiddelde van de elementen van een array berekenen.
• Deze methode versnelt en vereenvoudigt berekeningen.

▍Voorbeeld

Stel dat u uw uitgaven voor de week moet berekenen, die in een array zijn opgeslagen. Laten we dit probleem oplossen met behulp van de methode reduce().

ES5

ES6

Tags toevoegen

In dit artikel zullen we kijken naar een JavaScript-array en zijn componenten. JavaScript is ideaal ontworpen voor programmeren. In feite implementeert het de ECMAScript-taal (ECMA-262-standaard).

Waar wordt JavaScript gebruikt? Het wordt gebruikt als een ingebedde taal om te definiëren softwarepad tot het onderwerp van de aanvraag. Het is te vinden in browsers waar het wordt gebruikt als scripttaal die webpagina's interactief maakt.

De belangrijkste architectonische kenmerken van dit product zijn dynamisch en zwak typen, automatisch geheugenbeheer, perfecte programmering en eersteklas objectfuncties.

Over het algemeen werd JavaScript beïnvloed verschillende redenen, omdat ze tijdens de ontwikkeling een taal wilden creëren die lijkt op Java, maar die voor programmeurs gemakkelijk te gebruiken is. Overigens is de JavaScript-taal geen eigendom van een bedrijf of organisatie, waardoor het anders is dan een aantal programmeerstijlen die door webontwikkelaars worden gebruikt.

Opgemerkt moet worden dat JavaScript is geregistreerd handelsmerk betreft Oracle Corporation.

Wat is een array?

Een array is een array waarin genummerde waarden worden opgeslagen. Elke dergelijke waarde wordt een arraycomponent genoemd, en het cijfer waaraan de component is gekoppeld, wordt een index genoemd. De JavaScript-array is niet getypeerd. Dit betekent dat de onderdelen van een array van elk type kunnen zijn, en dat verschillende onderdelen die tot dezelfde array behoren, totaal verschillende typen hebben.

Bovendien is de JavaScript-array dynamisch, wat betekent dat vaste maat geen aangifte nodig. Je kunt immers op ieder moment nieuwe gegevens toevoegen.

Array-productie

Met JavaScript is het maken van een array helemaal niet moeilijk. Hiervoor zijn twee methoden. De eerste omvat het maken van een array met letterlijke vierkante haken, waarbinnen een lijst met onderdelen staat, gescheiden door komma's.

• var leeg = ; //lege array;
• var-nummers = ; //array met vijf digitale componenten;
• var diff = ; //array met drie elementen van verschillende typen.

Meestal hoeven de waarden hier niet eenvoudig te zijn (tekenreeksen en cijfers). Het kunnen ook andere uitdrukkingen zijn, bijvoorbeeld onderwerpletterlijke waarden, andere functies en arrays.

De tweede manier om een ​​array te maken is door de Array()-ontwerper aan te roepen. Je kunt hem op drie manieren uitnodigen:

• De ontwerper aanroepen zonder argumenten: var b - new Array(). Dit zorgt voor de creatie van een lege array, gelijk aan een lege letterlijke waarde.
• De constructor specificeert expliciet de waarde van de n componenten van de array: var b = new Array (1, 3, 5, 8, “string”, true). In dit geval krijgt de ontwerper een lijst met argumenten te zien die worden omgezet in componenten van een nieuwe array. De argumenten worden naar de array geschreven op de locatie waarin ze zijn opgegeven.
• Het definiëren van het gebied voor de daaropvolgende toewijzing van waarden. Dit wordt gedaan door bij het identificeren van een array één enkel getal tussen haakjes op te geven: var b = new Array(5). Deze methode identificatie omvat het toewijzen van het vereiste aantal componenten aan de array (die elk als ongedefinieerd worden vermeld) met de mogelijkheid om vervolgens tijdens het presentatieproces waarden toe te wijzen. Dit formulier wordt meestal gebruikt om een ​​Javascript-array vooraf toe te wijzen waarvan de lengte vooraf bekend is.

Arraydetails schrijven, lezen en toevoegen

Met behulp van de operator kunt u toegang krijgen tot de componenten van een array. Overigens zijn alle componenten in JavaScript, beginnend bij nul, genummerd. Om te ontvangen vereist onderdeel, het nummer wordt aangegeven in In de regel kunnen details worden gewijzigd. En om JavaScript aan de array toe te voegen, hoeft u alleen maar een nieuwe waarde toe te wijzen.

Opgemerkt moet worden dat JavaScript-arrays een willekeurig aantal elementen van welke aard dan ook kunnen opslaan.

Array lengte

We weten dus dat de lengte van een array over het algemeen een interessant fenomeen is. Laten we het in meer detail bekijken. Alle arrays, ongeacht of ze zijn geconstrueerd met behulp van de Array()-ontwerper of zijn onthuld via een letterlijke array, hebben een specifieke lengte-eigenschap die het totale aantal opgeslagen elementen aangeeft. Omdat een array ongedefinieerde delen kan bevatten (aangeduid met ongedefinieerd), is een nauwkeurigere uitdrukking: de lengtekwaliteit is altijd één groter dan de meest grote kamer(index) van een arraycomponent. De lengtekwaliteit wordt automatisch aangepast en blijft nauwkeurig wanneer er nieuwe onderdelen in de array verschijnen.

Om het laatste onderdeel van de array te laten verschijnen, kunt u de eigenschap length gebruiken.

Het laatste deel heeft een index die één kleiner is dan de arraygrootte. Het aftellen begint immers altijd vanaf nul. Oh, deze JavaScript! De lengte van de array hangt af van het exacte aantal elementen. Dus als u niet weet hoeveel er zouden moeten zijn, maar u toegang wilt hebben tot het laatste element van de array, moet u de notatie gebruiken: v.length - 1.

Iteratie over arraydetails

Heel vaak wordt de eigenschap length gebruikt om de details van een array in een lus te doorlopen:

• var fruits = [“aardbei”, “perzik”, “appel”, “banaan”];
• for(var I = 0; ik< fruits.lenght; i++);
• document.write(fruit[i] + "...").

In dit voorbeeld lijken de componenten continu te zijn geplaatst en beginnen ze met het eerste deel met een index van nul. Als dit niet het geval is, moet u, voordat u elk element van de array aanroept, controleren of het is gedefinieerd.

Een lus wordt soms ook gebruikt om componenten te initialiseren.

Een array laten groeien en afkappen

Ik vraag me af hoe ik de tong gebruik JavaScript-tekenreeks toevoegen aan array? Naarmate we met arrays werken, verbetert de kwaliteitslengte automatisch en daarom moeten we daar zelf voor zorgen. Het is noodzakelijk om één detail te onthouden: de lengte-eigenschap is niet alleen leesbaar, maar ook beschrijfbaar. Als aan de lengtekwaliteit een waarde wordt toegewezen die kleiner is dan de huidige waarde, wordt de array verkleind tot de opgegeven grootte. Alle componenten die niet in het nieuwe indexbereik vallen, worden weggegooid en hun waarden gaan verloren, zelfs als de lengte later wordt geretourneerd - de waarden worden niet hersteld.

Het is heel eenvoudig om een ​​array als volgt te wissen: foo.length = 0.

Als de lengtekwaliteit groter wordt gemaakt dan de huidige waarde, verschijnen er nieuwe, ongeïdentificeerde delen aan het einde van de array, waardoor deze tot de gewenste grootte wordt vergroot.

Patroononderdelen verwijderen

De verwijderoperator specificeert een ongedefinieerde waarde in een arraycomponent, maar deze blijft bestaan. Als u een element van een JavaScript-array moet verwijderen zodat de resterende delen naar de vrije ruimte worden verplaatst, moet u een van de meegeleverde array-methoden gebruiken. De methode Array.shift() elimineert de eerste component, pop() elimineert de laatste component, en de methode splice() elimineert één of een reeks componenten waar dan ook in de array.

Multidimensionale arrays

Het lijkt erop dat we de zaken een beetje op orde hebben Tweedimensionale arrays- dat is wat hierna moet worden overwogen. Weet je nog dat JavaScript-arrays andere elementen als componenten kunnen bevatten? Deze functie wordt gebruikt voor productie multidimensionale arrays. Om componenten in een array van arrays te bezoeken, gebruikt u simpelweg twee keer vierkante haakjes.

Associatieve arrays

Laten we nu eens kijken hoe een handelsmerk werkt JavaScript associatief maakt gebruik van arrays. Om dit te doen, moeten we de theorie onderzoeken: associatieve arrays worden soms hashtabellen genoemd. Dankzij hen worden strings gebruikt in plaats van indexen. Het gebruik van dergelijke constructies is vergelijkbaar met het gebruik van een eigenschapsnaam eenvoudig voorwerp, maar binnen deze optie bij het uitvoeren van werkzaamheden in array-indeling. Omdat JavaScript geen manieren heeft om met associatieve arrays te werken, worden ze veel minder vaak gebruikt dan gewone arrays. Opgemerkt moet worden dat ze nog steeds nuttig kunnen zijn voor het opslaan van gegevens en het gemakkelijker kunnen maken om details te onthouden waartoe toegang moet worden verkregen.

Array-uitvoer

Wat gaan we nu over JavaScript leren? Weergave van de array in een dialoogvenster (op het beeldscherm), evenals weergave van de waarden van de arraycomponenten.

Als je de waarden van alle componenten in een programma wilt weergeven, dan is het handig om de instructie for te gebruiken. Interessant is dat de for Rules counter-variabele wordt gebruikt als index van een arraycomponent.

Schoonmaak

Om te filteren JavaScript-array, moet je de lengte opnieuw instellen:

• var mijnArray = ;
• mijnArray.lengte = 0.

• duidelijk: functie() (;
• deze.lengte = 0;
• retourneer dit;

Componenten toevoegen en verwijderen

Laten we dit verder bestuderen. meest interessante taal JavaScript. Een array-element kan op dezelfde manier worden verwijderd of toegevoegd als reguliere eigenschappen van andere objecten. Maar er zijn hier enkele verschillen: bij het toevoegen numerieke eigenschappen de kwaliteit van de lengte kan veranderen, en bij het wijzigen van de lengte-eigenschap kunnen numerieke kwaliteiten worden geëlimineerd. In principe is het algoritme voor het instellen van de kwaliteiten voor arrays als volgt:

• Als bij het toevoegen van een onbekende digitale eigenschap i de lengte gelijk is aan of kleiner dan i, wordt de lengte gedefinieerd als i+1.
• Wanneer de kwaliteit van lengte verandert, volgende stappen: als de toegewezen waarde kleiner is dan nul, wordt er een RangeError gegenereerd. Alle numerieke kwaliteiten en indices die gelijk zijn aan de nieuwe lengte en die groter zijn, worden geëlimineerd.

Over het algemeen is het verwijderen van een element van een JavaScript-array niet moeilijk. Zelfs bij het instellen van de lengte moet je er immers “extra” componenten uit verwijderen. Dit leidt tot de mogelijkheid om de array te wissen. Als de toegewezen variabele van een lege nieuwe array om de een of andere reden niet geschikt is, en het nodig is om de huidige variabele opnieuw in te stellen, volstaat het om de lengtekwaliteit ervan op nul te zetten.

unshift-, shift-, pop- en push-methoden

Hoewel arraycomponenten handmatig worden gewijzigd, raden veel mensen aan hiervoor ingebouwde methoden te gebruiken. Het is deze nuance die de juiste lengtekwaliteitswaarde en de afwezigheid van gaten in de array garandeert. De juiste lengtekwaliteit komt overigens overeen met het aantal componenten.

De push-methode verplaatst de doorgegeven delen naar het einde van de array. De pop-methode geeft de trailing-component terug en verwijdert deze.

Over het algemeen binnen Internet Explorer vóór de achtste versie kan unshift ongedefinieerd retourneren; Het is dus beter om niet te vertrouwen op de waarde die wordt geretourneerd door unshift.

Onderdelen in het midden van een array toevoegen en verwijderen

Wat moet ik doen als ik een JavaScript-array moet verwijderen? Het is bekend dat de splitsingsmethode de handtekening Array.prototype.splice heeft.

Het verwijdert deleteCount-componenten uit de array, te beginnen met de startindicator. Als er meer dan twee argumenten worden doorgegeven, worden alle volgende argumenten in de array geplaatst in plaats van de geëlimineerde argumenten. Als de start negatief is, is de index waaruit de terugtrekking wordt hervat gelijk aan lengte + start. De array wordt geretourneerd uit de verwijderde elementen.

Sterker nog, gebruiken splitsingsmethode, kunt u componenten uit het midden van de array verwijderen of een willekeurig getal aan een willekeurige plaats in de array toevoegen.

Als u in de eenvoudigste versie een component met index i moet verwijderen, moet u de splitsingsmethode aanvragen uit de array met parameters i en 1.

In principe is de tweede parameter van de splice-methode optioneel, maar het gedrag van een functie met één argument is in elke browser anders.

In Firefox, in de nieuwste varianten van Opera, in Safari en in Chrome worden bijvoorbeeld alle details tot aan het einde van de array verwijderd.

Geen enkel onderdeel wordt geëlimineerd in IE. In de eerste varianten van Opera is het onmogelijk om het gedrag te voorspellen - één deel met de indexstart - 1 zal daarom altijd worden verwijderd deze methode minimaal twee onderdelen behalen.

Sleutels

Bij het leren van JavaScript moet uiteraard ook rekening worden gehouden met associatieve arrays, zoals eerder vermeld. Dit is een abstract type informatie (een interface naar een gegevensopslag), waarmee u paren in de vorm “(sleutel, waarde)” kunt opslaan en de bewerkingen kunt ondersteunen van het toevoegen van een paar, evenals het verwijderen en zoeken naar een paar per sleutel:

VIND (sleutel).

INSERT (waarde, sleutel).

VERWIJDEREN (sleutel).

Er wordt aangenomen dat twee paren met vergelijkbare sleutels niet in een associatieve array kunnen worden opgeslagen. In een paar k + v wordt v de waarde genoemd die bij sleutel k hoort. De semantiek en namen van de bovenstaande bewerkingen kunnen verschillen in verschillende implementaties van dergelijke arrays.

De actie FIND (sleutel) retourneert dus de waarde die bij de gegeven sleutel hoort, of een specifiek UNDEF-object dat aangeeft dat er geen waarde bij de gegeven sleutel hoort. De andere twee acties retourneren niets (behalve of de bewerking succesvol was).

Over het algemeen is het vanuit interface-oogpunt handig om een ​​associatieve array te beschouwen als een eenvoudige array waarin niet alleen gehele getallen, maar ook waarden van andere typen - bijvoorbeeld strings - als indices kunnen worden gebruikt.

Trouwens, ondersteuning voor dergelijke arrays is in veel gevallen beschikbaar programmeertalen hoog niveau, zoals PHP, Perl, Ruby, Python, Tcl, JavaScript en anderen. Voor talen die geen ingebouwde tools hebben voor het werken met associatieve arrays, is een enorm aantal implementaties in de vorm van bibliotheken gemaakt.

Voorbeeld associatieve array kan dienen telefoongids. In deze versie is de betekenis het complex “F. I. O. + adres”, en de sleutel is het telefoonnummer. Een telefoonnummer heeft één eigenaar, maar één persoon kan meerdere nummers bezitten.

Associatieve extensies

Opgemerkt moet worden dat het meest bekende extensies omvatten de volgende acties:

• ELK - “doorloop” alle opgeslagen paren.
• CLEAR - verwijder alle records.
• MIN - vind het paar met de kleinste sleutelwaarde.
• MAX - vind het paar met de grootste sleutelwaarde.

De laatste twee opties vereisen dat de vergelijkingsactie op de toetsen wordt aangegeven.

Implementaties van associatieve arrays

Er zijn er veel verschillende implementaties associatieve array. De meest voorkomende implementatie kan gebaseerd zijn op eenvoudige array, waarvan de componenten (waarde, sleutel) paren zijn. Om zoekacties te versnellen, kunt u componenten ordenen van deze reeks op sleutel en zoeken met Maar dit zal de tijd die nodig is om een ​​nieuw paar toe te voegen verlengen, omdat het nodig zal zijn om de componenten van de array “uit elkaar te bewegen” om een ​​nieuw record in de lege cel te plaatsen die verschijnt.

De bekendste implementaties zijn die gebaseerd op verschillende zoekbomen. In een typische C++ STL-lezer wordt de kaartcontainer bijvoorbeeld geïmplementeerd op basis van een zwart-mahonieboom. Ruby-, Tcl- en Python-stijlen gebruiken één type hashtabel. Er zijn andere implementaties.

Over het algemeen heeft elke implementatie zijn eigen nadelen en voordelen. Het is belangrijk dat alle drie de acties zowel gemiddeld als in de slechtste nuance worden uitgevoerd over de periode O(log n), waarbij n het huidige aantal paren is dat wordt opgeslagen. Voor gematchte zoekbomen (inclusief zwart-rode bomen) wordt aan deze voorwaarde voldaan.

Het is bekend dat op hashtabellen gebaseerde implementaties een gemiddelde tijd van O(1) hebben, wat beter is dan op zoekboom gebaseerde implementaties. Dit garandeert uiteraard geen snelle uitvoering van individuele bewerkingen: de INSERT-tijd in het slechtste geval is O(n). INSERT-proces actief lange tijd, wanneer de vulfactor zijn hoogste punt bereikt en het nodig wordt om de hashtabelindex te reconstrueren.

Overigens zijn deze hashlijsten slecht omdat ze niet kunnen worden gebruikt om snel te worden uitgevoerd aanvullende acties MAX, MIN en een algoritme voor het doorkruisen van alle opgeslagen paren in aflopende of oplopende volgorde van sleutels.

Arrays zijn een van de meest gebruikte typen variabelen waarmee u veel opeenvolgende waarden op ‘één plek’ kunt opslaan. Als het echter om JavaScript gaat, is er ruimte voor verbetering.

In dit artikel bekijken we drie weinig bekende technieken die kunnen worden gebruikt bij het werken met arrays.

1. Aangepaste eigenschappen aan arrays toevoegen

Als u de zoekfunctie gebruikt om de definitie van een array binnenin te vinden JavaScript-taal, dan zullen de meeste bronnen dat beweren dit type De waarde van een variabele wordt weergegeven als een object.

Over het algemeen zijn veel van de dingen die we in JavaScript tegenkomen objecten. Het zou eerlijk zijn om op te merken dat de taal ook ‘primitieve’ gegevenstypen bevat, maar hun waarden worden op de een of andere manier gebruikt in eigenschappen in objecten.

2. Toegang tot array-elementen binnen een lus

Omdat array-indices alleen positieve waarden kunnen aannemen, begint het tellen vanaf nul. We kunnen deze index later gebruiken om toegang te krijgen tot het array-element bij een bepaalde lus-iteratie.

ECMAScript6 introduceerde een manier om door een array te bladeren zonder indexen te gebruiken, maar via een nieuwe for…of-lus.

De for...of-lus is ontworpen om door de elementen van een array te itereren zonder de index van het element te beïnvloeden.

Var ary = ["sinaasappel", "appel", "lychee"]; for (let item of ary)( console.log(item); ) // "orange", "apple", "lychee" Ter vergelijking: itemindexen uitvoeren in een for-lus. var ary = ["sinaasappel", "appel", "lychee"]; voor (var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3. Het aantal elementen is niet de afmeting van de array

Als we het hebben over de grootte van een array, denken we meestal aan het aantal elementen dat erin is opgeslagen. In feite is dit niet helemaal waar: de lengte-eigenschap wordt berekend afhankelijk van de maximale index van het element.

De lengte-eigenschap is zeer dubbelzinnig. Om dit te verifiëren, kijk eens naar de volgende manipulaties:

Var ary = ; ary.lengte = 3; console.log(ary.lengte); // 3ary = "abcd"; console.log(ary.lengte); // 6

In het laatste voorbeeld was het voldoende om het element op de vijfde positie te zetten, waardoor de lengte van de array 6 werd. Als je denkt dat indexen van 0 tot en met 4 automatisch worden aangemaakt, heb je het mis. Dit kan worden gecontroleerd met behulp van de in-operator.

Var ary = ; ary.lengte = 3; console.log(ary.lengte); // 3ary = "abcd"; console.log(ary.lengte); // 6 console.log(0 in ary); // vals

In dit geval zou het eerlijk zijn om de ary-array "sparse" te noemen.

We kunnen ook de eigenschap length manipuleren om arrays bij te snijden. Het onderstaande voorbeeld demonstreert het “verlies” van het element op index 5 door de lengte-eigenschap van de ary-array te verlagen.

Var ary = ; ary.lengte = 3; console.log(ary.lengte); // 3ary = "abcd"; console.log(ary.lengte); // 6 ary.lengte = 2; console.log(ary.lengte); // 2 console.log(ary); // ongedefinieerd

• Vertaling

• I. Itereren over echte arrays
  1. voorElke methode en gerelateerde methoden
  2. voor lus
  3. Correct gebruik voor...in lus
  4. for...of loop (impliciet gebruik van iterator)
  5. Expliciet gebruik van iterator
• 1. Methoden gebruiken om echte arrays te herhalen
  2. Converteren naar een echte array
  3. Een opmerking over runtime-objecten

I. Itereren over echte arrays

Op op dit moment Er zijn drie manieren om de elementen van een echte array te herhalen:

1. methode Array.prototype.forEach ;
2. klassiek voor lus
3. een “correct” geconstrueerde for...in-lus.

Bovendien worden er binnenkort, met de komst van de nieuwe ECMAScript 6 (ES 6)-standaard, nog twee methoden verwacht:

1. for...of loop (impliciet gebruik van iterator);
2. expliciet gebruik van iterator.

1. De forEach-methode en gerelateerde methoden

Als uw project is ontworpen om de functies van de ECMAScript 5 (ES5)-standaard te ondersteunen, kunt u een van de innovaties ervan gebruiken: de forEach-methode.

Gebruiksvoorbeeld:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
Over het algemeen vereist het gebruik van forEach verbinding met de es5-shim-emulatiebibliotheek voor browsers die dit niet hebben inheemse ondersteuning deze methode. Deze omvatten IE 8 en hoger vroege versies, die hier en daar nog steeds in gebruik zijn.

Het voordeel van forEach is dat het niet nodig is om lokale variabelen te declareren om de index en de waarde van het huidige array-element op te slaan, omdat deze automatisch als argumenten aan de callback-functie worden doorgegeven.

Als u zich zorgen maakt over de mogelijke kosten van het terugbellen op elk element, hoeft u zich geen zorgen te maken en dit te lezen.

ForEach is ontworpen om alle elementen van een array te doorlopen, maar daarnaast biedt ES5 nog een aantal handige methoden om alle of sommige elementen te doorlopen en er enkele acties op uit te voeren:

• every - retourneert true als voor elk element van de array de callback een waarde retourneert die naar true kan worden geconverteerd.
• some - retourneert waar als voor ten minste één element van de array de callback een waarde retourneert die naar waar kan worden geconverteerd.
• filter: creëert een nieuwe array die de elementen van de originele array bevat waarvoor de callback true retourneert.
• map - creëert een nieuwe array bestaande uit de waarden die worden geretourneerd door de callback.
• reduce - reduceert een array tot één enkele waarde, waarbij op zijn beurt een callback wordt toegepast op elk array-element, te beginnen met het eerste (kan handig zijn voor het berekenen van de som van array-elementen en andere samenvattingsfuncties).
• reduceRight - werkt op dezelfde manier als reduceren, maar doorloopt de elementen in omgekeerde volgorde.

2. Voor lus

Goed oud voor regels:

Vara = ["a", "b", "c"]; var-index; voor (index = 0; index< a.length; ++index) { console.log(a); }
Als de lengte van de array constant is gedurende de hele lus, en de lus zelf tot een prestatiekritisch gedeelte van de code behoort (wat onwaarschijnlijk is), dan kun je de “meer optimale” gebruiken versie voor met het opslaan van de lengte van de array:

Vara = ["a", "b", "c"]; var-index, len; voor (index = 0, len = a.lengte; index< len; ++index) { console.log(a); }
In theorie zou deze code iets sneller moeten werken dan de vorige.

Als de volgorde van de elementen niet belangrijk is, kun je nog verder gaan in termen van optimalisatie en de variabele verwijderen voor het opslaan van de lengte van de array, door de volgorde van de zoekopdracht in omgekeerde volgorde te veranderen:

Vara = ["a", "b", "c"]; var-index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
In moderne JavaScript-engines betekenen dergelijke optimalisatiespellen echter meestal niets.

3. Correct gebruik van de for...in-lus

Als u wordt geadviseerd een for...in-lus te gebruiken, onthoud dan dat iteratie over arrays niet is bedoeld. In tegenstelling tot wat vaak wordt gedacht, itereert de for...in-lus niet via array-indices, maar eerder via opsombare eigenschappen van een object.

In sommige gevallen kan for...in echter nuttig zijn, bijvoorbeeld bij het herhalen van verspreide arrays, zolang u voorzorgsmaatregelen neemt, zoals weergegeven in het onderstaande voorbeeld:

// a - schaarse array var a = ; een = "een"; een = "b"; een = "c"; for (var sleutel in a) ( if (a.hasOwnProperty(sleutel) && /^0$|^\d*$/.test(sleutel) && sleutel<= 4294967294) { console.log(a); } }
In dit voorbeeld worden bij elke iteratie van de lus twee controles uitgevoerd:

1. dat de array zijn eigen eigenschap heeft, genaamd key (niet geërfd van het prototype).
2. die sleutel is een tekenreeks die de decimale representatie bevat van een geheel getal waarvan de waarde kleiner is dan 4294967294 . Waar komt het laatste getal vandaan? Uit de definitie van een array-index in ES5, waaruit blijkt dat de hoogste index die een element in een array kan hebben, is: (2^32 - 2) = 4294967294 .

Dergelijke controles zullen uiteraard onnodige tijd in beslag nemen bij het uitvoeren van de lus. Maar in het geval van een schaarse array is deze methode efficiënter dan een for-lus, omdat in dit geval alleen de elementen worden herhaald die expliciet in de array zijn gedefinieerd. In het bovenstaande voorbeeld worden dus slechts 3 iteraties uitgevoerd (voor de indexen 0, 10 en 10000) - versus 10001 in de for-lus.

Om niet elke keer zo'n omslachtige controlecode te schrijven als je door een array moet itereren, kun je deze als een aparte functie schrijven:

Functie arrayHasOwnIndex(array, sleutel) ( return array.hasOwnProperty(sleutel) && /^0$|^\d*$/.test(sleutel) && sleutel<= 4294967294; }
Dan wordt het lichaam van de lus uit het voorbeeld aanzienlijk verkleind:

For (toets a in) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
De hierboven besproken controlecode is universeel en geschikt voor alle gevallen. Maar in plaats daarvan kunt u een kortere versie gebruiken, hoewel formeel niet helemaal correct, maar toch geschikt voor de meeste gevallen:

For (toets a in) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === sleutel) ( console.log(a); ) )

4. For...of loop (impliciet gebruik van iterator)

ES6, dat zich nog steeds in de conceptstatus bevindt, zou iterators in JavaScript moeten introduceren.

Iterator is een protocol geïmplementeerd door een object dat een standaardmanier definieert om een ​​reeks waarden te verkrijgen (eindig of oneindig).
Een iterator is een object dat een next()-methode definieert: een functie zonder argumenten die een object retourneert met twee eigenschappen:

1. done (boolean) - waar als de iterator het einde van de itereerbare reeks heeft bereikt. Anders is de waarde false .
2. waarde - definieert de waarde die door de iterator wordt geretourneerd. Kan ongedefinieerd zijn (ontbreekt) als de eigenschap done waar is.

Veel inbouwobjecten, incl. echte arrays hebben standaard iteratoren. De eenvoudigste manier om een ​​iterator op echte arrays te gebruiken, is door de nieuwe for...of-constructie te gebruiken.

Voorbeeld van gebruik voor...van:

Varval; var a = ["a", "b", "c"]; voor (val van a) ( console.log(val); )
In het bovenstaande voorbeeld roept de for...of-lus impliciet de iterator van het Array-object aan om elke waarde van de array te verkrijgen.

5. Expliciet gebruik van iterator

Iterators kunnen ook expliciet worden gebruikt, maar in dit geval wordt de code veel gecompliceerder vergeleken met de for...of-lus. Het ziet er ongeveer zo uit:

Vara = ["a", "b", "c"]; var it = a.entries(); var-invoer; while (!(entry = it.next()).done) ( console.log(entry.value); )
In dit voorbeeld retourneert de methode Array.prototype.entries een iterator die wordt gebruikt om de waarden van de array weer te geven. Bij elke iteratie bevat entry.value een array van de vorm [key, value] .

II. Itereren over array-achtige objecten

Naast echte arrays zijn er in JavaScript ook array-achtige objecten . Wat ze gemeen hebben met echte arrays is dat ze een lengte-eigenschap hebben en eigenschappen die worden genoemd als getallen die overeenkomen met de elementen van de array. Voorbeelden hiervan zijn de DOM van de NodeList-verzameling en de argumenten pseudo-array, beschikbaar binnen elke functie/methode.

1. Methoden gebruiken om echte arrays te herhalen

Op zijn minst kunnen de meeste, zo niet alle, methoden voor het itereren over echte arrays worden gebruikt om array-achtige objecten te itereren.

De for en for...in-constructies kunnen op precies dezelfde manier worden toegepast op array-achtige objecten als op echte arrays.

ForEach en andere Array.prototype-methoden zijn ook van toepassing op array-achtige objecten. Om dit te doen, moet u Function.call of Function.apply gebruiken.

Als u bijvoorbeeld forEach wilt toepassen op de eigenschap childNodes van een Node-object, doet u dat als volgt:

Array.prototype.forEach.call(node.childNodes, function(child) (//doe iets met het onderliggende object));
Om deze truc gemakkelijker te kunnen hergebruiken, kun je een verwijzing naar de methode Array.prototype.forEach in een afzonderlijke variabele declareren en deze als snelkoppeling gebruiken:

// (Ervan uitgaande dat alle onderstaande code binnen hetzelfde bereik valt) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // doe iets met het onderliggende object));
Als een array-achtig object een iterator heeft, kan deze expliciet of impliciet worden gebruikt om over het object te itereren op dezelfde manier als voor echte arrays.

2. Converteer naar een echte array

Er is ook een andere, heel eenvoudige manier om een ​​array-achtig object te herhalen: converteer het naar een echte array en gebruik een van de hierboven besproken methoden voor iteratie over echte arrays. Voor conversie kunt u de generieke methode Array.prototype.slice gebruiken, die op elk arrayachtig object kan worden toegepast. Dit gebeurt heel eenvoudig, zoals weergegeven in het onderstaande voorbeeld:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Als u bijvoorbeeld een NodeList-verzameling naar een daadwerkelijke array wilt converteren, heeft u zoiets als deze code nodig:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Update: Zoals vermeld in de opmerkingen

Laten we leren hoe we arrays in js kunnen indexeren, hun elementen kunnen verwijderen en toevoegen.

Een array in JavaScript is een globaal object dat is ontworpen om een ​​lijst met waarden op te slaan.

Het is vergelijkbaar met andere variabelen omdat het elk type gegevens kan opslaan. Maar een array heeft één belangrijk verschil met een variabele: hij kan meer dan één element tegelijk opslaan.

Een array is een geordende verzameling waarden. Elke waarde wordt een element genoemd en heeft zijn eigen nummer, een index genoemd.

Een element binnen een array kan van elk type zijn. Bovendien kunnen de elementen van één array van verschillende typen zijn: getallen, tekenreeksen, logische elementen en zelfs objecten of andere arrays.

De volgorde van array-elementen begint vanaf 0. Het blijkt dat de array altijd een index heeft die met één is verschoven: het eerste element heeft index 0, het tweede 1, enz.

Hier is een voorbeeld van een array met elementen van verschillende typen:

Een array maken (declareren).

Arrays zijn erg handig omdat ze zoveel gegevens kunnen opslaan als u nodig heeft. De maximaal mogelijke grootte van een js-array is 2 32 elementen.

We moeten JavaScript vertellen dat we een array willen maken. Hiervoor zijn twee opties: de waarde tussen vierkante haken of het nieuwe trefwoord.

Korte notatie: gebruik van vierkante haakjes

Een door komma's gescheiden lijst met waarden tussen vierkante haken.

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

De inhoud van de array wordt bepaald door wat er tussen de vierkante haken staat. Elke waarde wordt gescheiden door een komma.

Waarden worden op dezelfde manier gespecificeerd als eenvoudige variabelen, dat wil zeggen dat strings tussen aanhalingstekens moeten worden gedeclareerd, enz.

Om een ​​lege array te declareren, laat u de haakjes leeg:

var mijnArray = ;

Lange invoer: gebruik van de Array()-constructor

var lostArray = new Array("Jack", "Sawyer", "John", "Desmond"); var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

Het nieuwe trefwoord vertelt JavaScript om een ​​nieuwe array te maken waarvan de waarden als parameters worden doorgegeven.

Als u van tevoren weet hoeveel elementen er in uw array voorkomen, kunt u deze waarde onmiddellijk doorgeven in de constructor.

var myArray = nieuwe Array(80);

De bovenstaande expressie creëert een lege array bestaande uit 80 slots met ongedefinieerde waarden.

Een lege array declareren:

var myArray = nieuwe Array();

Toegang tot array-elementen

Door de index van elk element te gebruiken, kunt u met alle gegevens in de array werken en deze openen met behulp van de operator:

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; console.log(mijnArray); // Drukt “Jack” console.log (myArray) af; // Afdrukken “Desmond”

Een array kan meerdere niveaus hebben, dat wil zeggen dat elk element zelf een array kan zijn. Het resultaat is een tweedimensionale js-array. Hoe kunnen we toegang krijgen tot deze arrays die zich in andere arrays bevinden - “ multidimensionale arrays»?

Laten we als voorbeeld een array bekijken die een familie vertegenwoordigt. Kinderen uit dit gezin worden opgenomen in een aparte reeks binnen de hoofdreeks:

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Je kunt het je als volgt voorstellen:

Om naar de waarde "Lisa" te verwijzen:

var lisa = familyArray; console.log(lisa); // drukt "Lisa" af

Dit kan vrijwel voor onbepaalde tijd worden voortgezet, waardoor u geneste datasets in arrays kunt opslaan en deze kunt openen met behulp van indexen.

Elementen toevoegen aan een array

We hebben ontdekt hoe we toegang kunnen krijgen tot array-elementen met behulp van hun overeenkomstige indices. Op een vergelijkbare manier kunt u elementen toevoegen (of wijzigen) door bijvoorbeeld te declareren:

var myArray = ["Kate", "Zon"]; mijnArray = "Juliet"; console.log(mijnArray); // Afdrukken "Kate, zon, Juliet"

Wat gebeurt er als ik een element declareer met een index die geen andere elementen bevat? De array zelf zal alle ontbrekende elementen creëren en deze de waarde ongedefinieerd toekennen:

var myArray = ["Kate", "Zon"]; mijnArray = "Juliet"; console.log(mijnArray.lengte); // Print "6" console.log(myArray); // Afdrukken ["Kate", "Sung", ongedefinieerd, ongedefinieerd, ongedefinieerd, "Juliet"]

U kunt achterhalen wat de lengte van een js-array is door de eigenschap length te gebruiken. In het bovenstaande voorbeeld zijn er zes elementen in de array, en drie daarvan hebben geen waarde gekregen; ze zijn gemarkeerd als undefined .

push() methode

Met behulp van de push()-methode kunt u een of meer elementen aan een js-array toevoegen. Push() accepteert een onbeperkt aantal parameters, die allemaal aan het einde van de array worden toegevoegd.

var myArray = ["Kate", "Sut"]; mijnArray.push("Juliet"); // Voegt het element "Juliet" toe aan het einde van de array myArray.push("Libby", "Shannon"); // Voegt de elementen "Libby" en "Shannon" toe aan het einde van de array console.log(myaArray) ); // Afdrukken ["Kate", "Binnenkort", "Juliet", "Libby", "Shannon"]

unshift() methode

De methode unshift() werkt hetzelfde als push(), behalve dat er elementen aan het begin van de array worden toegevoegd.

var myArray = ["Kate", "Zon"]; mijnArray.unshift("Juliet"); // Voegt het element "Juliet" toe aan het begin van de array myArray.unshift("Libby", "Shannon"); // Voegt de elementen "Libby" en "Shannon" toe aan het begin van de array console.log(myArray); // Uitgangen ["Libby", "Shannon", "Juliet", "Kate", "Binnenkort"]

Array-elementen verwijderen

pop() en shift() methoden

De methoden pop() en shift() verwijderen respectievelijk het laatste en het eerste element van een array:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; mijnArray.pop(); // Verwijdert het "Kate"-element myArray.shift(); // Verwijdert het "Jack"-element console.log(myArray); // Afdrukken ["Sawyer", "John", "Desmond"]

splice()-methode

Met behulp van de splice()-methode kunt u elementen aan een array verwijderen of eraan toevoegen, terwijl u de index van de elementen nauwkeurig specificeert.

In het volgende voorbeeld voegt de methode splice() twee elementen toe, beginnend bij index 2 ( dat wil zeggen, vanaf het derde element):

var fruitArray = ["appel", "perzik", "sinaasappel", "citroen", "limoen", "kers"]; fruitArray.splice(2, 0, "meloen", "banaan"); console.log(fruitArray); // Uitgangen ["appel", "perzik", "meloen", "banaan", "sinaasappel", "citroen", "limoen", "kers"]

De eerste parameter van de splice()-methode is de index. Het geeft aan op welke positie elementen moeten worden toegevoegd/verwijderd. In ons voorbeeld hebben we index 2 gekozen ( betekenis "oranje").

De tweede parameter is het aantal elementen dat moet worden verwijderd. We hebben een waarde van 0 opgegeven, dus er wordt niets verwijderd.

De volgende parameters zijn optioneel. Ze voegen nieuwe waarden toe aan de array. In ons geval moeten we “meloen” en “banaan” toevoegen, te beginnen met index 2.