Différents Types D'arrays en JavaScript

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
diasfb@mail2world.com
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 Uint-
XArray.
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 Bi-
gInt64Array 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 - dimanche, 24. mars 2019 (9:46 )

« 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)

// 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());

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])

m=new Int32Array ([3000000000.1])

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])

// BigInt64Array is not defined
// console.log("BigInt64Array ([30000000000]) = "+m.toStrin
g());
// m=new BigUint64Array ([3000000000])

// Pour FIREFOX :ReferenceError:
// BigUint64Array is not defined

// 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 ES10 n'utilise pas encore le 64 bits :

test.html:34 Uint8Array ([30000000000.1]) = 0
test.html:42
test.html:45 Uint8ClampedArray ([30000000000.1]) = 255
test.html:47
test.html:50 Int8Array ([30000000000.1]) = 0
test.html:53 Int16Array ([30000000000.1]) = 24064
test.html:56 Int32Array ([30000000000.1]) = -1294967296
test.html:58
test.html:61 Float32Array ([30000000000.1]) = 3000000000
test.html:64 Float64Array ([30000000000.1]) = 3000000000.1

Exécution avec FIREFOX :
.!. ATTENTION .!. test.html:12:3
3000000000.1 | 0 = -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 test.html:34:4

Uint8ClampedArray ([30000000000.1]) = 255 test.html:45:4
Int8Array ([30000000000.1]) = 0 test.html:50:4

Int16Array ([30000000000.1]) = 24064 test.html:53:4
Int32Array ([30000000000.1]) = -1294967296 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.

TypedArray objects
Size
Equiva-
Value in Descrip- Web IDL
Type lent C
Range byte tion type
type
s
8-bit two's
comple-
-128 to
Int8Array 1 ment byte int8_t
127
signed
integer
8-bit un-
Uint8Array 0 to 255 1 signed octet uint8_t
integer
8-bit un-
Uint8ClampedAr signed
0 to 255 1 octet uint8_t
ray integer
(clamped)
16-bit
two's
-32768 to comple-
Int16Array 2 short int16_t
32767 ment
signed
integer
16-bit
unsigned uint16_
Uint16Array 0 to 65535 2 unsigned
short t
integer
32-bit
-
two's
21474836
comple-
Int32Array 48 to 4 long int32_t
ment
21474836
signed
47
integer
0 to 32-bit unsigned uint32_

Uint32Array 4
42949672 unsigned long t

95 integer
32-bit
IEEE floati
ng point
1.2x10- unres-
38 to number ( 7
Float32Array 4 tricted float
significant
3.4x1038 float
digits e.g.
1.1234567
)
64-bit
IEEE float-
ing point
5.0x10- unres-
324 to number
Float64Array 8 tricted double
(16 signifi-
1.8x10308 double
cant digits
e.g.
1.123...15)
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) :

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("Float32Array.BYTES_PER_ELEMENT ="+
Float32Array.BYTES_PER_ELEMENT);
console.log("Float64Array.BYTES_PER_ELEMENT ="+
Float64Array.BYTES_PER_ELEMENT);
</script>
Int8Array.BYTES_PER_ELEMENT =1 test.html:2:5
Uint8Array.BYTES_PER_ELEMENT =1 test.html:4:5
Uint8ClampedArray.BYTES_PER_ELEMENT =1 test.html:6:5
Float32Array.BYTES_PER_ELEMENT =4 test.html:16:5
Float64Array.BYTES_PER_ELEMENT =8 test.html:18:5
MAXINT dans chaque taille de registre ou de la variable :

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érence entre

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 test.html:5:3
arr.length = 10 test.html:8:3
arr.byteLength = 40 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).


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="";
}
console.log(t);
console.log("Nos « values » :");

var iterator = arr.values();
t="";
}
console.log(t);
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 |
arr[6] =35 | arr[7] =84 | arr[8] =18 |
arr[9] =11 | test.html:52:4
Un autre exemple :

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 !

console.log("\n\narr.keys()");
it = arr.entries(); // Itérateur lié aux entries.
console.log(it);

it.next().value);
}
// Hors liste !
console.log("\n\narr.values()");
it = arr.values(); // Itérateur lié aux values.
console.log(it);

