EcmaScript 5 Arrays Demonstrasjon av ny funksjonalitet støttet i IE 9

Kompabilitetstabell ES5  IE8, almost all red, IE9 almost all green.

EcmaScript 5  Ecmascript 5 er omtalt som ES5  ES5 er den nyeste standarden for Javascript  Nesten alt i ES5 er støttet i IE9  Nesten alt i ES5 er ikke støttet i IE8  IE9 støtter dog ikke strict mode  Med ES5 får man nye metoder for å håndtere arrays  Disse slidene vil demonstrere metodene som er nye for håndtering av arrays i JS vha. ES5

Demo av ES5 Arrays  Testside for ES5 arrays er tilgjengelig på:  De nye metodene for ES5 Arrays er som følger (9 stk): indexOf lastIndexOf every some map filter reduce reduceRight

Demo – kan kjøres med IE9 De fleste demoene vist her kan kjøres med IE9 Utviklerverktøy, trykk F12 i IE9. Bruk konsoll for å teste ut.

some Oppfører seg som Any i Linq. Returnerer true hvis det eksisterer et element eller flere ut fra et gitt predikat, som er en funksjon man sender inn til metoden (delegat). var nums = [ 1, 2, 3, 5, 4, 2, 4, 8]; var isEven = function (a) { return a % 2 == 0; }; nums.some(isEven); //true

every Oppfører seg som All i Linq. Returnerer true hvis alle elementer returnerer true for et et gitt predikat, som er en funksjon man sender inn til metoden (delegat). var nums = [ 1, 2, 3, 5, 4, 2, 4, 8]; var isEven = function (a) { return a % 2 == 0; }; nums.every(isEven); //false

forEach Oppfører seg litt som ForAll i Linq. Utfører operasjoner på et array og endrer elementene i arrayet. Igjen sender man inn en funksjon (delegat) som utfører handlinger på hvert enkelt element. Må ha ant. parametere som vist under. var nums = [4, 553, 13, 11, 8, 54, 3, 4]; var addTen = function(value, index, arr) { return arr[index] = arr[index] + 10; }; nums.forEach(addTen);

map Mapper et array om til et annet array. Benytter igjen en innsendt funksjon (delegat) for å mappe hvert enkelt element. var nums = [ 3, 5, 7, 9, 11, 4]; var negate = function (a) { return -a; }; nums.map(negate); -3,-5,-7,-9,-11,-4 { 0 : -3, 1 : -5, 2 : -7, 3 : -9, 4 : -11, 5 : -4 }

reduce Lar en benytte en funksjon man har definert som tar inn forrige element og neste element og utfører en reduce operasjon. Benyttet f.eks. i aggregerte funksjoner som summering. var nums = [1, 4, 3, 11, 5, 7, 11, 19, 4, -1, 4, 2, -3]; var sumNums = function (previousValue, nextValue) { return previousValue + nextValue; }; nums.reduce(sumNums); 67

filter På mange måter lik Where i Linq. Man sender inn en funksjon (delegat) som bestemmer om man skal ta med elementet I det resulterende arrayet, altså et predikat. var nums = [3, 4, 11, 45, 18, -5, -324, -223, 11, 3, 54, 4, 14]; var isEven = function (x) { return x % 2 === 0; }; nums.filter(isEven); 4,18,-324,54,4,14 { 0 : 4, 1 : 18, 2 : -324, 3 : 54, 4 : 4, 5 : 14 }

indexOf  indexOf – returnerer indeks på det første elementet som finnes i et array, returnerer -1 hvis det ikke finnes. var nums = [2, 4, 4, 9, 12, 14, 19, 20, 21, 12, 13, 7]; nums.indexOf(12); 4

lastIndexOf  lastIndexOf – returnerer indeks på det siste elementet som finnes i et array. Finnes det ikke returnes -1 som for indexOf. >> var nums = [2, 4, 4, 9, 12, 14, 19, 20, 21, 12, 13, 7]; >> nums.indexOf(12); 4 >> nums.lastIndexOf(12); 9

reduceRight  Ikke gjennomgått her – spesiell funksjonalitet  Se demo på følgende URL: 

EcmaScript 5  Det er masse andre nyheter også I ES5, ikke bare håndtering av arrays!

Oppsummering  Ecmascript 5 arrays gir mange nye funksjoner innenfor håndtering av arrays, som er en sentral datastruktur i Javascript.  Mange av de nye funksjonene finner man igjen tilsvarende funksjonalitet av i Linq. JS støtter chained operators, hvilket betyr at man kan håndtere arrays på en mer avansert måte.  Filter, reduce, reduceRight, map, indexOf, lastIndexOf, every, some, forEach støttes i IE 9, ikke IE 8..