• 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
• II. Itereren over array-achtige objecten
• Methoden gebruiken om echte arrays te herhalen
• Converteren naar een echte array
• Een opmerking over runtime-objecten

I. Itereren over echte arrays

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

methode Array.prototype.forEach ;

klassiek voor lus

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:

for...of loop (impliciet gebruik van iterator);

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:

Vara = ["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 door alle elementen van een array te itereren, maar daarnaast biedt ES5 nog een aantal handige methoden om door alle of sommige elementen te itereren, plus het uitvoeren van enkele acties erop:

• 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:

Var a = ["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 een “meer optimale” versie van gebruiken, waarin de lengte van de reeks wordt opgeslagen. reeks:

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

• HTML
• JavaScript

$("ul#myList").children().each(function())( console.log($(this).text()); )); // Resultaat: // HTML // CSS // 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 ) ));

Er is tekst van willekeurige lengte die moet worden weergegeven in een blok met een vaste hoogte en breedte. In dit geval moet, als de tekst niet volledig past, een tekstfragment dat volledig in het gegeven blok past worden weergegeven, waarna een weglatingsteken wordt geplaatst.

Deze taak is heel gebruikelijk, maar tegelijkertijd niet zo triviaal als het lijkt.

Optie voor tekst met één regel in CSS

In dit geval kunt u de eigenschap text-overflow: ellips gebruiken. In dit geval moet de container de eigendom hebben overloop gelijkwaardig verborgen of klem

Blok ( breedte : 250px ; witruimte : nowrap ; overflow : verborgen ; tekst-overflow : ellips ; )

Optie voor tekst met meerdere regels in CSS

De eerste manier om tekst met meerdere regels bij te snijden met behulp van CSS-eigenschappen is het toepassen van pseudo-elementen :voor En :na. Laten we aan de slag gaan met HTML-opmaak

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Als u een minimum aan inspanning heeft, is de inspanning die u moet doen om de lobortus te voorkomen niet van toepassing op de gebruikelijke gevolgen. Dit is een zeer pijnlijke ervaring in het vulputaire velit esse die daaruit voortvloeit, waardoor een feugiat nulla facilisis kan worden veroorzaakt door eros en accumsan en een groot aantal dignissim die een blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

En nu de eigendommen zelf

Box ( overflow : verborgen ; hoogte : 200px ; breedte : 300px ; lijnhoogte : 25px ; ) .box :before ( inhoud : "" ; float : links ; breedte : 5px ; hoogte : 200px ; ) .box > * :first -child ( float : rechts ; breedte : 100% ; margin-left : -5px ; ) .box :after ( inhoud : "\02026" ; box-sizing : content-box ; float : rechts ; positie : relatief ; top : -25px; breedte: 3em; opvulling rechts: 5px; achtergrondgrootte: 100% 100%;

Een andere manier is om de eigenschap column-width te gebruiken, waarmee we de kolombreedte voor tekst met meerdere regels instellen. Wanneer u deze methode gebruikt, is het echter niet mogelijk om aan het einde een weglatingsteken in te stellen. HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Als u een minimum aan inspanning heeft, is de inspanning die u moet doen om de lobortus te voorkomen niet van toepassing op de gebruikelijke gevolgen. Dit is een zeer pijnlijke ervaring in het vulputaire velit esse die daaruit voortvloeit, waardoor een feugiat nulla facilisis kan worden veroorzaakt door eros en accumsan en een groot aantal dignissim die een blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Blok (overloop: verborgen; hoogte: 200px; breedte: 300px; ) .block__inner ( -webkit-kolombreedte: 150px; -moz-kolombreedte: 150px; kolombreedte: 150px; hoogte: 100%; )

De derde manier om tekst met meerdere regels op te lossen met behulp van CSS is voor Webkit-browsers. Daarin zullen we verschillende specifieke eigenschappen met het voorvoegsel moeten gebruiken -webkit. De belangrijkste is -webkit-line-clamp, waarmee u het aantal regels kunt opgeven dat in een blok moet worden uitgevoerd. De oplossing is mooi, maar eerder beperkt vanwege het werk in een beperkte groep browsers

Blok (overloop: verborgen; tekstoverloop: weglatingsteken; weergave: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: verticaal;)

Optie voor meerregelige tekst in JavaScript

Hier wordt een extra onzichtbaar blok gebruikt, waarin onze tekst in eerste instantie wordt geplaatst, waarna deze teken voor teken wordt verwijderd totdat de hoogte van dit blok kleiner of gelijk wordt aan de hoogte van het gewenste blok. En aan het einde wordt de tekst verplaatst naar het originele blok.

var blok = document. querySelector(".block"), tekst = blok. innerHTML, kloon = document. createElement("div");

kloon stijl. positie = "absoluut";

(function ($ ) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( position : "absolute" , zichtbaarheid: "verborgen" , hoogte: "auto" )); elke (functie () (afkappen ($ (dit)); ));