it.next().value);
}
// Hors liste !
</script>
Notez la différence entre « arr.values() » qui donne accès à l’itérateur con-

necté 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

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()
length: 0
name: ""
Symbol(Symbol.hasInstance):
function Symbol.hasInstance()
__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:
valueOf: function valueOf()

Symbol(Symbol.toStringTag): "ArrayBuffer"
byteLength: 12
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()
some: function some()
sort: function sort()
subarray: function subarray()
toLocaleString:
values: function values()
Symbol(Symbol.iterator):
function values()
Symbol(Symbol.toStringTag): Getter

Notre Array: arr.toString() = 65,48,91 test.html:7:4
Avec la Boucle FOR : test.html:10:4

65 test.html:12:7
48 test.html:12:7
91 test.html:12:7
Hors liste : undefined test.html:14:4
arr.entries() = Array Iterator { } test.html:20:4

<prototype>: Array Iterator
next: function next()
Symbol(Symbol.toStringTag): "Array Iterator"
function Symbol.iterator()
arr.keys() = Array Iterator { } test.html:21:4

arr.values() = Array Iterator { } test.html:22:4


arr.entries() test.html:25:4
Array Iterator { } test.html:27:4
it.next().value= Array [ 0, 65 ] test.html:30:7

(2) […]
0: 0
1: 65
length: 2
<prototype>: Array []

arr.keys() test.html:37:4
arr.values() test.html:49:4
it.next().value= 65 test.html:54:7
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 ); »

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]
}
}
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 : test.html:23:4
0 : Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ]

1 : Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ]
2 : Int32Array [ 12, 12 ]
3 : Int32Array(3) [ 10, 10, 10 ]
4 : Int32Array(5) [ 14, 14, 14, 14, 14 ]
5 : Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ]
6 : Int32Array [ 12, 12 ]
7 : Int32Array(4) [ 11, 11, 11, 11 ]
8 : Int32Array(3) [ 10, 10, 10 ]
9 : Int32Array(4) [ 16, 16, 16, 16 ]
10 : Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ]
11 : Int32Array(4) [ 11, 11, 11, 11 ]
12 : Int32Array(5) [ 14, 14, 14, 14, 14 ]
13 : Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ]
14 : Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ]
15 : Int32Array [ 19, 19 ]
16 : Int32Array(4) [ 13, 13, 13, 13 ]
17 : Int32Array(4) [ 11, 11, 11, 11 ]
18 : Int32Array [ 19, 19 ]
19 : Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ]
20 : Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ]
21 : Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ]
22 : Int32Array(5) [ 18, 18, 18, 18, 18 ]
23 : Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ]
24 : Int32Array(5) [ 18, 18, 18, 18, 18 ]
25 : Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ]
26 : Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ]
27 : Int32Array(4) [ 13, 13, 13, 13 ]
28 : Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ]
29 : Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ]
30 : Int32Array(4) [ 11, 11, 11, 11 ]
31 : Int32Array(4) [ 13, 13, 13, 13 ]
32 : Int32Array(4) [ 16, 16, 16, 16 ]
33 : Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ]
34 : Int32Array(4) [ 16, 16, 16, 16 ]
35 : Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ]
36 : Int32Array(5) [ 14, 14, 14, 14, 14 ]
37 : Int32Array(3) [ 10, 10, 10 ]
38 : Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ]
39 : Int32Array(5) [ 14, 14, 14, 14, 14 ]
40 : Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ]
41 : Int32Array(4) [ 16, 16, 16, 16 ]
42 : Int32Array(7) [ 17, 17, 17, 17, 17, 17, 17 ]
43 : Int32Array(5) [ 14, 14, 14, 14, 14 ]
44 : Int32Array(7) [ 15, 15, 15, 15, 15, 15, 15 ]
45 : Int32Array(5) [ 18, 18, 18, 18, 18 ]
46 : Int32Array(4) [ 13, 13, 13, 13 ]
47 : Int32Array(7) [ 20, 20, 20, 20, 20, 20, 20 ]
48 : Int32Array(5) [ 18, 18, 18, 18, 18 ]
49 : Int32Array(5) [ 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, test.html:44:4

dont 11 différents. test.html:45:4
Les Arrays typées peuvent être parcourues soit avec une boucle ordinaire
( for... el [ idx ] ) soit avec une itérateur :

let t;
var ar = new Uint32Array(

[30, 38, 95, 66, 69, 15, 76, 10, 92, 99 ]
);
console.log(ar);
t="";
for(let i=0 ; i < ar.length ; i++){
t += ar[i]+" | "
}
console.log(t);
var s = ar.subarray(3, 8);

console.log("La Nouvelle Uint32Array : ");
console.log(s);
t="";
var iterator = s.values();
for(let i=0 ; i < s.length ; i++){
}
console.log(t);
</script>
Uint32Array(10) [ 30, 38, 95, 66, 69, 15, 76, 10, 92, 99 ]
test.html:7:5
========================= 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 posi-
ton « 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);
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 ]);
ar1.set(ar3, 5);
console.log("");
const ar4 =
ar1.set(ar4, 6);
</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
Ar1: 77,33,44,600,680,20,50,30,0,99 test.html:32:3

