Laste ned presentasjonen
Presentasjon lastes. Vennligst vent
1
EcmaScript 5 Arrays Demonstrasjon av ny funksjonalitet støttet i IE 9
2
Kompabilitetstabell ES5 IE8, almost all red, IE9 almost all green.
3
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
4
Demo av ES5 Arrays Testside for ES5 arrays er tilgjengelig på: http://ie.microsoft.com/testdrive/HTML5/ECMAScript5Array/Default.html De nye metodene for ES5 Arrays er som følger (9 stk): indexOf lastIndexOf every some map filter reduce reduceRight
5
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.
6
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
7
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
8
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);
9
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 }
10
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
11
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 }
12
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
13
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
14
reduceRight Ikke gjennomgått her – spesiell funksjonalitet Se demo på følgende URL: http://ie.microsoft.com/testdrive/HTML5/ECMAScript5Array/Default.html
15
EcmaScript 5 Det er masse andre nyheter også I ES5, ikke bare håndtering av arrays!
16
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..
Liknende presentasjoner
