Nog niet zo lang geleden moest ik een associatieve array in JavaScript maken. Verrassend genoeg heb ik het nog nooit eerder in JavaScript nodig gehad. Ik ben op internet gaan zoeken hoe ik het kon maken. En ik was zeer verrast dat een groot aantal mensen schreven dat dit onmogelijk is, het bestaat niet in JavaScript. Gelukkig vertelde mijn jarenlange ervaring mij dat ze onzin praatten. Dus ik heb eindelijk geleerd hoe ik een associatieve array in JavaScript kan maken, wat ik in dit artikel zal bespreken.
Hieronder staat de code waarin een associatieve array wordt gemaakt, vervolgens wordt een ander element toegevoegd en ten slotte wordt de array doorgelust:
var array = ("Naam": "Michael", "Leeftijd": "22", "Land": "Rusland"); // Maak een associatieve array
array["toevoegen"] = 15; // Voeg nog een element toe
/* Doorloop een associatieve array en druk de sleutels en hun waarden af */
voor (var i in array)
alert("Sleutel = " + i + "; Waarde = " + array[i]);
In dit artikel hebben we gekeken naar het maken van associatieve arrays, het wijzigen ervan, en ook naar het uitgebreid zoeken in de for-lus. Persoonlijk heb ik associatieve arrays in JavaScript maar één keer gebruikt, maar het is een functie die je moet kennen.
- I. Itereren over echte arrays
- voorElke methode en gerelateerde methoden
- voor lus
- Correct gebruik van de for...in-lus
- for...of loop (impliciet gebruik van iterator)
- Expliciet gebruik van iterator
- Methoden gebruiken om echte arrays te herhalen
- Converteren naar een echte array
- Een opmerking over runtime-objecten
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 deze methode niet standaard ondersteunen. Deze omvatten IE 8 en eerder, die op sommige plaatsen 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 enkele elementen te doorlopen en er enkele acties op uit te voeren:
- every-retourneert true als de callback voor elk element van de array 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.
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 codegedeelte behoort (wat onwaarschijnlijk is), dan kun je een “meer optimale” versie van gebruiken, waarin de lengte van de array wordt opgeslagen. :
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:
Var a = ["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.
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
- HTML
- JavaScript
Laten we eens kijken naar een manier om de laatste index (item) in elke methode van jQuery te bepalen.
// selecteer elementen var myList = $("ul li"); // bepaal het aantal elementen in de selectie var total = myList.length; // doorloop de geselecteerde elementen myList.each(function(index) ( if (index === total - 1) ( // dit is het laatste element in de selectie ) ));
Definitie en toepassingMet de JavaScript forEach()-methode kunt u de doorgegeven functie één keer uitvoeren voor elk element in de array in oplopende indexvolgorde.
Houd er rekening mee dat de callback-functie die als parameter aan de forEach()-methode wordt doorgegeven, niet wordt aangeroepen voor verwijderde of ontbrekende array-elementen.
Het bereik van elementen die worden verwerkt met de methode forEach() is eerder ingesteld Eerst het aanroepen van de callback-functie. Als er na de aanroep elementen aan de array zijn toegevoegd, wordt de functie voor dergelijke elementen niet aangeroepen.
Als de waarden van bestaande array-elementen tijdens de uitvoering veranderen, zal de waarde die aan de functie wordt doorgegeven de waarde zijn op het moment dat de methode forEach() deze bezoekt. Als elementen worden verwijderd voordat ze worden bezocht, worden dergelijke elementen niet bezocht. Als elementen die al zijn bezocht worden verwijderd tijdens het doorlopen van de array, worden latere elementen overgeslagen.
Browser-ondersteuning| voorElke() | Ja | Ja | Ja | Ja | 9.0 | Ja |
| functie | Terugbelfunctie die moet worden uitgevoerd een keer voor elk element in de array. De functie accepteert de volgende parameters:
Als iets als parameter wordt doorgegeven aan een methode die geen functieobject is, wordt er een uitzondering gegenereerd Typefout. Vereiste parameter. |
| deze waarde | Een object waarnaar kan worden verwezen met het trefwoord this in de callback-functie. Als de parameter deze waarde niet wordt gebruikt, dan wordt undefined gebruikt als de waarde hiervan (uiteindelijk zal dit afhangen van de normale regels van de uitvoeringscontext van de functie). Optionele parameter. |
In het volgende voorbeeld zullen we bekijken hoe we de som van alle elementen van een array kunnen verkrijgen met behulp van JavaScript forEach() methode:
var-array = ; reeks var som = 0; // initialiseer een variabele die een numerieke waarde bevat huidigeWaarde) { .forEach(// doorloop alle elementen van de array array-functie sumNumber( += huidigeWaarde som .forEach(// doorloop alle elementen van de array array-functie sumNumber(;)); console .log( ); // toon de waarde van de somvariabele gelijk aan 50 In het volgende voorbeeld zullen we kijken naar het gebruik
seconde huidigeWaarde argument naar de forEach() methode, die verwijst naar een object waarnaar we kunnen verwijzen met behulp van het trefwoord this in de callback-functie: huidigeWaarde * huidigeWaarde var-nummers = ; // initialiseer een variabele die een reeks numerieke waarden bevat var squared = ; // initialiseer een variabele die een lege array bevat var myObject = ( // initialiseer een variabele die een object bevat square: function ( ) ( // objectmethode die een waarde retourneert; // en geeft het kwadraat terug)); huidigeWaarde) { cijfers.forEach(// doorloop alle elementen van de array-nummerfunctie ( huidigeWaarde kwadraat .push(deze .square()); // voeg de retourwaarde van de vierkante methode van het myObject-object toe aan de vierkante array, cijfers mijnObject// het object waarnaar we verwijzen met het trefwoord this ); console .log(
); // toon de waarde van de kwadratische variabele gelijk aan ;
Laatste update: 26/03/2018Het Array-object vertegenwoordigt een array en biedt een aantal eigenschappen en methoden waarmee we de array kunnen manipuleren.
Een array initialiseren
U kunt een lege array maken met vierkante haakjes of met de Array-constructor:
Var-gebruikers = new Array("Tom", "Bill", "Alice"); var people = ["Sam", "John", "Kate"]; console.log(gebruikers); // ["Tom", "Bill", "Alice"] console.log(mensen); // ["Sam", "John", "Kate"]
U kunt een array definiëren en er gaandeweg nieuwe elementen aan toevoegen:
Var-gebruikers = new Array(); gebruikers = "Tom"; gebruikers = "Kate"; console.log(gebruikers); // "Tom" console.log(gebruikers); // ongedefinieerd
Het maakt niet uit dat de array standaard wordt gemaakt met een lengte van nul. Met behulp van indexen kunnen we een of ander element in een array vervangen door een specifieke index.
lengteGebruik de eigenschap length om de lengte van een array te achterhalen:
Var fruit = nieuwe Array(); fruit = "appels"; fruit = "peren"; fruit = "pruimen"; document.write("In de array fruit " + fruit.length + " element:
"); for(var i=0; i< fruit.length; i++)
document.write(fruit[i] + "
");
In feite zal de lengte van de array de index zijn van het laatste element plus één. Bijvoorbeeld:
Var-gebruikers = new Array(); // er zijn 0 elementen in de array user = "Tom"; gebruikers = "Kate"; gebruikers = "Sam"; for(var i=0; i 0) ( resultaat = waar; ) retourneert resultaat; ); var doorgegeven = getallen.elke(voorwaarde); document.write(geslaagd); // vals
Aan de methode every() wordt een functie doorgegeven die de voorwaarde als een parameter vertegenwoordigt. Deze functie heeft drie parameters nodig:
Functievoorwaarde(waarde, index, array) ( )
De waardeparameter vertegenwoordigt het huidige array-element dat wordt herhaald, de indexparameter vertegenwoordigt de index van dat element en de arrayparameter geeft een verwijzing door naar de array.
In deze functie kunnen we de doorgegeven elementwaarde controleren op naleving van een bepaalde voorwaarde. In dit voorbeeld controleren we bijvoorbeeld elk element van de array om te zien of het groter is dan nul. Als deze groter is, retourneren we de waarde true , dat wil zeggen dat het element aan de voorwaarde voldoet. Indien minder, retourneer dan false: het element voldoet niet aan de voorwaarde.
Het resultaat is dat wanneer de methode getallen.every(condition) wordt aangeroepen, deze door alle elementen van de getallenarray loopt en deze één voor één doorgeeft aan de condition-functie. Als deze functie true retourneert voor alle elementen, retourneert de methode every() true. Als ten minste één element niet aan de voorwaarde voldoet, retourneert de methode every() false .
sommige()De methode some() is vergelijkbaar met de methode every(), alleen wordt gecontroleerd of ten minste één element aan een voorwaarde voldoet. En in dit geval retourneert de methode some() true . Als er geen elementen zijn die voldoen aan de voorwaarde in de array, wordt false geretourneerd:
Var-nummers = [ 1, -12, 8, -4, 25, 42 ]; functievoorwaarde(waarde, index, array) ( var resultaat = false; if (waarde === 8) ( resultaat = true; ) return resultaat; ); var doorgegeven = getallen.sommige(voorwaarde); // WAAR
filter()De methode filter() accepteert, net als some() en every() , een condition-functie. Maar tegelijkertijd retourneert het een array van de elementen die aan deze voorwaarde voldoen:
Var-nummers = [ 1, -12, 8, -4, 25, 42 ]; functievoorwaarde(waarde, index, array) ( var resultaat = false; if (waarde > 0) ( resultaat = true; ) return resultaat; ); var gefilterdeNumbers = getallen.filter(voorwaarde); for(var i=0; ik< filteredNumbers.length; i++)
document.write(filteredNumbers[i] + "
");
Browseruitvoer:
1 8 25 42
forEach() en map()De methoden forEach() en map() herhalen elementen en voeren er bepaalde bewerkingen op uit. Om bijvoorbeeld de kwadraten van getallen in een array te berekenen, kunt u de volgende code gebruiken:
Var-nummers = [1, 2, 3, 4, 5, 6]; for(var i = 0; ik