Ar4: 255,255,255 test.html:33:3

ar1.set(ar4, 6) = 77,33,44,600,680,20,255,255,255,99
Remarquez ci-dessous que le nombre contenu dans un élément d’un type-

dArray 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 va-
leur maximale = 255. Tous les bits de gauche au-delà de la 8è case ou posi-
tion 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
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("");

const ar2 =
new Uint32Array([600,680,650 ]);
ar1.set(ar2, 3);
console.log("");
console.log("");
const ar3 =
ar1.set(ar3, 5);
console.log("");
const ar4 =
ar1.set(ar4, 6);
</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: 77,33,44,88,168,138,66,22,0,99 test.html:22:3

Ar3: 20,50,30 test.html:23: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
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.
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

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
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 éven-
tuellement l’élément du même indice qui vient avant.

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 :

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 :

// Elle prend tout même les doublons.
r = Array.from(
new Uint8ClampedArray(
[9, 12, 11, 8, 6, 11, 7, 11, 14, 6]
)
);
// 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])
);
// 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])
);
// 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}
);
// object
// (6) [86, 16, 12, 49, 78, 60]

// 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}
);
// 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}
);
// 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}
);
// 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}
);
// object
// (8) [86, 16, 12, 49, 78, 60, undefined, undefined]
// Array.from HASH
r = Array.from(
{0:86, 1:16, annee:12, 3:49, 4:78, 5:60, length: 6}
);
// 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}
);
// 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}
);
// 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}
);
// 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}
);
// object
// (16) [98, undefined, undefined, 22, undefined,
// undefined, undefined, undefined, 65, undefined,
// 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}
);
// object
// (5) [undefined, 22, undefined, 94, undefined]
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);
// 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 ?
});
// 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 :

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 ]
test.html:112:4
object
Array(6) [ undefined, 16, undefined, 78, undefined, 86 ]
test.html:121:4
object
Array(11) [ undefined, 16, undefined, 78, undefined, 86, unde-
fined, 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.

let r;
r = Array.of(1);
console.log(typeof r);
console.log(r);
// => [1]
r = Array.of(10);
console.log(r);
// => [10]
r = Array.of(78, 90, 25, 33, 56, 36, 39, 96, 93, 35);
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(r);
// => (10) [78, 90, 25, 33, 56, 36, 39, 96, 93, 35]
</script>
Avec Firefox :

Avec Yandex :


La boucle itératrice « for … of » des Arrays :

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] of arr.entries()){
t+="cle = "+cle+" , "+"valeur = "+valeur+" | ";
}
console.log(t);
// cle = 0 , valeur = oméga |
// cle = 1 , valeur = 27 |

// 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);
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);

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);
t="";
t+=array.slice(i)[0]+" | ";
}
console.log("t+=array.slice(-i)[0]");
console.log(t);
console.log("array.slice(0)[-i]");
console.log(array.slice(0)[i]);
}
console.log("array.slice(-i)[0]");
console.log(array.slice(i)[0]);
}
</script>


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 posi-

tion « d » à compter de zéro, par défaut à partir de l’élément d’indice 0.
Disponible pour les objets Array et Typed Array.
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);
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 « vir-

