différents types d'array - javascript
publicité
D i f f é r e n t s T y p e s d ' a r r ays ( objets semblables aux tableaux ) J AVA S C R I P T (Programmation Internet) V O L . X X I I Po u r D é b u t a n t J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga +243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818 [email protected] Qu’est-ce qui se passe quand vous appliquez un « OR binaire » par exemple au nombre « 3000000000.1 » comme ceci : 3000000000.1 | 0 ? Ça donnera 3000000000.1 | 0 = -1294967296 Vous y comprenez quelque chose ? Le code ci-après vous l’explique très facilement grâce aux UintXArray, IntXArray, FloatXArray bref ce qui est convenu d’appeler Typed Array. Il existe en effet deux types fondamentaux d’Arrays : les Arrays ordinaires et les ainsi dits « Typed Arrays » qui se rapportent aux nombres typés dont BigInt et float32 selon le navigateur. J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII LES « TYPED ARRAYS » : D’abord il faut savoir que « TypedArray » n’est pas un type de données ou un objet défini, mais une appellation générique. Les Typed Arrays (Arrays typés) traitent tous leurs éléments constitutifs comme étant de leur propre type donc d’un même type, contrairement aux Arrays ordinaires qui peuvent regrouper toute sorte de types. Les deux groupes principaux d’Arrays typées sont : I. Pour les entiers (« int ») : 1. Les Arrays Signées ([Signed] Integer Arrays) dont les éléments sont traités comme des nombres signés (le bit d’extrême gauche étant considéré comme étant le flag du signe) : les IntXArray 2. Les Arrays Non Signées (Unsigned Integer Arrays) dont tous les bits sont considérés comme pondérant le nombre : les UintXArray. Dans les deux cas ci-dessus, « X » peut avoir l’une des valeurs suivantes : 8, 16, 32. Dans le deuxième type (Arrays Non Signées [Unsigned Integer Arrays]) existe en outre un Typed Array « Uint8ClampedArray » dont les éléments sont considérés comme étant des « entiers 8bits non signés » (de la taille d’un octet) et dont la valeur est plafonnée à 255 : toute valeur d’élément supérieur à 255 est automatiquement ramenée à 255. Il n’existe pas encore le Int64Array ni le Uint64Array, mais certains browsers comme le Yandex Version 18.9.1.954 proposent les types BigInt64Array et BigUint64Array, qui n’existent pas dans Firefox Quantum 57.0. II. Pour les rationnels (« float ») il existe : Différents types d’Arrays - 2/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII « Float32Array » et « Float64Array ». <script type="text/javascript"> "use strict"; // let bI = BigInt(-1) // Pour FIREFOX : ReferenceError: // BigInt is not defined test.html:6:7 // console.log("BigInt(-1) =",bI); // let f32 = float32(-1) // Pour FIREFOX : ReferenceError: // float32 is not defined // console.log("float32(-1) =",f32); console.log(".!. ATTENTION .!.") let m=3000000000.1 console.log(m+" | 0 = ", m | 0); (function(){ let b=null; console.log("Parce que En DOUBLE-WORD (32 bits) : ") console.log(m +"d = "+ (b=m.toString(2))+"b"); console.log("10110010110100000101111000000000b ="); console.log( "1011'0010''1101'0000'''0101'1110''0000'0000b = ", m|0 + "d"); console.log( "Notez le bit (ou flag) du signe qui est à 1."); } )(); console.log("".padEnd(3,"\n")); console.log("ES10 n'utilise pas encore le 64 bits : ") m=new Uint8Array ([3000000000.1]) console.log("Uint8Array ([30000000000.1]) = "+m.toString()); m=new Uint16Array ([3000000000.1]) console.log( "Uint16Array ([30000000000.1]) = "+m.toString()); Différents types d’Arrays - 3/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII m=new Uint32Array ([3000000000.1]) console.log( "Uint32Array ([30000000000.1]) = "+m.toString()); console.log(""); m=new Uint8ClampedArray ([3000000000.1]) console.log( "Uint8ClampedArray ([30000000000.1]) = "+m.toString()); console.log(""); m=new Int8Array ([3000000000.1]) console.log("Int8Array ([30000000000.1]) = "+m.toString()); m=new Int16Array ([3000000000.1]) console.log("Int16Array ([30000000000.1]) = "+m.toString()); m=new Int32Array ([3000000000.1]) console.log("Int32Array ([30000000000.1]) = "+m.toString()); console.log(""); m=new Float32Array ([3000000000.1]) console.log( "Float32Array ([30000000000.1]) = "+m.toString()); m=new Float64Array ([3000000000.1]) console.log( "Float64Array ([30000000000.1]) = "+m.toString()); console.log(""); // m=new BigInt64Array ([3000000000]) // Pour FIREFOX : ReferenceError: // BigInt64Array is not defined // console.log("BigInt64Array ([30000000000]) = "+m.toStrin g()); // m=new BigUint64Array ([3000000000]) // Pour FIREFOX :ReferenceError: // BigUint64Array is not defined Différents types d’Arrays - 4/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII // console.log("BigUint64Array ([30000000000]) = "+m.toStri ng()); </script> Exécution avec YANDEX : test.html:5 BigInt(-1) = -1n test.html:12 .!. ATTENTION .!. test.html:14 3000000000.1 | 0 = -1294967296 test.html:18 Parce que En DOUBLE-WORD (32 bits) : test.html:19 3000000000.1d = 10110010110100000101111000000000.000110011001100110011b test.html:20 10110010110100000101111000000000b = test.html:21 1011'0010''1101'0000'''0101'1110''0000'0000b = -1294967296 test.html:24 Notez le bit (ou flag) du signe qui est à 1. test.html:30 test.html:31 test.html:34 test.html:37 test.html:40 test.html:42 test.html:45 test.html:47 test.html:50 test.html:53 test.html:56 test.html:58 test.html:61 test.html:64 ES10 n'utilise pas encore le 64 Uint8Array ([30000000000.1]) = Uint16Array ([30000000000.1]) = Uint32Array ([30000000000.1]) = bits : 0 24064 3000000000 Uint8ClampedArray ([30000000000.1]) = 255 Int8Array ([30000000000.1]) = 0 Int16Array ([30000000000.1]) = 24064 Int32Array ([30000000000.1]) = -1294967296 Float32Array ([30000000000.1]) = 3000000000 Float64Array ([30000000000.1]) = 3000000000.1 Différents types d’Arrays - 5/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Exécution avec FIREFOX : .!. ATTENTION .!. 3000000000.1 | 0 = test.html:12:3 -1294967296 test.html:14:3 Parce que En DOUBLE-WORD (32 bits) : test.html:18:8 3000000000.1d = 10110010110100000101111000000000.000110011001100110011b 10110010110100000101111000000000b = 1011'0010''1101'0000'''0101'1110''0000'0000b = -1294967296 Notez le bit (ou flag) du signe qui est à 1. test.html:21:8 ES10 n'utilise pas encore le 64 bits : test.html:31:4 Uint8Array ([30000000000.1]) = 0 Uint16Array ([30000000000.1]) = 24064 Uint32Array ([30000000000.1]) = 3000000000 test.html:34:4 test.html:37:4 test.html:40:4 Uint8ClampedArray ([30000000000.1]) = 255 test.html:45:4 Int8Array ([30000000000.1]) = 0 Int16Array ([30000000000.1]) = 24064 Int32Array ([30000000000.1]) = -1294967296 test.html:50:4 test.html:53:4 test.html:56:4 Float32Array ([30000000000.1]) = 3000000000 test.html:61:4 Float64Array ([30000000000.1]) = 3000000000.1 test.html:64:4 Les UintxArray et IntxArray sont des exemples d’Arrays qui signifient en l’occurrence « Unsigned Integer xBytes Array » ou « Array d’entiers Non-Signés à x Bytes », et « [Signed] Integer xBytes Array » ou « Array d’entiers Signés à x Bytes », x étant un nombre parmi ceux-ci : 8 , 16 ou 32. Différents types d’Arrays - 6/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu TypedArray objects Value Range Type JavaScript Tome-XXII Size in byte s Description Web IDL type Equivalent C type byte int8_t Int8Array -128 to 127 1 8-bit two's complement signed integer Uint8Array 0 to 255 1 8-bit unsigned integer octet uint8_t 1 8-bit unsigned integer (clamped) octet uint8_t short int16_t Uint8ClampedAr ray 0 to 255 Int16Array -32768 to 32767 2 16-bit two's complement signed integer Uint16Array 0 to 65535 2 16-bit unsigned integer unsigned short uint16_ t Int32Array 21474836 48 to 21474836 47 4 32-bit two's complement signed integer long int32_t Uint32Array 0 to 42949672 4 32-bit unsigned unsigned long uint32_ t Différents types d’Arrays - 7/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu Float32Array Float64Array JavaScript Tome-XXII 95 integer 1.2x1038 to 3.4x1038 4 32-bit IEEE floati ng point number ( 7 significant digits e.g. 1.1234567 ) unrestricted float float 8 64-bit IEEE floating point number (16 significant digits e.g. 1.123...15) unrestricted double double 5.0x10324 to 1.8x10308 Pour connaître la taille en bytes d’une « TypedArray » il suffit d’utiliser la propriété BYTES_PER_ELEMENT. Cette taille en bytes détermine la valeur du plus grand nombre stockable dans chacun des éléments de l’Array (signé ou pas) : <script type="text/javascript"> "use strict"; console.log("Int8Array.BYTES_PER_ELEMENT ="+ Int8Array.BYTES_PER_ELEMENT); console.log("Uint8Array.BYTES_PER_ELEMENT ="+ Uint8Array.BYTES_PER_ELEMENT); console.log("Uint8ClampedArray.BYTES_PER_ELEMENT ="+ Uint8ClampedArray.BYTES_PER_ELEMENT); console.log("Int16Array.BYTES_PER_ELEMENT ="+ Int16Array.BYTES_PER_ELEMENT); console.log("Uint16Array.BYTES_PER_ELEMENT ="+ Uint16Array.BYTES_PER_ELEMENT); console.log("Int32Array.BYTES_PER_ELEMENT ="+ Int32Array.BYTES_PER_ELEMENT); console.log("Uint32Array.BYTES_PER_ELEMENT ="+ Uint32Array.BYTES_PER_ELEMENT); console.log("Float32Array.BYTES_PER_ELEMENT ="+ Différents types d’Arrays - 8/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Float32Array.BYTES_PER_ELEMENT); console.log("Float64Array.BYTES_PER_ELEMENT ="+ Float64Array.BYTES_PER_ELEMENT); </script> Int8Array.BYTES_PER_ELEMENT =1 Uint8Array.BYTES_PER_ELEMENT =1 Uint8ClampedArray.BYTES_PER_ELEMENT =1 Int16Array.BYTES_PER_ELEMENT =2 Uint16Array.BYTES_PER_ELEMENT =2 Int32Array.BYTES_PER_ELEMENT =4 Uint32Array.BYTES_PER_ELEMENT =4 Float32Array.BYTES_PER_ELEMENT =4 Float64Array.BYTES_PER_ELEMENT =8 test.html:2:5 test.html:4:5 test.html:6:5 test.html:8:5 test.html:10:5 test.html:12:5 test.html:14:5 test.html:16:5 test.html:18:5 MAXINT dans chaque taille de registre ou de la variable : <script type="text/javascript"> "use strict"; console.log( "1 Byte (BYTE) : 0xF = 8 Bits) = ", 0xF.toString()); console.log( "2 Byte (WORD) : 0xFF = 16 Bits) = ", 0xFF.toString()); console.log( "4 Byte (DBLE WORD): 0xFFFF = 32 Bits) = ", 0xFFFF.toString()); console.log( "4 Byte (QUAD WORD): 0xFFFFFFFF = 64 Bits) = ", 0xFFFFFFFF.toString()) </script> Différents types d’Arrays - 9/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Différence entre <script type="text/javascript"> "use strict"; let arr = new Int32Array([91,68,44,43,61,75,16,89,65,96]); console.log("arr.BYTES_PER_ELEMENT=" , arr.BYTES_PER_ELEMENT); console.log("arr.length =" , arr.length); console.log("arr.byteLength =" , arr.byteLength); </script> arr.BYTES_PER_ELEMENT= 4 arr.length = 10 arr.byteLength = 40 test.html:5:3 test.html:8:3 test.html:11:3 Comment accéder individuellement aux éléments d’un Typed Array ? Tout bonnement, exactement comme avec les Arrays ordinaires. Mais les Typed Arrays sont des objets itérables, c’est-à-dire qu’on peut aussi les parcourir avec la méthode « .next » de leur itérateur. L’itérateur est retourné par les méthodes « arr.entries() » pour parcourir toutes les entries (labels ET valeurs) ou « arr.keys() » pour parcourir toutes les entries (labels) ou « arr.values() » pour parcourir seulement les valeurs (values). Différents types d’Arrays - 10/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII <script type="text/javascript"> "use strict"; let t; var arr = new Int32Array([ 58,75,42,32,92,79,35,84,18,11 ]); console.log("Nos « entries » :"); var iterator = arr.entries(); t=""; for(let i=0; i<arr.length; i++){ t += iterator.next().value + " | "; } console.log(t); console.log("".padEnd(25,"=")); console.log("Nos « keys » :"); var iterator = arr.keys(); t=""; for(let i=0; i<arr.length; i++){ t += iterator.next().value + " | "; } console.log(t); console.log("".padEnd(25,"=")); console.log("Nos « values » :"); var iterator = arr.values(); t=""; Différents types d’Arrays - 11/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII for(let i=0; i<arr.length; i++){ t += iterator.next().value + " | "; } console.log(t); console.log("".padEnd(25,"=")); t=""; for(let k=0,l=arr.length ; k<l ; k++){ t+="arr["+k+"] =" + arr[k] + " | "; } console.log(t); </script> Nos « entries » : test.html:9:4 0,58 | 1,75 | 2,42 | 3,32 | 4,92 | 5,79 | 6,35 | 7,84 | 8,18 | 9,11 | test.html:16:4 ========================= test.html:19:1 Nos « keys » : test.html:22:4 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | test.html:29:4 ========================= test.html:32:1 Nos « values » : test.html:35:4 58 | 75 | 42 | 32 | 92 | 79 | 35 | 84 | 18 | 11 | test.html:42:4 ========================= test.html:45:1 arr[0] =58 | arr[1] =75 | arr[2] =42 | arr[3] =32 | arr[4] =92 | arr[5] =79 | Différents types d’Arrays - 12/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu arr[6] =35 | arr[7] =84 | arr[8] =18 | arr[9] =11 | JavaScript Tome-XXII test.html:52:4 Un autre exemple : <script type="text/javascript"> "use strict"; let it; const arr = new Int32Array([65,48,91]); console.log("Notre Array: arr =" , arr); console.log("Notre Array: arr.toString() =" , arr.toString()); console.log("\n\nAvec la Boucle FOR :"); for(var i=0 , l=arr.length ; i<l ; i++){ console.log(arr[i]); } console.log("Hors liste :",arr[i]); // Hors liste ! console.log(""); // Itérateurs d'un Typed Array console.log("arr.entries() =", arr.entries()); console.log( "arr.keys() =", arr.keys()); console.log( "arr.values() =", arr.values()); console.log("\n\narr.entries()"); it = arr.entries(); // Itérateur lié aux entries. console.log(it); for(i=0; i<arr.length; i++){ console.log("it.next().value=" , it.next().value); } console.log("Hors liste :",it.next().value); // Hors liste ! Différents types d’Arrays - 13/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII console.log("\n\narr.keys()"); it = arr.entries(); // Itérateur lié aux entries. console.log(it); for(i=0; i<arr.length; i++){ console.log("it.next().value=" , it.next().value); } console.log("Hors liste :",it.next().value); // Hors liste ! console.log("\n\narr.values()"); it = arr.values(); // Itérateur lié aux values. console.log(it); for(i=0; i<arr.length; i++){ console.log("it.next().value=" , it.next().value); } console.log("Hors liste :",it.next().value); // Hors liste ! </script> Notez la différence entre « arr.values() » qui donne accès à l’itérateur connecté aux « values » des éléments du typed Array, et « it.next().value » qui donne accès à une « value » précise. Notez aussi que déclarer une Array « const » n’empêche pas de « jouer » librement avec tous ses éléments. Exécution du code ci-dessus : Notre Array: arr = Int32Array(3) [ 65, 48, 91 ] test.html:4:4 0: 65 1: 48 2: 91 buffer: ArrayBuffer { byteLength: 12 } byteLength: 12 <prototype>: ArrayBufferPrototype { … } byteLength: 12 Différents types d’Arrays - 14/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII byteOffset: 0 length: 3 <prototype>: Int32ArrayPrototype { … } byteLength: Getter constructor: function ArrayBuffer() isView: function isView() length: 1 name: "ArrayBuffer" prototype: ArrayBufferPrototype { … } byteLength: Getter constructor: function ArrayBuffer() slice: function slice() Symbol(Symbol.toStringTag): "ArrayBuffer" <prototype>: Object { … } __defineGetter__: function __defineGetter__() __defineSetter__: function __defineSetter__() __lookupGetter__: function __lookupGetter__() __lookupSetter__: function __lookupSetter__() constructor: function Object() hasOwnProperty: function hasOwnProperty() isPrototypeOf: function isPrototypeOf() propertyIsEnumerable: function propertyIsEnumerable() toLocaleString: function toLocaleString() toSource: function toSource() toString: function toString() valueOf: function valueOf() Symbol(Symbol.species): Getter <prototype>: function () apply: function apply() arguments: null bind: function bind() call: function call() caller: null constructor: function Function() Différents types d’Arrays - 15/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII length: 0 name: "" toSource: function toSource() toString: function toString() Symbol(Symbol.hasInstance): function Symbol.hasInstance() <prototype>: Object { … } __defineGetter__: function __defineGetter__() __defineSetter__: function __defineSetter__() __lookupGetter__: function __lookupGetter__() __lookupSetter__: function __lookupSetter__() constructor: function Object() hasOwnProperty: function hasOwnProperty() isPrototypeOf: function isPrototypeOf() propertyIsEnumerable: function propertyIsEnumerable() toLocaleString: function toLocaleString() toSource: function toSource() toString: function toString() valueOf: function valueOf() slice: function slice() Symbol(Symbol.toStringTag): "ArrayBuffer" <prototype>: Object { … } byteLength: 12 Différents types d’Arrays - 16/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII byteOffset: 0 length: 3 <prototype>: Int32ArrayPrototype { … } BYTES_PER_ELEMENT: 4 constructor: function Int32Array() <prototype>: ??? { … } buffer: Getter byteLength: Getter byteOffset: Getter constructor: function TypedArray() copyWithin: function copyWithin() entries: function entries() every: function every() fill: function fill() filter: function filter() find: function find() findIndex: function findIndex() forEach: function forEach() includes: function includes() indexOf: function indexOf() join: function join() keys: function keys() lastIndexOf: function lastIndexOf() length: Getter map: function map() reduce: function reduce() reduceRight: function reduceRight() reverse: function reverse() set: function set() slice: function slice() some: function some() sort: function sort() subarray: function subarray() toLocaleString: function toLocaleString() toString: function toString() values: function values() Symbol(Symbol.iterator): function values() Symbol(Symbol.toStringTag): Getter <prototype>: Object { … } Différents types d’Arrays - 17/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Notre Array: arr.toString() = 65,48,91 test.html:7:4 Avec la Boucle FOR : 65 48 91 Hors liste : undefined test.html:10:4 test.html:12:7 test.html:12:7 test.html:12:7 test.html:14:4 arr.entries() = Array Iterator { } test.html:20:4 <prototype>: Array Iterator next: function next() Symbol(Symbol.toStringTag): "Array Iterator" <prototype>: Object { … } Symbol(Symbol.iterator): function Symbol.iterator() <prototype>: Object { … } arr.keys() = Array Iterator { } test.html:21:4 <prototype>: Array Iterator next: function next() Symbol(Symbol.toStringTag): "Array Iterator" <prototype>: Object { … } Symbol(Symbol.iterator): function Symbol.iterator() <prototype>: Object { … } arr.values() = Array Iterator { } test.html:22:4 <prototype>: Array Iterator next: function next() Symbol(Symbol.toStringTag): "Array Iterator" <prototype>: Object { … } Symbol(Symbol.iterator): function Symbol.iterator() <prototype>: Object { … } Différents types d’Arrays - 18/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII arr.entries() Array Iterator { } test.html:25:4 test.html:27:4 it.next().value= Array [ 0, 65 ] (2) […] 0: 0 1: 65 length: 2 <prototype>: Array [] test.html:30:7 it.next().value= Array [ 1, 48 ] it.next().value= Array [ 2, 91 ] Hors liste : undefined test.html:30:7 test.html:30:7 test.html:33:4 arr.keys() Array Iterator { } it.next().value= Array [ 0, 65 ] it.next().value= Array [ 1, 48 ] it.next().value= Array [ 2, 91 ] Hors liste : undefined test.html:37:4 test.html:39:4 test.html:42:7 test.html:42:7 test.html:42:7 test.html:45:4 arr.values() Array Iterator { } it.next().value= 65 it.next().value= 48 it.next().value= 91 Hors liste : undefined test.html:49:4 test.html:51:4 test.html:54:7 test.html:54:7 test.html:54:7 test.html:57:4 Combien de fois un élément se retrouve dans une Typed Array ? La solution, avec une fonction CALLBACK, en l’occurrence « r = Array . filter ( fc ); » <script type="text/javascript"> "use strict"; Différents types d’Arrays - 19/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII let Max=0, r, ref, eg=[] , c=[], n=0, tot=0; const ar = new Int32Array([ 15,17,12,10,14,15,12,11,10,16, 20,11,14,20,17,19,13,11,19,20, 15,17,18,17,18,17,15,13,15,15, 11,13,16,17,16,20,14,10,20,14, 20,16,17,14,15,18,13,20,18,18 ]); for(let k=0,l=ar.length ; k<l ; k++){ Max = Math.max (Max, ar[k]); c[k]=0; } console.log("TypedArray initiale: "+ar); console.log(""); let fc = (element, index, array) => element==ref; console.log("Les éléments égaux : "); for(let k=0,l=ar.length ; k<l ; k++){ ref = ar[k]; r = ar.filter(fc); console.log( String(k).padStart(3," ") , " : " , r); eg[r[0]]=r[0];c[r[0]]+=1; } let t=""; for(let k=0,l=ar.length ; k<=Max ; k++){ if(eg[k]) { t+=eg[k]+" ["+c[k]+"×] | "; n++; tot+=c[k] Différents types d’Arrays - 20/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII } } console.log(t); console.log("Un Total de",tot,"nombres,"); console.log("dont",n,"différents."); </script> TypedArray initiale: 15,17,12,10,14,15,12,11,10,16,20,11,14,20,17,19,13,11,19,20,15, 17,18,17,18,17,15,13,15,15,11,13,16,17,16,20,14,10,20,14,20,16, 17,14,15,18,13,20,18,18 test.html:16:4 Les éléments égaux : 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 : : : : : : : : : : : : : : : : : : : : : : : : : : test.html:23:4 Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ] Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ] Int32Array [ 12, 12 ] Int32Array(3) [ 10, 10, 10 ] Int32Array(5) [ 14, 14, 14, 14, 14 ] Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ] Int32Array [ 12, 12 ] Int32Array(4) [ 11, 11, 11, 11 ] Int32Array(3) [ 10, 10, 10 ] Int32Array(4) [ 16, 16, 16, 16 ] Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ] Int32Array(4) [ 11, 11, 11, 11 ] Int32Array(5) [ 14, 14, 14, 14, 14 ] Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ] Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ] Int32Array [ 19, 19 ] Int32Array(4) [ 13, 13, 13, 13 ] Int32Array(4) [ 11, 11, 11, 11 ] Int32Array [ 19, 19 ] Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ] Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ] Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ] Int32Array(5) [ 18, 18, 18, 18, 18 ] Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ] Int32Array(5) [ 18, 18, 18, 18, 18 ] Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ] Différents types d’Arrays - 21/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu 26 : Int32Array(7) [ 15, 15, 27 : Int32Array(4) [ 13, 13, 28 : Int32Array(7) [ 15, 15, 29 : Int32Array(7) [ 15, 15, 30 : Int32Array(4) [ 11, 11, 31 : Int32Array(4) [ 13, 13, 32 : Int32Array(4) [ 16, 16, 33 : Int32Array(7) [ 17, 17, 34 : Int32Array(4) [ 16, 16, 35 : Int32Array(7) [ 20, 20, 36 : Int32Array(5) [ 14, 14, 37 : Int32Array(3) [ 10, 10, 38 : Int32Array(7) [ 20, 20, 39 : Int32Array(5) [ 14, 14, 40 : Int32Array(7) [ 20, 20, 41 : Int32Array(4) [ 16, 16, 42 : Int32Array(7) [ 17, 17, 43 : Int32Array(5) [ 14, 14, 44 : Int32Array(7) [ 15, 15, 45 : Int32Array(5) [ 18, 18, 46 : Int32Array(4) [ 13, 13, 47 : Int32Array(7) [ 20, 20, 48 : Int32Array(5) [ 18, 18, 49 : Int32Array(5) [ 18, 18, JavaScript Tome-XXII 15, 15, 15, 15, 15 ] 13, 13 ] 15, 15, 15, 15, 15 ] 15, 15, 15, 15, 15 ] 11, 11 ] 13, 13 ] 16, 16 ] 17, 17, 17, 17, 17 ] 16, 16 ] 20, 20, 20, 20, 20 ] 14, 14, 14 ] 10 ] 20, 20, 20, 20, 20 ] 14, 14, 14 ] 20, 20, 20, 20, 20 ] 16, 16 ] 17, 17, 17, 17, 17 ] 14, 14, 14 ] 15, 15, 15, 15, 15 ] 18, 18, 18 ] 13, 13 ] 20, 20, 20, 20, 20 ] 18, 18, 18 ] 18, 18, 18 ] 10 [3×] | 11 [4×] | 12 [2×] | 13 [4×] | 14 [5×] | 15 [7×] | 16 [4×] | 17 [7×] | 18 [5×] | 19 [2×] | 20 [7×] | test.html:43:4 Un Total de 50 nombres, dont 11 différents. test.html:44:4 test.html:45:4 Les Arrays typées peuvent être parcourues soit avec une boucle ordinaire ( for... el [ idx ] ) soit avec une itérateur : <script type="text/javascript"> let t; "use strict"; var ar = new Uint32Array( Différents types d’Arrays - 22/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII [30, 38, 95, 66, 69, 15, 76, 10, 92, 99 ] ); console.log(ar); console.log("".padEnd(25,"=")); t=""; for(let i=0 ; i < ar.length ; i++){ t += ar[i]+" | " } console.log(t); console.log("".padEnd(25,"=")); var s = ar.subarray(3, 8); console.log("La Nouvelle Uint32Array : "); console.log(s); console.log("".padEnd(25,"=")); t=""; var iterator = s.values(); for(let i=0 ; i < s.length ; i++){ t += iterator.next().value + " | "; } console.log(t); </script> Uint32Array(10) [ 30, 38, 95, 66, 69, 15, 76, 10, 92, 99 ] test.html:7:5 Différents types d’Arrays - 23/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII ========================= test.html:10:1 30 | 38 | 95 | 66 | 69 | 15 | 76 | 10 | 92 | 99 | test.html:17:5 ========================= test.html:21:1 La Nouvelle Uint32Array : test.html:25:5 Uint32Array(5) [ 66, 69, 15, 76, 10 ] test.html:26:5 ========================= test.html:30:1 66 | 69 | 15 | 76 | 10 | test.html:38:5 La méthode « typedArray1 . set ( typedArray2 , pos ) » remplace les éléments de la TypedArray1 par ceux de la TypedArray2 à partir de la positon « p » dans la TypedArray1. Cette méthode n’est pas disponible avec l’objet Array. <script type="text/javascript"> const ar1 = new Uint16Array([77,33,44,88,11,55,66,22,00,99 ]); console.log("Array initiale:\n"+ar1); console.log("Initial length ="+ar1.length); console.log(""); const ar2 = new Uint32Array([600,680,650 ]); console.log("Ar1:\n"+ar1); console.log("Ar2:\n"+ar2); ar1.set(ar2, 3); console.log("ar1.set(ar2, 3) =\n"+ar1); console.log("Final length ="+ar1.length); console.log(""); Différents types d’Arrays - 24/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII console.log(""); const ar3 = new Uint8ClampedArray([20,50,30 ]); console.log("Ar1:\n"+ar1); console.log("Ar3:\n"+ar3); ar1.set(ar3, 5); console.log("ar1.set(ar3, 5) =\n"+ar1); console.log("Final length ="+ar1.length); console.log(""); const ar4 = new Uint8ClampedArray([700,750,720 ]); console.log("Ar1:\n"+ar1); console.log("Ar4:\n"+ar4); ar1.set(ar4, 6); console.log("ar1.set(ar4, 6) =\n"+ar1); console.log("Final length ="+ar1.length); </script> Array initiale: 77,33,44,88,11,55,66,22,0,99 test.html:4:3 Initial length =10 test.html:5:3 Ar1: 77,33,44,88,11,55,66,22,0,99 test.html:11:3 Ar2: 600,680,650 test.html:12:3 ar1.set(ar2, 3) = 77,33,44,600,680,650,66,22,0,99 Final length =10 test.html:15:3 Ar1: 77,33,44,600,680,650,66,22,0,99 test.html:22:3 Ar3: 20,50,30 test.html:23:3 ar1.set(ar3, 5) = 77,33,44,600,680,20,50,30,0,99 test.html:25:3 Final length =10 test.html:26:3 Ar1: 77,33,44,600,680,20,50,30,0,99 Ar4: 255,255,255 Différents types d’Arrays - 25/76 - test.html:32:3 test.html:33:3 samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII ar1.set(ar4, 6) = 77,33,44,600,680,20,255,255,255,99 Final length =10 test.html:36:3 Remarquez ci-dessous que le nombre contenu dans un élément d’un typedArray ne peut pas dépasser la valeur maximale autorisée pour la taille en bits de ce type. Ici const ar1 = new Uint8Array([77,33,44,88,11,55,66,22,00,99 ]); L’Array ar1 ne peut contenir que des entiers 8 bits non signés, donc sa valeur maximale = 255. Tous les bits de gauche au-delà de la 8è case ou position en comptant de la droite vers la gauche, sont ignorés. Idem pour les autres tailles 16 bits et 32 bits (jusqu’aujourd’hui =samedi 17 novembre 2018 - 9:39:05 AM=, pas encore de 64 bits même avec le ES10 ou Ecmascript 2019 [de l’année prochaine]). Quant au Uint8ClampedArray Ce sont des entiers non signés inférieurs à 255 et les valeurs supérieures à 255 sont automatiquement ramenées à 255. Il convient donc dès le départ de bien savoir avec quelles valeurs on aura à travailler. Voici comment le même programme que ci-dessus affiche avec const ar1 = new Uint8Array <script type="text/javascript"> const ar1 = new Uint8Array([77,33,44,88,11,55,66,22,00,99 ]); console.log("Array initiale:\n"+ar1); console.log("Initial length ="+ar1.length); console.log(""); Différents types d’Arrays - 26/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII const ar2 = new Uint32Array([600,680,650 ]); console.log("Ar1:\n"+ar1); console.log("Ar2:\n"+ar2); ar1.set(ar2, 3); console.log("ar1.set(ar2, 3) =\n"+ar1); console.log("Final length ="+ar1.length); console.log(""); console.log(""); const ar3 = new Uint8ClampedArray([20,50,30 ]); console.log("Ar1:\n"+ar1); console.log("Ar3:\n"+ar3); ar1.set(ar3, 5); console.log("ar1.set(ar3, 5) =\n"+ar1); console.log("Final length ="+ar1.length); console.log(""); const ar4 = new Uint8ClampedArray([700,750,720 ]); console.log("Ar1:\n"+ar1); console.log("Ar4:\n"+ar4); ar1.set(ar4, 6); console.log("ar1.set(ar4, 6) =\n"+ar1); console.log("Final length ="+ar1.length); </script> Array initiale: 77,33,44,88,11,55,66,22,0,99 test.html:4:3 Initial length =10 test.html:5:3 Ar1: 77,33,44,88,11,55,66,22,0,99 test.html:11:3 Ar2: 600,680,650 test.html:12:3 ar1.set(ar2, 3) = 77,33,44,88,168,138,66,22,0,99 test.html:14:3 Final length =10 test.html:15:3 Différents types d’Arrays - 27/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Ar1: 77,33,44,88,168,138,66,22,0,99 test.html:22:3 Ar3: 20,50,30 test.html:23:3 ar1.set(ar3, 5) = 77,33,44,88,168,20,50,30,0,99 test.html:25:3 Final length =10 test.html:26:3 Ar1: 77,33,44,88,168,20,50,30,0,99 test.html:32:3 Ar4: 255,255,255 test.html:33:3 ar1.set(ar4, 6) = 77,33,44,88,168,20,255,255,255,99 Final length =10 test.html:36:3 La méthode « . slice ( 2 , 7 ) » avec les arrays typées : Retourne une Array copie de l’Array source à partir de l’indice 2 inclus jusqu’à 7 exclu (à compter de zéro) [ 2 – 7 [ sans modifier l’Array initiale. <script type="text/javascript"> var arr1 = new Int32Array([44,16,38,28,40,21,75,77,28,87]); console.log("Array initiale arr1 = ",arr1); console.log(""); console.log("arr1.slice(2, 7) = ",arr1.slice(2, 7)); console.log("arr1 = ",arr1); </script> Array initiale arr1 = Int32Array(10) [ 44, 16, 38, 28, 40, 21, 75, 77, 28, 87 ] test.html:3:4 arr1.slice(2, 7) = Int32Array(5) [ 38, 28, 40, 21, 75 ] test.html:5:4 arr1 = Int32Array(10) [ 44, 16, 38, 28, 40, 21, 75, 77, 28, 87 ] test.html:6:4 Différents types d’Arrays - 28/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Pour accéder à un élément de l’Array à partir de la fin, on utilise des index négatifs comme premier argument de « .slice ». « .slice » retournant une Array, on peut facilement accéder aux premiers et derniers éléments d’une quelconque Array par indexage des éléments d’une Array retournée avec « .slice » en partant soit du premier élément de l’Array source, soit du dernier élément (indice -1). Par exemple, pour avoir le Nième élément de l’Array, on peut écrire ceci : Pour avoir le Nième élément d’une Array à partir du premier (indice = zéro), de l’Array retournée par « .slice » ou une toute autre Array, on écrit [plus lourd, mais facilite la compréhension] : Array . slice ( 0 ) [ N ] , N compris entre [ 0 et Array.length-1 [. Cette instruction retourne toute l’Array source, et retient l’élément à la Nième position à partir de zéro, elle est donc équivalente à : Array[0] Pour accéder à un élément d’une Array à partir de la fin, on peut écrire : Array . slice ( N ) [ 0 ] , N doit être négatif, et -1 pour commencer le compte par la fin, l’indice doit être toujours zéro. Le résultat final dépend de l’instruction précise. La méthode « Array . from ( ) » : « Array . from ( ) » est une Array polymorphe qui retourne une nouvelle Array ordonnée, constituée de tous les éléments d’une Array, un Set ou une Différents types d’Arrays - 29/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII String sources. Pour les « Sets », ces éléments sont retenus une et une seule fois au cas où cet même élément se répète dans le « Set » source (c’est la définition même de « Set » = jeu d’échantillons représentatifs). Pour les Arrays sources, c’est le premier élément rencontré est retenu. Pour les Hash (littéral d’objet), l’élément de l’indice en cours écrase éventuellement l’élément du même indice qui vient avant. <script type="text/javascript"> "use strict"; const arr=[12, 10, 14, 12, 10, 12, 11, 12, 13, 12]; let r=Array.from( new Set( arr )); console.log("Array Srce =", arr); // Array Srce = // Array(10) [ 12, 10, 14, 12, 10, 12, 11, 12, 13, 12 ] console.log("Array Cible =", r); // Array Cible = // Array(5) [ 12, 10, 14, 11, 13 ] </script> Un autre exemple avec d’autres types comme source : <script type="text/javascript"> "use strict"; let r; // Array.from avec ARRAY : // Elle prend tout même les doublons. r = Array.from( [6, 13, 8, 11, 8, 6, 7, 15, 7, 13] ); console.log(typeof r , r ) // object // Array(10) [ 6, 13, 8, 11, 8, 6, 7, 15, 7, 13 ] // Array.from avec TYPED ARRAY : Différents types d’Arrays - 30/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII // Elle prend tout même les doublons. r = Array.from( new Uint8ClampedArray( [9, 12, 11, 8, 6, 11, 7, 11, 14, 6] ) ); console.log(typeof r , r ) // object // Array(10) [ 9, 12, 11, 8, 6, 11, 7, 11, 14, 6 ] // Array.from avec SET: // Elle prend tout quand ils sont uniques. r = Array.from( new Set( [25, 73, 100, 12, 39, 17, 75, 16, 96, 94]) ); console.log(typeof r , r ) // object // (10) [25, 73, 100, 12, 39, 17, 75, 16, 96, 94] // Array.from avec SET : // Il ne retient pas les doublons. r = Array.from( new Set( [14, 11, 12, 13, 12, 11, 11, 12, 11, 10]) ); console.log(typeof r , r ) // object // Array(5) [ 14, 11, 12, 13, 10 ] // Array.from avec HASH : // Elle prend la quantité spécifiée par length, // tous les indices de 0 à length-1, en ne // retenant que la valeur du dernier indice doublon. r = Array.from( {0: 86, 1: 16, 2:12, 3:49, 4:78, 5:60, length: 6} ); console.log(typeof r , r ) // object // (6) [86, 16, 12, 49, 78, 60] Différents types d’Arrays - 31/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII // Array.from HASH : // Il prend la quantité spécifiée par length, // tous les indices de 0 à length-1. r = Array.from( {0:11, 1:10, 2:15, 3:11, 4:12, 5:11, length: 6} ); console.log(typeof r , r ) // object // Array(6) [ 11, 10, 15, 11, 12, 11 ] // Array.from HASH : // Il prend la quantité spécifiée par length, // tous les indices de 0 à length-1. r = Array.from( {3:19, 1:17, 2:25, 3:12, 3:16, 0:11, 2:14, length: 6} ); console.log(typeof r , r ) // object // Array(6) [ 11, 17, 14, 16, undefined, undefined ] // Array.from HASH r = Array.from( {0:86, 1:16, 2:12, 3:49, 4:78, 5:60, length: 3} ); console.log(typeof r , r ) // object // (3) [86, 16, 12] // Array.from HASH r = Array.from( {0:86, 1:16, 2:12, 3:49, 4:78, 5:60, length: 8} ); console.log(typeof r , r ) // object // (8) [86, 16, 12, 49, 78, 60, undefined, undefined] // Array.from HASH r = Array.from( Différents types d’Arrays - 32/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII {0:86, 1:16, annee:12, 3:49, 4:78, 5:60, length: 6} ); console.log(typeof r , r ) // object // (6) [86, 16, undefined, 49, 78, 60] // Array.from HASH r = Array.from( {3:86, "1":16, 4:12, 0:49, "5":60, 2:78, length: 6} ); console.log(typeof r , r ) // object // (6) [49, 16, 78, 86, 12, 60] // Array.from HASH r = Array.from( {5:86, 1:16, 7:12, 10:49, 3:78, 9:60, length: 6} ); console.log(typeof r , r ) // object // (6) [undefined, 16, undefined, 78, undefined, 86] // Array.from HASH r = Array.from( {5:86, 1:16, 7:12, 10:49, 3:78, 9:60, length: 11} ); console.log(typeof r , r ) // object // (11) [undefined, 16, undefined, 78, undefined, // 86, undefined, 12, undefined, 60, 49] // Array.from HASH r = Array.from( {3:22, 15:94, 8:65, 0:98, 11:48, length: 16} ); console.log(typeof r , r ) // object // (16) [98, undefined, undefined, 22, undefined, // undefined, undefined, undefined, 65, undefined, Différents types d’Arrays - 33/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII // undefined, 48, undefined, undefined, undefined, 94] // Array.from HASH r = Array.from( {1:22, 3:94, 5:65, 7:98, 9:20, 10:48, length: 5} ); console.log(typeof r , r ) // object // (5) [undefined, 22, undefined, 94, undefined] console.log("".padEnd(25,"=")); console.log("AVEC CALLBACK en 2è argument"); console.log("Pour appliquer un même TTT à "+ "chaque élément de l'Array"); console.log("=".repeat(25)); // Array.from STRING, avec pointeur sur fonction // callback, ici le constructeur Number r = Array.from('2018', Number); console.log(typeof r , r ) // object // (4) [2, 0, 1, 8] // Array.from STRING, avec // fonction callback ordinaire et inline r = Array.from('4239617508', function(e){ return e+" "+ !(e%3); // divisible par (ou multiple de) 3 ? }); console.log(typeof r , r ) // object // (10) ["4 false", "2 false", "3 true", // "9 true", "6 true", "1 false", "7 false", // "5 false", "0 true", "8 false"] </script> Exécution avec Firefox : Différents types d’Arrays - 34/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII object Array(10) [ 6, 13, 8, 11, 8, 6, 7, 15, 7, 13 ] test.html:9:4 object Array(10) [ 9, 12, 11, 8, 6, 11, 7, 11, 14, 6 ] test.html:21:4 object Array(10) [ 25, 73, 100, 12, 39, 17, 75, 16, 96, 94 ] test.html:31:4 object Array(5) [ 14, 11, 12, 13, 10 ] test.html:41:4 object Array(6) [ 86, 16, 12, 49, 78, 60 ] test.html:53:4 object Array(6) [ 11, 10, 15, 11, 12, 11 ] test.html:64:4 object Array(6) [ 11, 17, 14, 16, undefined, undefined ] test.html:76:4 object Array(3) [ 86, 16, 12 ] test.html:85:4 object Array(8) [ 86, 16, 12, 49, 78, 60, undefined, undefined ] test.html:94:4 object Array(6) [ 86, 16, undefined, 49, 78, 60 ] test.html:103:4 object Array(6) [ 49, 16, 78, 86, 12, 60 ] Différents types d’Arrays - 35/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu test.html:112:4 JavaScript Tome-XXII object Array(6) [ undefined, 16, undefined, 78, undefined, 86 ] test.html:121:4 object Array(11) [ undefined, 16, undefined, 78, undefined, 86, undefined, 12, undefined, 60, … ] test.html:130:4 object Array(16) [ 98, undefined, undefined, 22, undefined, undefined, undefined, undefined, 65, undefined, … ] test.html:140:4 object Array(5) [ undefined, 22, undefined, 94, undefined ] test.html:151:4 ========================= test.html:156:1 AVEC CALLBACK en 2è argument test.html:157:1 Pour appliquer un même TTT à chaque élément de l'Array test.html:158:1 ========================= test.html:160:1 object Array(4) [ 2, 0, 1, 8 ] test.html:166:4 object Array(10) [ "4 false", "2 false", "3 true", "9 true", "6 true", "1 false", "7 false", "5 false", "0 true", "8 false" ] test.html:177:4 La méthode « Array . of ( ) » : Retourne une Array à partir d’une liste d’éléments séparés par une virgule. Différents types d’Arrays - 36/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII <script type="text/javascript"> "use strict"; let r; r = Array.of(1); console.log(typeof r); console.log(r); // => [1] r = Array.of(10); console.log(typeof r); console.log(r); // => [10] r = Array.of(78, 90, 25, 33, 56, 36, 39, 96, 93, 35); console.log(typeof r); console.log(r); // => (10) [78, 90, 25, 33, 56, 36, 39, 96, 93, 35] r = Array.of("jour",23, "annee",2018, "mois",11, {hr:8 , min:37}); console.log(typeof r); console.log(r); // => (10) [78, 90, 25, 33, 56, 36, 39, 96, 93, 35] </script> Avec Firefox : Différents types d’Arrays - 37/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Avec Yandex : Différents types d’Arrays - 38/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu Différents types d’Arrays JavaScript Tome-XXII - 39/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII La boucle itératrice « for … of » des Arrays : <script type="text/javascript"> "use strict"; let t; var arr = ['oméga',27,3.14,{}]; t=""; for(const valeur of arr) t+=valeur+" | "; console.log(t); // oméga | 27 | 3.14 | [object Object] | t=""; for(let valeur of arr.values()) t+=valeur+" | "; console.log(t); // oméga | 27 | 3.14 | [object Object] | t=""; for(var cle of arr.keys()) t+=cle+" | "; console.log(t); // 0 | 1 | 2 | 3 | t=""; for(let [cle, valeur] t+="cle = "+cle+" , } console.log(t); // cle = 0 , valeur = // cle = 1 , valeur = of arr.entries()){ "+"valeur = "+valeur+" | "; oméga | 27 | Différents types d’Arrays - 40/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII // cle = 2 , valeur = 3.14 | // cle = 3 , valeur = [object Object] | </script> Le code suivant donne le Nième élément d’une Array, en particulier le premier et le dernier : <script> "use strict"; let t; var array = [17,32,68,90]; console.log(array); console.log("".padEnd(25,"=")) t=""; for(let i=-2,l=array.length+3 ; i<l ; i++){ t+=array.slice(0)[i]+" | "; } console.log("t+=array.slice(0)[i]"); console.log(t); console.log("".padEnd(25,"=")) t=""; for(let i=-2,l=array.length+3 ; i<l ; i++){ t+=array.slice(i)[0]+" | "; } console.log("t+=array.slice(i)[0]"); console.log(t); console.log("".padEnd(25,"=")) Différents types d’Arrays - 41/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII t=""; console.log("t+=array.slice(0)[-i]"); for(let l=array.length, i=l+2 ; i>-5 ; i--){ t+=array.slice(0)[i]+" | "; } console.log(t); console.log("".padEnd(25,"=")) t=""; for(let l=array.length, i=l+2 ; i>-5 ; i--){ t+=array.slice(i)[0]+" | "; } console.log("t+=array.slice(-i)[0]"); console.log(t); console.log("".padEnd(25,"=")) console.log("array.slice(0)[-i]"); for(let l=array.length, i=l+2 ; i>-5 ; i--){ console.log(array.slice(0)[i]); } console.log("".padEnd(25,"=")) console.log("array.slice(-i)[0]"); for(let l=array.length, i=l+2 ; i>-5 ; i--){ console.log(array.slice(i)[0]); } </script> Différents types d’Arrays - 42/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu Différents types d’Arrays JavaScript Tome-XXII - 43/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Pour avoir plus facilement le tout dernier élément d’une Array on écrit : Array [ (Array . length) – 1 ]. La méthode « . fill ( v , d ) » avec les arrays typées : Remplace par la valeur « v » tous les éléments de l’Array à partir de la position « d » à compter de zéro, par défaut à partir de l’élément d’indice 0. Disponible pour les objets Array et Typed Array. <script type="text/javascript"> var ar = new Uint16Array( [90,27,65,91,10,31,51,16,56,82,12]); console.log("Array de départ :\n",ar); console.log("ar.length :",ar.length); console.log(""); result = ar.fill(1283, 5); console.log("Array après .fill(v,d) :\n"+ar); Différents types d’Arrays - 44/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII console.log("ar.length :"+ar.length); </script> Array de départ : Uint16Array(11) [ 90, 27, 65, 91, 10, 31, 51, 16, 56, 82, … ] test.html:3:4 ar.length : 11 test.html:4:4 Array après .fill(v,d) : 90,27,65,91,10,1283,1283,1283,1283,1283,1283 test.html:9:4 ar.length :11 test.html:9:4 C’est aussi l’occasion de voir la différence entre les deux affichages, avec « console.log("Array de départ :\n" , ar); » ave une « virgule », et « console.log("Array après .fill(v,d) :\n" + ar); » avec un « plus » : L’instruction « console.log("Array de départ :\n" , ar); » avec virgule chaîne les affichages de chaque objet séparément avec la méthode de son type, tandis que « console.log("Array après .fill(v,d) :\n" + ar); » avec plus utilise la méthode de l’objet String(). La méthode « Array . fill » permet de facilement initialiser tous ou partie des éléments d’une Array préexistante ou fraîchement créée : Différents types d’Arrays - 45/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII <script type="text/javascript"> "use strict"; let i1, i2; var arr = new Int32Array(new ArrayBuffer(10 * 4)); console.log("Notre Array : "+arr); arr.fill(300); console.log("Notre Array : "+arr); arr.fill(2018,5); console.log("Notre Array : "+arr); arr.fill(999,3,8); console.log("Notre Array : "+arr); // Une forme lourde pour ce faire : for(let i=3 ; i< 7 ; i++) arr[i] = i; console.log("Notre Array : "+ arr); </script> Comment initialiser les éléments d’une Array avec des nombres aléatoires par exemple entre 10 et 100, sans utiliser de boucle ? On crée un Array d’autant d’éléments et avec la méthode « Array . map ( ) » on retourne une autre Array avec un nombre aléatoire pour chacun des éléments de la première Array. On croirait que ceci suffit, mais on se bluffe. <script type="text/javascript"> "use strict"; const arr = new Array(15); var nvTableau = arr.map(_=>Math.round(Math.random()*90)+10); console.log(nvTableau); console.log(arr); </script> Différents types d’Arrays - 46/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Avec Firefox : Avec Yandex : On remplit chaque élément de l’Array-source lors de sa création : <script type="text/javascript"> "use strict"; const arr = new Array(15).fill(); var nvTableau = arr.map(_=>Math.round(Math.random()*90)+10); console.log(nvTableau); console.log(arr); </script> Firefox : Différents types d’Arrays - 47/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Yandex : Ça marche, mais on constate que chaque élément de la première Array vaut « undefined » ce qui nous donne moche à l’affichage ? On remplit alors donc l’Array en création par exemple avec des zéro (0) : <script type="text/javascript"> "use strict"; const arr = new Array(15).fill(0); var nvTableau = arr.map(_=>Math.round(Math.random()*90)+10); console.log(nvTableau); console.log(arr); </script> Différents types d’Arrays - 48/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Une alternative est d’utiliser une boucle après la création de l’Array : <script type="text/javascript"> "use strict"; const arr = new Array(15); for(let i=0, l=arr.length ; i<l ; i++){ arr[i]= Math.round(Math.random()*90)+10; } console.log(arr); </script> Deux fonctions (ou mieux, méthodes) font exactement la même chose avec les Arrays Typées : la Array.slice() et la Array.subarray(), pendant qu’avec les Arrays seule la méthode « Array.slice() » est disponible. <script type="text/javascript"> let r; var typedArray = new Int8Array([47,84,52,98,49,96,73,50,28,26 ]); console.log("Array initiale =\n"+typedArray); r = typedArray.slice(2, 6); console.log("\ntypedArray.slice(2, 7) =\n"+r); r = typedArray.subarray(2, 6); console.log("\ntypedArray.subarray(2, 7) =\n "+r); console.log("\nArray initiale conservée :\n" + typedArray); </script> Différents types d’Arrays - 49/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII La méthode « Array . copyWithin ( v Typées » : , d ) » des « Arrays » et « Arrays Modifie l’Array en cours en remplaçant ses éléments effectifs situés à partir de la position « d », par ses éléments contenus à partir de la position « v », et ce, dans les limites de la taille maximale de l’array. <script type="text/javascript"> "use strict"; let i1, i2; var arr = new Int32Array([ 29,66,23,95,28,12,40,22,92,75,90,54,34,19,35,52,62,98 ]); console.log("Notre Array : ".padStart(24," ")+arr); i1=3,i2=14; arr.copyWithin(i1, i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=2,i2=7; Différents types d’Arrays - 50/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu arr.copyWithin(i1, i2); JavaScript Tome-XXII console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=6,i2=3; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=5,i2=5; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=6,i2=-6; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=-7,i2=7; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); Différents types d’Arrays - 51/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII i1=-8,i2=-8; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=-9,i2=-3; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=-5,i2=-9; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=-5,i2=7; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=-7,i2=5; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); Différents types d’Arrays - 52/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII i1=0,i2=5; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); i1=5,i2=0; arr.copyWithin(i1,i2); console.log( ("arr.copyWithin("+i1+","+i2+") : ").padStart(24," ")+ arr); </script> Notre Array : 29,66,23,95,28,12,40,22,92,75,90,54,34,19,35,52,62,98 arr.copyWithin(3,14) : 29,66,23,35,52,62,98,22,92,75,90,54,34,19,35,52,62,98 arr.copyWithin(2,7) : 29,66,22,92,75,90,54,34,19,35,52,62,98,19,35,52,62,98 arr.copyWithin(6,3) : 29,66,22,92,75,90,92,75,90,54,34,19,35,52,62,98,19,35 arr.copyWithin(5,5) : 29,66,22,92,75,90,92,75,90,54,34,19,35,52,62,98,19,35 arr.copyWithin(6,-6) : 29,66,22,92,75,90,35,52,62,98,19,35,35,52,62,98,19,35 arr.copyWithin(-7,7) : 29,66,22,92,75,90,35,52,62,98,19,52,62,98,19,35,35,52 arr.copyWithin(-8,-8) : 29,66,22,92,75,90,35,52,62,98,19,52,62,98,19,35,35,52 Différents types d’Arrays - 53/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII arr.copyWithin(-9,-3) : 29,66,22,92,75,90,35,52,62,35,35,52,62,98,19,35,35,52 arr.copyWithin(-5,-9) : 29,66,22,92,75,90,35,52,62,35,35,52,62,35,35,52,62,98 arr.copyWithin(-5,7) : 29,66,22,92,75,90,35,52,62,35,35,52,62,52,62,35,35,52 arr.copyWithin(-7,5) : 29,66,22,92,75,90,35,52,62,35,35,90,35,52,62,35,35,52 arr.copyWithin(0,5) : 90,35,52,62,35,35,90,35,52,62,35,35,52,52,62,35,35,52 arr.copyWithin(5,0) : 90,35,52,62,35,90,35,52,62,35,35,90,35,52,62,35,35,52 La méthode « Array . copyWithin ( v « Arrays Typées » : , d , n ) » des « Arrays » et Modifie l’Array en cours en remplaçant « n » de ses éléments effectifs situés à partir de la position « d », par ses éléments contenus à partir de la position « v », et ce, dans les limites de la taille maximale de l’array. Les règles de remplacement ne sont pas exactement les mêmes qu’avec arr.copyWithin(i1,i2). <script type="text/javascript"> "use strict"; let i1, i2, i3; var arr = new Int32Array([ 29,66,23,95,28,12,40,22,92,75,90,54,34,19,35,52,62,98 ]); console.log("Notre Array : ".padStart(26," ")+arr); i1=3,i2=6;i3=7; arr.copyWithin(i1,i2,i3); Différents types d’Arrays - 54/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=6,i2=3;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=5,i2=5;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=6,i2=-6;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=-7,i2=7;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=-8,i2=-8;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); Différents types d’Arrays - 55/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII i1=-9,i2=-3;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=-5,i2=-9;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=-5,i2=7;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=-7,i2=5;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=0,i2=5;i3=7; arr.copyWithin(i1,i2,i3); console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); i1=5,i2=0;i3=7; arr.copyWithin(i1,i2,i3); Différents types d’Arrays - 56/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ") .padStart(26," ")+ arr); </script> Notre Array : 29,66,23,95,28,12,40,22,92,75,90,54,34,19,35,52,62,98 arr.copyWithin(3,6,7) : 29,66,23,40,28,12,40,22,92,75,90,54,34,19,35,52,62,98 arr.copyWithin(6,3,7) : 29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98 arr.copyWithin(5,5,7) : 29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98 arr.copyWithin(6,-6,7) : 29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98 arr.copyWithin(-7,7,7) : 29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98 arr.copyWithin(-8,-8,7) : 29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98 arr.copyWithin(-9,-3,7) : 29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98 arr.copyWithin(-5,-9,7) : 29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98 arr.copyWithin(-5,7,7) : 29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98 arr.copyWithin(-7,5,7) : 29,66,23,40,28,12,40,28,12,40,90,12,40,19,35,52,62,98 arr.copyWithin(0,5,7) : 12,40,23,40,28,12,40,28,12,40,90,12,40,19,35,52,62,98 Différents types d’Arrays - 57/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII arr.copyWithin(5,0,7) : 12,40,23,40,28,12,40,23,40,28,12,40,40,19,35,52,62,98 Les méthodes « Array . indexOf (n ) » et « Array . lastIndexOf (n ) » des « Arrays » et « Arrays Typées » : Donnent respectivement la première et la dernière position d’un élément dans une Array ou Typed Array. <script type="text/javascript"> var arr = new Int32Array( [24,26,22,29,13,16,15,22,26,13,22,20,20,12,12,18,20,19]); console.log("Notre Array: "+arr); console.log("arr.length: "+arr.length); const n=22; var lidx = arr.lastIndexOf(n); console.log( "La dernière position de "+n+" est à l'index : "+lidx); var fidx = arr.indexOf(n); console.log( "La première position de "+n+" est à l'index : "+fidx); </script> Notre Array: 24,26,22,29,13,16,15,22,26,13,22,20,20,12,12,18,20,19 test.html:4:4 arr.length: 18 test.html:5:4 La dernière position de 22 est à l'index : 10 test.html:10:4 La première position de 22 est à l'index : 2 test.html:14:4 Les méthodes « Array . find ( el ) » et « Array . findIndex ( el ) » des « Arrays » et « Arrays Typées » : Différents types d’Arrays - 58/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII <script type="text/javascript"> "use strict"; const isCubic = n => !(Math.pow(n,1/3) % 1); console.log([86, 57, 70, 68, 8, 27].find(isCubic)); // => 8 console.log([4, 8, NaN, 16, 23, 42].find(isNaN)); // => NaN console.log([73, 343, 125, 57, 21].findIndex(isCubic)); // => 2 console.log([4, 8, 16, 23, 42, NaN].findIndex(isNaN)); // => 5 </script> En passant, voici les propriétés auxquelles obéissent les Objets Int8Array , Int16Array , Int32Array , Uint8Array , Uint16Array , Uint32Array : Int8Array(), Int16Array(), Int32Array(), Uint8Array(), Uint16Array(), Uint32Array(), Uint8ClampedArray(). BYTES_PER_ELEMENT: 4 length: 3 name: "Int32Array" prototype: Int32ArrayPrototype { … } BYTES_PER_ELEMENT: 4 constructor: function Int32Array() constructor: Int32Array() BYTES_PER_ELEMENT: 4 length: 3 name: "Int32Array" prototype: Int32ArrayPrototype { … } <prototype>: function TypedArray() <prototype>: ??? { … } buffer: Getter byteLength: Getter byteOffset: Getter constructor: function TypedArray() copyWithin: function copyWithin() entries: function entries() Différents types d’Arrays - 59/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII every: function every() fill: function fill() filter: function filter() find: function find() findIndex: function findIndex() forEach: function forEach() includes: function includes() indexOf: function indexOf() join: function join() keys: function keys() lastIndexOf: function lastIndexOf() length: Getter map: function map() reduce: function reduce() reduceRight: function reduceRight() reverse: function reverse() set: function set() slice: function slice() some: function some() sort: function sort() subarray: function subarray() toLocaleString: function toLocaleString() toString: function toString() values: function values() Symbol(Symbol.iterator): function values() Symbol(Symbol.toStringTag): Getter <prototype>: Object { … } <prototype>: function TypedArray() Comparez ces quelques propriétés disponibles avec les types de données cidessus, avec quelques-unes disponible avec l’objet Array : Array() concat: function concat() every: function every() filter: function filter() forEach: function forEach() from: function from() indexOf: function indexOf() isArray: function isArray() Différents types d’Arrays - 60/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII join: function join() lastIndexOf: function lastIndexOf() length: 1 map: function map() name: "Array" of: function of() pop: function pop() prototype: Array [] concat: function concat() constructor: function Array() concat: function concat() every: function every() filter: function filter() forEach: function forEach() from: function from() indexOf: function indexOf() isArray: function isArray() join: function join() lastIndexOf: function lastIndexOf() length: 1 map: function map() name: "Array" of: function of() pop: function pop() prototype: Array [] push: function push() reduce: function reduce() reduceRight: function reduceRight() reverse: function reverse() shift: function shift() slice: function slice() some: function some() sort: function sort() splice: function splice() unshift: function unshift() Symbol(Symbol.species): Getter <prototype>: function () copyWithin: function copyWithin() entries: function entries() Différents types d’Arrays - 61/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII every: function every() fill: function fill() filter: function filter() find: function find() findIndex: function findIndex() flat: function flat() flatMap: function flatMap() forEach: function forEach() includes: function includes() indexOf: function indexOf() join: function join() keys: function keys() lastIndexOf: function lastIndexOf() length: 0 map: function map() pop: function pop() push: function push() reduce: function reduce() reduceRight: function reduceRight() reverse: function reverse() shift: function shift() slice: function slice() some: function some() sort: function sort() splice: function splice() toLocaleString: function toLocaleString() toSource: function toSource() toString: function toString() unshift: function unshift() values: function values() Symbol(Symbol.iterator): function values() Symbol(Symbol.unscopables): Object { copyWithin: true, entries: true, fill: true, … } <prototype>: Object { … } push: function push() reduce: function reduce() Différents types d’Arrays - 62/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII reduceRight: function reduceRight() reverse: function reverse() shift: function shift() slice: function slice() some: function some() sort: function sort() splice: function splice() unshift: function unshift() Symbol(Symbol.species): Getter <get>: function Symbol.species() <prototype>: function () Différents types d’Arrays - 63/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII LES ARRAYS : Les Arrays ou tableaux sont des collections les plus faciles à utiliser. Il existe plusieurs façons de créer une Array, dont : I. Avec seulement des crochets : <script type="text/javascript"> "use strict"; let a; a = []; // Array initialement vide. console.log("a =",a,"[] =",[]); a = [0]; // Array initialement à un seul élément, // le nombre 0. console.log("a =",a,"[0] =",[0]); a = [10,11]; // Array initialement à deux éléments, // les nombres 10 et 11 ou autres. console.log("a =",a,"[0] =",[10,11]); a = [10.11]; // Array initialement à un seul élément, // le nombre 10.11. console.log("a =",a,"[0] =",[10.11]); </script> Différents types d’Arrays - 64/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu II. JavaScript Tome-XXII Avec Simplement « Array », sans « new » (sans passer par le constructeur = initialiseur) : <script type="text/javascript"> "use strict"; let a; a = Array(); // Array initialement vide. console.log("a =",a,"Array() =",Array()); a = Array(0) // Array initialement vide. console.log("a =",a,"Array(0) =",Array(0)); a = Array("0") // Array initialement à un seul élément, // le littéral zéro (0). console.log("a =",a,'Array("0") =',Array("0")); a = Array(10,11) // Array initialement à deux éléments, // les nombres 10 et 11 ou autres. console.log("a =",a,"Array(10,11) =",Array(10,11)); a = Array(10.11); console.log("a =",a,"[0] =",Array(10.11)); // RangeError: invalid array length Différents types d’Arrays - 65/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII </script> III. Avec « Array » et « new » (en faisant appel au constructeur = initialiseur) : <script type="text/javascript"> "use strict"; let a; a = new Array(); // Array initialement vide. console.log("a =",a,"new Array() =",new Array()); a = new Array(0) // Array initialement vide. console.log("a =",a,"new Array(0) =",new Array(0)); a = new Array("0") // Array initialement à un seul élément, // le littéral zéro (0). console.log("a =",a,'new Array("0") =',new Array("0")); a = new Array(10,11) // Array initialement à deux éléments, // les nombres 10 et 11 ou autres. console.log("a =",a,"new Array(10,11) =",new Array(10,11)); a = new Array(10.11); Différents types d’Arrays - 66/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII console.log("a =",a,"[0] =",new Array(10.11)); // RangeError: invalid array length </script> Quelques pièges avec les Arrays : Si « "b" in ["a" , "b" , "c"] » donne « false », « 2 in [ 1 , 2 , 3 ] » donne « true ». <script> "use strict"; const b="b", d=2; console.log("b" in ["a","b","c"]); // false console.log(b in ["a","b","c"]); // false console.log(2 in [1 , 2 , 3]); console.log(d in [1 , 2 , 3]); </script> // true // true La méthode « Array . sort ( ) » : Pour trier les éléments d’une Array, rien n’est plus simple : <script type="text/javascript"> "use strict"; let a = Array.from( Différents types d’Arrays - 67/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII new Set([23, 53, 56, 59, 60, 31, 87, 97, 72, 51]) ).sort(); let sorted=true; console.log(a); for(var k=0 ; k < a.length-2 ; ) if(a[k] > a[++k]){ sorted=false; break; } if(!sorted)status="Not"; console.log(status,"Sorted !, pos =",k) </script> En bloquant la méthode « . sort » de tri : <script type="text/javascript"> "use strict"; let a = Array.from( new Set([23, 53, 56, 59, 60, 31, 87, 97, 72, 51]) )//.sort(); let sorted=true; console.log(a); for(var k=0 ; k < a.length-2 ; ) if(a[k] > a[++k]){ sorted=false; break; } if(!sorted)status="Not"; console.log(status,"Sorted !, pos =",k) </script> Différents types d’Arrays - 68/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Le tri d’une Array peut avoir des consequences imprévisibles et catastrophiques : Une autre façon de faire le tri : Le petit code ci-dessous cherche s’il y a un nombre dans l’Array de nombres, qui soit la moyenne de ses voisins. Pour notre cas ici l’Array trié contient ce nombre à l’indice [0->]2, et c’est le nombre 43. <script type="text/javascript"> "use strict"; let a = Array.from( new Set([41, 96, 50, 92, 14, 96, 95, 45, 41, 43]) ).sort(); let ok=false; console.log(a); for(var k=1 ; k < a.length-2 ; k++){ if(a[k] == ((a[k-1] + a[k+1])/2)){ ok=true; break; } } if(!ok)status="*!NO!*"; console.log(status, `neighboring Meaners !, pos = a[${k}] = ${a[k]}`); console.log( `( a[${k-1}] {${a[k-1]}} +` + ` a[${k+1}] {${a[k+1]}} ) / 2 = `+ `${(a[k-1] + a[k+1])/2}`); console.log(a); </script> Différents types d’Arrays - 69/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII En désactivant le tri comme ceci : let a = Array.from( new Set([41, 96, 50, 92, 14, 96, 95, 45, 41, 43]) )//.sort(); L’Array ne contient plus de nombre qui soit la moyenne de ses voisins ! Quelques propriétés (et méthodes) de l’objet « Array » : a = (2) […] 0: 10 1: 11 length: 2 <prototype>: Array [] <prototype>: [] concat: function concat() constructor: function Array() copyWithin: function copyWithin() entries: function entries() every: function every() fill: function fill() filter: function filter() find: function find() findIndex: function findIndex() flat: function flat() flatMap: function flatMap() forEach: function forEach() Différents types d’Arrays - 70/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII includes: function includes() indexOf: function indexOf() join: function join() keys: function keys() lastIndexOf: function lastIndexOf() length: 0 map: function map() pop: function pop() push: function push() reduce: function reduce() reduceRight: function reduceRight() reverse: function reverse() shift: function shift() slice: function slice() some: function some() sort: function sort() splice: function splice() toLocaleString: function toLocaleString() toSource: function toSource() toString: function toString() unshift: function unshift() values: function values() Symbol(Symbol.iterator): function values() Symbol(Symbol.unscopables): Object { copyWithin: true, entries: true, fill: true, … } <prototype>: Object { … } new Array(10,11) = (2) […] 0: 10 1: 11 length: 2 <prototype>: Array [] Comme on l’a vu au commencement, on peut utiliser une Array de nombres typés. Différents types d’Arrays - 71/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Les « Paramètres du reste ». Voir volume séparé. Les « Associated Arrays ». Voir volume séparé. Les « Maps » et les « Weakmaps » Voir volume séparé. Les « Sets » && « Weaksets » Voir volume séparé. LES « DICT ionaries » : En cours de validation. L’objet ARRAYBUFFER : Voir volume séparé. Les STRINGS : Voir volume séparé. Les LITTÉRALES DE CHAÎNE : Voir volume séparé. L’OBJECT : Voir volume séparé. Différents types d’Arrays - 72/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Mots-clés : Arrays typées, ArrayBuffer, Set, String, Typed Array, Array Typée, Uint8Array, Uint16Array, Uint32Array, Int8Array, Int16Array, Int32Array, Float32Array, Float64Array, Arrays, Array, slice, subarray, constructeur, initialiseur, Object literal, littéral d’objet, entries, values, paradigme DIASOLUKA Nz. Luyalu Docteur en Médecine, Chirurgie & Accouchements (1977), CNOM : 0866 - Spécialiste en ophtalmologie (1980) Études humanités : Scientifique - Mathématiques & Physique. Informaticien-amateur, Programmeur et WebMaster. Chercheur indépendant, autonome et autofinancé, bénévole, sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte promotionnelle avec qui qu’il soit ou quelqu’organisme ou institution / organisation que ce soit, étatique, paraétatique ou privé, industriel ou commercial en relation avec le sujet présenté. +243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818 [email protected] Autre Lecture : Différents types d’Arrays - 73/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation D’autres publications pouvant aussi intéresser : • https://www.scribd.com/document/377036251/LeDosage-Des-Medicaments-en-Cac-Cas • https://www.scribd.com/document/377035454/LeHasard-Des-Thermometres-Non-contact-a-Infrarouge • https://www.scribd.com/document/376222482/PetiteIntroduction-Aux-Fonctions-JavaScript • https://www.scribd.com/document/376221919/La-Foien-Jesus-Christ-Pour-Quoi-Faire • https://www.scribd.com/document/375689778/Lacuitevisuelle-angulaire • https://www.scribd.com/document/375349851/Lavariable-This • https://www.scribd.com/document/375024162/FonctionsImbriquees-en-JS • https://www.scribd.com/document/374789297/FormatInterne-Des-Objets-JavaScript • https://www.scribd.com/document/374788758/Iterationsen-JavaScript • https://www.scribd.com/document/374738470/Le-PlusGrand-Secret-de-La-Creation • https://www.scribd.com/document/374597969/NouvelleFormule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka Différents types d’Arrays - 74/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII • https://www.scribd.com/document/373847209/PropertyDescriptors • https://www.scribd.com/document/373833282/l-ObjetGlobal-Window • https://www.scribd.com/document/372665249/JavascriptTome-II • https://www.scribd.com/document/355291488/motiliteoculaire-2 • https://www.scribd.com/document/355291239/motiliteoculaire-I • https://www.scribd.com/document/355290248/Script-dAnalyses-Des-Reflexes-Pupillomoteurs • https://www.scribd.com/document/321168468/Renseigne ments-Id-et-Anthropometriques • https://www.scribd.com/document/320856721/Emission31-Jul-2016 • https://www.scribd.com/document/318182982/Complicati on-Visuelle-du-Traitement-de-La-Malaria • https://www.scribd.com/document/318180637/RapportEntre-Oxymetrie-Et-Type-Respiration • https://www.scribd.com/document/315746265/Classificati on-Des-Medicaments • https://www.scribd.com/document/315745909/Incongruen Différents types d’Arrays - 75/76 - samedi, 1. juin 2019 (12:12 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII ces-Heresies-et-Heterodoxies-de-la-Notion-deLaboratoire • https://www.scribd.com/document/315745725/RapportEntre-Oxymetrie-Et-Type-Respiration Différents types d’Arrays - 76/76 - samedi, 1. juin 2019 (12:12 )