gule »,
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 :

let i1, i2;
var arr = new Int32Array(new ArrayBuffer(10 * 4));
console.log("Notre Array : "+arr);
arr.fill(300);
arr.fill(2018,5);
arr.fill(999,3,8);
// 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éa-
toires 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.

const arr = new Array(15);
var nvTableau = arr.map(_=>Math.round(Math.random()*90)+10);
console.log(nvTableau);
console.log(arr);
</script>

Avec Firefox :
Avec Yandex :
On remplit chaque élément de l’Array-source lors de sa création :

const arr = new Array(15).fill();
console.log(arr);
</script>
Firefox :

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

const arr = new Array(15).fill(0);
console.log(arr);
</script>

Une alternative est d’utiliser une boucle après la création de l’Array :

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.
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>

La méthode « Array . copyWithin ( v , d ) » des « Arrays » et « Arrays

Typées » :
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.

let i1, i2;
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;
arr.copyWithin(i1, i2);
console.log(
arr);
i1=6,i2=3;
arr.copyWithin(i1,i2);
console.log(
arr);
i1=5,i2=5;
console.log(
arr);
i1=6,i2=-6;
console.log(
arr);
i1=-7,i2=7;
console.log(
arr);

i1=-8,i2=-8;
console.log(
arr);
i1=-9,i2=-3;
console.log(
arr);
i1=-5,i2=-9;
console.log(
arr);
i1=-5,i2=7;
console.log(
arr);
i1=-7,i2=5;
console.log(
arr);

i1=0,i2=5;
console.log(
arr);
i1=5,i2=0;
console.log(
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
29,66,22,92,75,90,54,34,19,35,52,62,98,19,35,52,62,98
29,66,22,92,75,90,92,75,90,54,34,19,35,52,62,98,19,35
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

29,66,22,92,75,90,35,52,62,35,35,52,62,98,19,35,35,52
29,66,22,92,75,90,35,52,62,35,35,52,62,35,35,52,62,98
29,66,22,92,75,90,35,52,62,35,35,52,62,52,62,35,35,52
29,66,22,92,75,90,35,52,62,35,35,90,35,52,62,35,35,52
90,35,52,62,35,35,90,35,52,62,35,35,52,52,62,35,35,52
90,35,52,62,35,90,35,52,62,35,35,90,35,52,62,35,35,52
La méthode « Array . copyWithin ( v , d , n ) » des « Arrays » et

« Arrays Typées » :
Modifie l’Array en cours en remplaçant « n » de ses éléments effectifs si-

tué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).

let i1, i2, i3;
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);
console.log(("arr.copyWithin("+i1+","+i2+","+i3+") : ")
.padStart(26," ")+ arr);
i1=6,i2=3;i3=7;
i1=5,i2=5;i3=7;
i1=6,i2=-6;i3=7;
i1=-7,i2=7;i3=7;
i1=-8,i2=-8;i3=7;
i1=-9,i2=-3;i3=7;
i1=-5,i2=-9;i3=7;
i1=-5,i2=7;i3=7;
i1=-7,i2=5;i3=7;
i1=0,i2=5;i3=7;
i1=5,i2=0;i3=7;
</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
29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98
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
29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98
29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98
29,66,23,40,28,12,40,28,12,40,90,54,34,19,35,52,62,98
29,66,23,40,28,12,40,28,12,40,90,12,40,19,35,52,62,98
12,40,23,40,28,12,40,28,12,40,90,12,40,19,35,52,62,98

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.
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 » :

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().
length: 3
name: "Int32Array"
prototype: Int32ArrayPrototype { … }
constructor: function Int32Array()
constructor: Int32Array()
length: 3
name: "Int32Array"
prototype: Int32ArrayPrototype { … }
<prototype>: function TypedArray()
<prototype>: ??? { … }
buffer: Getter
byteLength: Getter
byteOffset: Getter
constructor: function TypedArray()

length: Getter
map: function map()
set: function set()
subarray: function subarray()
toLocaleString: function toLocaleString()
Symbol(Symbol.iterator): function values()
Symbol(Symbol.toStringTag): Getter
<prototype>: function TypedArray()
Comparez ces quelques propriétés disponibles avec les types de données ci-
dessus, avec quelques-unes disponible avec l’objet Array :
Array()
concat: function concat()
from: function from()
isArray: function isArray()
length: 1
map: function map()
name: "Array"
of: function of()
pop: function pop()
prototype: Array []
constructor: function Array()
from: function from()
isArray: function isArray()
length: 1
map: function map()
name: "Array"
of: function of()
pop: function pop()
prototype: Array []
push: function push()
shift: function shift()
splice: function splice()
unshift: function unshift()
flat: function flat()
flatMap: function flatMap()
length: 0
map: function map()
pop: function pop()
Symbol(Symbol.unscopables): Object {
copyWithin: true,
entries: true,
fill: true, …
}
<get>: function Symbol.species()

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 :

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];
// le nombre 10.11.
console.log("a =",a,"[0] =",[10.11]);
</script>

II. Avec Simplement « Array », sans « new » (sans passer par le cons-
tructeur = initialiseur) :

let a;
a = Array();
console.log("a =",a,"Array() =",Array());
a = Array(0)
console.log("a =",a,"Array(0) =",Array(0));
a = Array("0")
// le littéral zéro (0).
console.log("a =",a,'Array("0") =',Array("0"));
a = Array(10,11)
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

</script>
III. Avec « Array » et « new » (en faisant appel au constructeur =

initialiseur) :

let a;
a = new Array();
console.log("a =",a,"new Array() =",new Array());
a = new Array(0)
console.log("a =",a,"new Array(0) =",new Array(0));
a = new Array("0")
// le littéral zéro (0).
console.log("a =",a,'new Array("0") =',new Array("0"));
a = new Array(10,11)
console.log("a =",a,"new Array(10,11) =",new Array(10,11));
a = new Array(10.11);
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]); // true

console.log(d in [1 , 2 , 3]); // true
</script>
La méthode « Array . sort ( ) » :
Pour trier les éléments d’une Array, rien n’est plus simple :

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>
En bloquant la méthode « . sort » de tri :

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>

Le tri d’une Array peut avoir des consequences imprévisibles et catastro-
phiques :
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.

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>

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>: []
constructor: function Array()
flat: function flat()
flatMap: function flatMap()

length: 0
map: function map()
pop: function pop()
Symbol(Symbol.unscopables): Object {
copyWithin: true,
entries: true,
fill: true, …
}
new Array(10,11) = (2) […]
0: 10
1: 11
length: 2
Comme on l’a vu au commencement, on peut utiliser une Array de

nombres typés.

Les « Paramètres du reste ».

Voir volume séparé.
Les « Associated Arrays ».

Les « Maps » et les « Weakmaps »

Les « Sets » && « Weaksets »

LES « DICT ionaries » :

En cours de validation.
L’objet ARRAYBUFFER :
Les STRINGS :
Les LITTÉRALES DE CHAÎNE :

L’OBJECT :

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
diasfb@mail2world.com
Autre Lecture :

https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-
Creation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-
Dosage-Des-Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-
Hasard-Des-Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-
Introduction-Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-
en-Jesus-Christ-Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-
visuelle-angulaire
• https://www.scribd.com/document/375349851/La-
variable-This
•
https://www.scribd.com/document/375024162/Fonctions-
Imbriquees-en-JS
• https://www.scribd.com/document/374789297/Format-
Interne-Des-Objets-JavaScript
•
https://www.scribd.com/document/374788758/Iterations-
en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-
Grand-Secret-de-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-
Formule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/Property-
Descriptors
• https://www.scribd.com/document/373833282/l-Objet-
Global-Window
•
https://www.scribd.com/document/372665249/Javascript-
Tome-II
• https://www.scribd.com/document/355291488/motilite-
oculaire-2
• https://www.scribd.com/document/355291239/motilite-
oculaire-I
• https://www.scribd.com/document/355290248/Script-d-
Analyses-Des-Reflexes-Pupillomoteurs
•
https://www.scribd.com/document/321168468/Renseigne
ments-Id-et-Anthropometriques
•
https://www.scribd.com/document/320856721/Emission-
31-Jul-2016
•
https://www.scribd.com/document/318182982/Complicati
on-Visuelle-du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-
Entre-Oxymetrie-Et-Type-Respiration
•
https://www.scribd.com/document/315746265/Classificati
on-Des-Medicaments
•
https://www.scribd.com/document/315745909/Incongruen
ces-Heresies-et-Heterodoxies-de-la-Notion-de-
Laboratoire
• https://www.scribd.com/document/315745725/Rapport-
Entre-Oxymetrie-Et-Type-Respiration

Différents Types D'arrays en JavaScript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Différents Types D'arrays en JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

D i f f é r e n t s T y p e s d ' a r r ays

( objets semblables aux tableaux )

Qu’est-ce qui se passe quand vous appliquez un « OR binaire » par

Vous y comprenez quelque chose ? Le code ci-après vous l’explique très

Il existe en effet deux types fondamentaux d’Arrays : les Arrays ordinaires

D’abord il faut savoir que « TypedArray » n’est pas un type de données ou

I. Pour les entiers (« int ») :

Dans le deuxième type (Arrays Non Signées [Unsigned Integer Arrays])

Il n’existe pas encore le Int64Array ni le Uint64Array, mais certains

II. Pour les rationnels (« float ») il existe :

Différents types d’Arrays - 2/76 - dimanche, 24. mars 2019 (9:46 )

<script type="text/javascript"> "use strict";

// let f32 = float32(-1)

console.log(".!. ATTENTION .!.")

m=new Uint8Array ([3000000000.1])

m=new Uint16Array ([3000000000.1])

Différents types d’Arrays - 3/76 - dimanche, 24. mars 2019 (9:46 )

m=new Uint8ClampedArray ([3000000000.1])

m=new Int8Array ([3000000000.1])

m=new Int16Array ([3000000000.1])

m=new Int32Array ([3000000000.1])

m=new Float32Array ([3000000000.1])

m=new Float64Array ([3000000000.1])

// m=new BigInt64Array ([3000000000])

// m=new BigUint64Array ([3000000000])

Différents types d’Arrays - 4/76 - dimanche, 24. mars 2019 (9:46 )

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:31 ES10 n'utilise pas encore le 64 bits :

Différents types d’Arrays - 5/76 - dimanche, 24. mars 2019 (9:46 )

Exécution avec FIREFOX :

.!. ATTENTION .!. test.html:12:3

3000000000.1 | 0 = -1294967296 test.html:14:3

Parce que En DOUBLE-WORD (32 bits) : test.html:18:8

Notez le bit (ou flag) du signe qui est à 1.

ES10 n'utilise pas encore le 64 bits : test.html:31:4

Uint8Array ([30000000000.1]) = 0 test.html:34:4

Uint8ClampedArray ([30000000000.1]) = 255 test.html:45:4

Int8Array ([30000000000.1]) = 0 test.html:50:4

Float32Array ([30000000000.1]) = 3000000000 test.html:61:4

Les UintxArray et IntxArray sont des exemples d’Arrays qui signifient en

Différents types d’Arrays - 6/76 - dimanche, 24. mars 2019 (9:46 )

0 to 32-bit unsigned uint32_

Différents types d’Arrays - 7/76 - dimanche, 24. mars 2019 (9:46 )

Pour connaître la taille en bytes d’une « TypedArray » il suffit d’utiliser la

<script type="text/javascript"> "use strict";

MAXINT dans chaque taille de registre ou de la variable :

<script type="text/javascript"> "use strict";

Différents types d’Arrays - 9/76 - dimanche, 24. mars 2019 (9:46 )

<script type="text/javascript"> "use strict";

Comment accéder individuellement aux éléments d’un Typed Array ?

Tout bonnement, exactement comme avec les Arrays ordinaires.

L’itérateur est retourné par les méthodes

Différents types d’Arrays - 10/76 - dimanche, 24. mars 2019 (9:46 )

<script type="text/javascript"> "use strict";

console.log("Nos « entries » :");

console.log("Nos « keys » :");

console.log("Nos « values » :");

Nos « entries » : test.html:9:4

0,58 | 1,75 | 2,42 | 3,32 | 4,92 |