différents types d'array

Transcription

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) VO L . X X I I
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.
Différents types d’Arrays
- 2/174 -
dimanche, 6. janvier 2019 (5:16 )
II.
Pour les rationnels (« float ») il existe :
« 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])
- 3/174 -
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])
Différents types d’Arrays - 4/174 - dimanche, 6. janvier 2019 (5:16 )
// 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 .!.
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 NonSigné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.
- 6/174 -
TypedArray objects
Type
Value
Range
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
- 7/174 -
Uint32Array
0 to
42949672
95
4
32-bit
unsigned
integer
unsigned
long
uint32_
t
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
-
Float32Array
1.2x10
38
to
38
3.4x10
-
Float64Array
5.0x10
324
to
308
1.8x10
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">
console.log("Float32Array.BYTES_PER_ELEMENT ="+
Float32Array.BYTES_PER_ELEMENT);
console.log("Int8Array.BYTES_PER_ELEMENT ="+
Int8Array.BYTES_PER_ELEMENT);
console.log("Uint8Array.BYTES_PER_ELEMENT ="+
Uint8Array.BYTES_PER_ELEMENT);
- 8/174 -
console.log("Uint8ClampedArray.BYTES_PER_ELEMENT ="+
Uint8ClampedArray.BYTES_PER_ELEMENT);
</script>
Float32Array.BYTES_PER_ELEMENT
Int8Array.BYTES_PER_ELEMENT
Uint8Array.BYTES_PER_ELEMENT
Uint8ClampedArray.BYTES_PER_ELEMENT
=4
=1
=2
=4
=1
=2
=4
=1
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
MAXINT dans chaque taille de registre ou de la variable :
console.log("1 Byte (BYTE)
:
0xF = 8 Bits) = ",
0xF.toString())
:
0xFF = 16 Bits) = ",
0xFF.toString())
console.log("4 Byte (DBLE WORD):
0xFFFF = 32 Bits) = ",
0xFFFF.toString())
console.log("2 Byte (WORD)
console.log("4 Byte (QUAD WORD): 0xFFFFFFFF = 64 Bits) = ",
0xFFFFFFFF.toString())
</script>
1 Byte (BYTE)
: 0xF
= 8 Bits)
2 Byte (WORD)
: 0xFF
= 16 Bits)
4 Byte (DBLE WORD): 0xFFFF
= 32 Bits)
4 Byte (QUAD WORD): 0xFFFFFFFF = 64 Bits)
test.html:11:5
- 9/174 -
= 15
test.html:2:5
= 255 test.html:5:5
=65535 test.html:8:5
=4294967295
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
arr.length = 10
arr.byteLength = 40
test.html:4:4
test.html:7:4
test.html:10:4
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()
»
- 10/174 -
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();
- 11/174 -
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
- 12/174 -
arr[0]
arr[3]
arr[6]
arr[9]
=58
=32
=35
=11
| arr[1] =75 | arr[2] =42 |
| arr[4] =92 | arr[5] =79 |
| arr[7] =84 | arr[8] =18 |
|
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);
- 13/174 -
// 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
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 ]
0: 65
1: 48
2: 91
buffer: ArrayBuffer { byteLength: 12 }
- 14/174 -
test.html:4:4
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
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__()
hasOwnProperty:
function hasOwnProperty()
isPrototypeOf:
function isPrototypeOf()
toLocaleString:
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 :
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"
function Symbol.iterator()
arr.keys() = Array Iterator { }
test.html:21:4
arr.values() = Array Iterator { }
test.html:22:4
- 18/174 -
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
test.html:30:7
test.html:30:7
test.html:33:4
arr.keys()
Array Iterator { }
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
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 ); »
- 19/174 -
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]) {
- 20/174 -
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 :
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
Int32Array(7)
Int32Array(7)
Int32Array
Int32Array(3)
Int32Array(5)
Int32Array(7)
Int32Array
Int32Array(4)
Int32Array(3)
Int32Array(4)
Int32Array(7)
Int32Array(4)
Int32Array(5)
Int32Array(7)
Int32Array(7)
Int32Array
Int32Array(4)
Int32Array(4)
Int32Array
Int32Array(7)
Int32Array(7)
Int32Array(7)
Int32Array(5)
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
[
test.html:23:4
15,
17,
12,
10,
14,
15,
12,
11,
10,
16,
20,
11,
14,
20,
17,
19,
13,
11,
19,
20,
15,
17,
18,
15, 15, 15, 15, 15,
17, 17, 17, 17, 17,
12 ]
10, 10 ]
14, 14, 14, 14 ]
15, 15, 15, 15, 15,
12 ]
11, 11, 11 ]
10, 10 ]
16, 16, 16 ]
20, 20, 20, 20, 20,
11, 11, 11 ]
14, 14, 14, 14 ]
20, 20, 20, 20, 20,
17, 17, 17, 17, 17,
19 ]
13, 13, 13 ]
11, 11, 11 ]
19 ]
20, 20, 20, 20, 20,
15, 15, 15, 15, 15,
17, 17, 17, 17, 17,
18, 18, 18, 18 ]
- 21/174 -
15 ]
17 ]
15 ]
20 ]
20 ]
17 ]
20 ]
15 ]
17 ]
23 : Int32Array(7) [ 17,
24 : Int32Array(5) [ 18,
25 : Int32Array(7) [ 17,
26 : Int32Array(7) [ 15,
27 : Int32Array(4) [ 13,
28 : Int32Array(7) [ 15,
29 : Int32Array(7) [ 15,
30 : Int32Array(4) [ 11,
31 : Int32Array(4) [ 13,
32 : Int32Array(4) [ 16,
33 : Int32Array(7) [ 17,
34 : Int32Array(4) [ 16,
35 : Int32Array(7) [ 20,
36 : Int32Array(5) [ 14,
37 : Int32Array(3) [ 10,
38 : Int32Array(7) [ 20,
39 : Int32Array(5) [ 14,
40 : Int32Array(7) [ 20,
41 : Int32Array(4) [ 16,
42 : Int32Array(7) [ 17,
43 : Int32Array(5) [ 14,
44 : Int32Array(7) [ 15,
45 : Int32Array(5) [ 18,
46 : Int32Array(4) [ 13,
47 : Int32Array(7) [ 20,
48 : Int32Array(5) [ 18,
49 : Int32Array(5) [ 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,
17, 17, 17, 17,
18, 18, 18 ]
17, 17, 17, 17,
15, 15, 15, 15,
13, 13 ]
15, 15, 15, 15,
15, 15, 15, 15,
11, 11 ]
13, 13 ]
16, 16 ]
17, 17, 17, 17,
16, 16 ]
20, 20, 20, 20,
14, 14, 14 ]
10 ]
20, 20, 20, 20,
14, 14, 14 ]
20, 20, 20, 20,
16, 16 ]
17, 17, 17, 17,
14, 14, 14 ]
15, 15, 15, 15,
18, 18, 18 ]
13, 13 ]
20, 20, 20, 20,
18, 18, 18 ]
18, 18, 18 ]
17 ]
17 ]
15 ]
15 ]
15 ]
17 ]
20 ]
20 ]
20 ]
17 ]
15 ]
20 ]
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 :
- 22/174 -
"use strict";
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>
- 23/174 -
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 positon « p » dans la TypedArray1. Cette méthode n’est pas disponible avec
l’objet Array.
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);
- 24/174 -
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
Final length =10
test.html:26: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
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
const ar1 =
new Uint8Array([77,33,44,88,11,55,66,22,00,99 ]);
- 26/174 -
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
- 27/174 -
Ar1: 77,33,44,88,11,55,66,22,0,99
test.html:11:3
Ar2: 600,680,650
test.html:12:3
Final length =10
test.html:15:3
Ar1: 77,33,44,88,168,138,66,22,0,99
test.html:22:3
Ar3: 20,50,30
test.html:23: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.
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
- 28/174 -
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.
- 29/174 -
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 éventuellement 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]
- 30/174 -
);
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
- 33/174 -
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
- 35/174 -
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, 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
- 36/174 -
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 :
- 37/174 -
Avec Yandex :
- 38/174 -
- 39/174 -
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 |
- 40/174 -
// 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);
- 41/174 -
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>
- 42/174 -
- 43/174 -
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.
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);
- 44/174 -
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 « 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
- 45/174 -
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é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.
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>
- 47/174 -
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>
- 48/174 -
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>
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.
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);
- 49/174 -
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
- 52/174 -
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
rays Typées » :
,
d
,
n ) » des « Arrays » et « Ar-
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).
- 53/174 -
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;
- 54/174 -
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
- 56/174 -
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>
- 57/174 -
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()
- 58/174 -
constructor: Int32Array()
length: 3
name: "Int32Array"
prototype: Int32ArrayPrototype { … }
<prototype>: function TypedArray()
<prototype>: ??? { … }
buffer: Getter
byteLength: Getter
byteOffset: Getter
length: Getter
map: function map()
set: function set()
toLocaleString: function toLocaleString()
Symbol(Symbol.iterator): function values()
<prototype>: function TypedArray()
- 59/174 -
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()
isArray: function isArray()
length: 1
map: function map()
name: "Array"
of: function of()
pop: function pop()
prototype: Array []
push: function push()
- 60/174 -
shift: function shift()
splice: function splice()
unshift: function unshift()
flat: function flat()
flatMap: function flatMap()
length: 0
map: function map()
pop: function pop()
- 61/174 -
Symbol(Symbol.unscopables): Object {
copyWithin: true,
entries: true,
fill: true, …
}
<get>: function Symbol.species()
- 62/174 -
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>
- 63/174 -
II.
Avec Simplement « Array », sans « new » (sans passer par le constructeur = 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
- 64/174 -
</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));
- 65/174 -
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 ».
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 propriété « Array . sort ( ) » :
Pour trier les éléments d’une Array, rien n’est plus simple :
- 66/174 -
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>
- 67/174 -
Le tri d’une Array peut avoir des consequences imprévisibles et catastrophiques :
Ce petit code 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 :
- 68/174 -
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 disponibles avec 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.
- 70/174 -
LES PARAMÈTRES DU RESTE :
Un autre type d’Array est le paramètre du reste.
let f = (p, ...a) => {
console.log("a =",a);
}
f();
</script>
En fait, les Arrays sont simplement des littéraux d’objet dont les labels
sont étiquetés avec des nombres ordonnés à partir de l’indice zéro.
Voyez leur structure ci-après :
let f = (p, ...a) => {
console.log("a =",a);
return a;
}
let r=f("va dans p",
"Zéro","Un","Deux","Trois","Quatre","Cinq");
console.log("Object.entries(r)",Object.entries(r));
console.log("Object.values(r)",Object.values(r));
</script>
- 71/174 -
a =
Array(6) [
"Zéro", "Un", "Deux",
"Trois", "Quatre", "Cinq"
]
test.html:3:3
Object.entries(r)
Array(6) [
(2) […], (2) […], (2) […],
(2) […], (2) […], (2) […]
]
test.html:10:3
Object.values(r)
Array(6) [
"Zéro", "Un", "Deux",
"Trois", "Quatre", "Cinq"
]
test.html:11:3
- 72/174 -
Voici comment reconstituer cette Array avec un « Object literal » :
let r = {
0:"Zéro" , 1:"Un" , 2:"Deux",
3:"Trois" , 4:"Quatre" , 5:"Cinq"
}
console.log("Object.entries(r)",Object.entries(r));
console.log("Object.values(r)",Object.values(r));
</script>
- 73/174 -
Confrontons les deux paradigmes :
let a=[
"Zéro" , "Un" , "Deux" ,
"Trois" , "Quatre" , "Cinq"
]
let o={
0:"Zéro" , 1:"Un" , 2:"Deux" ,
3:"Trois" , 4:"Quatre" , 5:"Cinq"
}
console.log("ARRAY" , "a[0] =" , a[0]);
console.log("HASH" , "o[0] =" , o[0]);
</script>
- 74/174 -
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>
- 75/174 -
- 76/174 -
LES « ASSOCIATIVE ARRAYS »
( « ARRAYS ASSOCIATIVES » ou « TABLEAUX ASSOCIATIFS ») :
C’est comme leur nom l’indique, des arrays sous forme de littéral d’objet
et dans lesquels naturellement les values (éléments) sont explicitement
associées à des keys, comme dans les « littéraux d’objet » ordinaires dans
lesquels c’est le programmeur qui détermine les noms des keys (on associe explicitement des noms de keys littéraux à des values). Dans une Array
les keys sont automatiquement numérotées « de 0 à n », à partir du premier élément de l’array.
Une « Array associative » est définie dans des « accolades » (exactement
comme un « objet hash ») et non avec des « crochets » comme pour les
« Arrays ».
console.log(["dias","luy","nzoyif"])
console.log({0:"dias",1:"luy",2:"nzoyif"})
</script>
Exécution avec Firefox Quantum 64.0b13 :
- 77/174 -
Exécution avec Yandex Version 18.11.0.2022 beta :
Mais qu’est-ce que vous me dites-là ? Vous ne connaissez toujours pas
encore ce que sont les « keys » et les « values » ?
Les « keys » sont les libellés qui permettent l’accès à un « values » de
l’array ou de l’objet (les deux d’ailleurs sont des objets), ce sont des voies
d’accès aux values, comme les « variables » permettent elles aussi
d’accéder aux « values » stockées dans la RAM de l’ordinateur. D’ailleurs on
peut aussi changer les values dans une « array » ou un « objet ». « keys »
et « values »
Voyons :
const a = ["dias","luy","nzoyif"];
console.dir(à = ${a},
Object.entries(a) = ${Object.entries(a)},
Object.keys(a) = ${Object.keys(a)},
Object.values(a) = ${Object.values(a)}`
);
- 78/174 -
const o =
{nom:"dias",postnom1:"luy",postnom2:"nzoyif"};
console.dir(ò = ${o},
Object.entries(o) = ${Object.entries(o)},
Object.keys(o) = ${Object.keys(o)},
Object.values(o) = ${Object.values(o)}`
);
</script>
Ceci a été affiché avec la méthode de l’objet « String », puisque que nous
l’avons affiché en tant que chaîne de caractères, ici dans une « littérale de
chaîne ».
Synoptique mais beurk ? Dans ce cas affichons cela avec la méthode respective de chaque élément, en les séparant avec des virgules !
const a = ["dias","luy","nzoyif"];
console.dir(à = `, a,
Òbject.entries(a) = `, Object.entries(a),
Òbject.keys(a) = `, Object.keys(a),
Òbject.values(a) = `, Object.values(a)
);
const o = {
"nom":"dias","postnom1":"luy","postnom2":"nzoyif"
};
console.dir(ò = `, o,
Òbject.entries(a) = `, Object.entries(a),
Òbject.keys(a) = `, Object.keys(a),
Òbject.values(a) = `, Object.values(a)
);
- 79/174 -
console.log("Object.entries(a)[0] = ",
Object.entries(a)[0], Object.entries(a)["0"]);
console.log("Object.entries(o)[0] = ",
Object.entries(o)[0], Object.entries(o)[0]);
console.log("Object.entries(a)[0] = ",
Object.entries(a)[0][0], Object.entries(a)[0][1]);
console.log("Object.entries(o)[0] = ",
Object.entries(o)[0][0], Object.entries(o)[0][1]);
console.log("Object.keys(a)[0] = ",
Object.keys(a)[0], Object.keys(a)["0"]);
console.log("Object.keys(o)[0] = ",
Object.keys(o)[0], Object.keys(o)[0]);
console.log("Object.values(a)[0] = ",
Object.values(a)[0], Object.values(a)["0"]);
console.log("Object.values(o)[0] = ",
Object.values(o)[0], Object.values(o)[0]);
console.log("Object.values(o)'[nom...'] = ",
o['nom'], o['postnom1'], o['postnom2']);
</script>
Exécution avec Firefox Quantum 64.0b13 :
Pour l’Array « a » :
- 80/174 -
Pour l’objet « o » :
- 81/174 -
Mais alors, qu’est-ce qu’une « Associated Array » ?
Vulgairement parlant, c’est ni plus ni moins, un « littéral d’objet » sans
« propriétés » et sans « méthodes » ajoutées.
Les éléments d’une « Array associative » sont dynamiquement ajoutés
avec la syntaxe suivante :
arrayAssociative["key"] = value;
alors que pour un objet ça se fait avec la syntaxe suivante :
objet . "key"
=
value;
const a = {"nom":"dias", "prenom1":"luy"};
console.log(à = `, a) ;
console.log(à["nom"] = `, a["nom"]) ;
console.log(à["prenom1"] = `, a["prenom1"]);
const e1 = 'a["prenom2"] = "nzoyif"';
// Assignation pour Array associative.
console.log(``.padStart(5,"*"),`${e1} => ${eval(e1)}`);
console.dir(à = `, a);
console.dir(à["nom"] = ${a["nom"]}
- 82/174 -
a["prenom1"] = ${a["prenom1"]} // Notez les crochets
a.prenom2 = ${a.prenom2}
// Notez le point`
);
const o = { "nom":"dias","prenom1":"luy" };
console.log(ò = `, o) ;
console.log(ò["nom"] = `, o["nom"]) ;
console.log(ò["prenom1"] = `, o["prenom1"]);
const e2 = 'o.prenom2 = "nzoyif"';
// Assignation pour objet hash.
console.log(``.padStart(5,"*"),`${e2} => ${eval(e2)}`);
console.dir(ò = `, o);
console.dir(ò["nom"] = ${o["nom"]} // Notez les crochets
o.prenom1 = ${o.prenom1}
// Notez le points.
o["prenom2"] = ${o["prenom2"]}`
);
</script>
Pour l’Array Associative :
- 83/174 -
Pour l’objet :
Une des caractéristiques de JavaScript c’est la « PLÉTHORISATION » des
possibilités, peut-être pour répondre aux habitudes diversifiées de plusieurs programmeurs venant des plates-formes différentes !
- 84/174 -
LES MAPS :
Les « Maps » sont des « Arrays » presque comme des « Associative Arrays », leurs données sont regroupées dans des couples « key : value ».
Deux différences c’est que
1.
Dans les « Maps » les couples « key : value » sont regroupés dans
des Arrays à seulement ces deux éléments, ces couples étant séparés
entre eux par une virgule ;
2.
Le tout est délimité/regroupé dans une grande array le « Map »
délimitée par des crochets au lieu des accolades contrairement aux « Associatives Arrays ».
var map = new Map([
['a', 20], [Date.now(), 54],
[45, Date.now()], [18, 'c']
]);
console.log(map);
// Map(4) {
//
a -> 20, 1544283193937 -> 54,
//
45 -> 1544283193937, 18 -> "c"
// }
for(var el of map) console.log(el);
var t=`${"Keys".padEnd(7," ")} = | `;
for(var cle of map.keys()) t += cle + ` | `;
console.log(t);
var t=`${"Values".padEnd(7," ")} = * `;
for(var val of map.values()) t += val + ` * `;
console.log(t);
</script>
- 85/174 -
- 86/174 -
Quelques méthodes de l’objet « Map ( ) » :
var a = [Date.now()];
console.log(a); // Array [ 1544273035052 ]
var map = new Map([['a', 20], [18, 35], [91, 54]]);
console.log(map);
// Firefox : Map { a -> 20, 18 -> 35, 91 -> 54 }
// Yandex : Map(2) {"a" => 20, 18, 91 -> 54 => 35}
map.set(a, 64).set(true, 85);
console.log(map);
// Map(4) { a -> 20, 18 -> 35, 91 -> 54, (1) […] -> 64,
true -> 85 }
- 87/174 -
// Map(4) {"a" => 20, 18 => 35, 91 -> 54, Array(1) => 64,
true => 85}
console.log(map.size);
console.log(map.has(a));
console.log(map.has([1]));
console.log(map.get(a));
console.log(map.get(18));
console.log(map.get(true));
//
//
//
//
//
//
=>
=>
=>
=>
=>
=>
5
true
false
64
35
85
let k="+ ", v="* ";
map.forEach(function (val, key) {
v+=val + ` * `;
k+=key + ` + `;
});
console.log(k);
// => + a + 18 + 91 + 1544274283091 + true +
console.log(v);
// => * 20 * 35 * 54 * 64 * 85 *
map.delete(a);
// => 4
// => undefined
console.log(Array.from(map));
// Firefox :
// => Array(4) [ (2) […], (2) […], (2) […], (2) […] ]
// (4) […]
//
0: Array [ "a", 20 ]
//
1: Array [ 18, 35 ]
//
2: Array [ 91, 54 ]
//
3: Array [ true, 85 ]
//
length: 4
//
//
// Yandex :
// => (4) (4) [Array(2), Array(2), Array(2), Array(2)]
//
0: (2) ["a", 20]
//
1: (2) [18, 35]
//
2: (2) [91, 54]
//
3: (2) [true, 85]
//
length: 4
//
__proto__: Array(0)
var map = new Map([
- 88/174 -
['a', 56], [Date.now(), 40],
[78, 'c'], [41, Date.now()]
]);
console.log(map);
// Map(4) { a -> 56, 1544277041459 -> 40,
//
78 -> "c", 41 -> 1544277041459 }
let kya=[], vla=[];
for (var [cle, valeur] of map) {
kya=kya.concat(cle);
vla.push(valeur);
}
console.log(kya);
// Array(4) [ "a", 1544277173449, 78, 41 ]
console.log(vla);
// Array(4) [ 56, 40, "c", 1544277173449 ]
let vl = [];
for (let valeurs of map.values()){
vl=vl.concat(valeurs);
}
console.log(vl);
// Array(4) [ 56, 40, "c", 1544277643496 ]
let ky = [];
for (var cles of map.keys()){
ky.push(cles);
}
console.log(ky);
// => Array(4) [ "a", 1544277741029, 78, 41 ]
</script>
Lisez les commentaires dans le code ci-dessous :
var a = [Date.now()];
console.log(a); // Array [ 1544273035052 ]
var map = new Map([['a', 20], [18, 35], [91, 54]]);
console.log(map);
// Firefox : Map { a -> 20, 18 -> 35, 91 -> 54 }
- 89/174 -
// Yandex : Map(2) {"a" => 20, 18, 91 -> 54 => 35}
map.set(a, 64).set(true, 85);
console.log(map);
// Map(4) { a -> 20, 18 -> 35, 91 -> 54, (1) […] -> 64,
true -> 85 }
// Map(4) {"a" => 20, 18 => 35, 91 -> 54, Array(1) => 64,
true => 85}
console.log(map.has(a));
console.log(map.has([1]));
console.log(map.get(18));
console.log(map.get(true));
//
//
//
//
//
//
=>
=>
=>
=>
=>
=>
5
true
false
64
35
85
let k="+ ", v="* ";
map.forEach(function (val, key) {
v+=val + ` * `;
k+=key + ` + `;
});
console.log(k);
// => + a + 18 + 91 + 1544274283091 + true +
console.log(v);
// => * 20 * 35 * 54 * 64 * 85 *
map.delete(a);
// => 4
// => undefined
console.log(Array.from(map));
// Firefox :
// => Array(4) [ (2) […], (2) […], (2) […], (2) […] ]
// (4) […]
//
0: Array [ "a", 20 ]
//
1: Array [ 18, 35 ]
//
2: Array [ 91, 54 ]
//
3: Array [ true, 85 ]
//
length: 4
//
//
// Yandex :
// => (4) (4) [Array(2), Array(2), Array(2), Array(2)]
//
0: (2) ["a", 20]
//
1: (2) [18, 35]
- 90/174 -
//
2: (2) [91, 54]
//
3: (2) [true, 85]
//
length: 4
//
__proto__: Array(0)
var map = new Map([
['a', 56], [Date.now(), 40],
[78, 'c'], [41, Date.now()]
]);
console.log(map);
// Map(4) { a -> 56, 1544277041459 -> 40,
//
78 -> "c", 41 -> 1544277041459 }
let kya=[], vla=[];
for (var [cle, valeur] of map) {
kya=kya.concat(cle);
vla.push(valeur);
}
console.log(kya);
// Array(4) [ "a", 1544277173449, 78, 41 ]
console.log(vla);
// Array(4) [ 56, 40, "c", 1544277173449 ]
let vl = [];
for (let valeurs of map.values()){
vl=vl.concat(valeurs);
}
console.log(vl);
// Array(4) [ 56, 40, "c", 1544277643496 ]
let ky = [];
for (var cles of map.keys()){
ky.push(cles);
}
console.log(ky);
// => Array(4) [ "a", 1544277741029, 78, 41 ]
</script>
- 91/174 -
Les « WeakMap » :
Lisez les commentaires :
var a = [96, 10] , b = [43,[67, 84]] , c = [96, 42, 64];
var wmap = new WeakMap([[a, 1], [b, 2]]);
console.log(wmap);
// WeakMap { (2) […] -> 2, (2) […] -> 1 }
//
<entries>?
//
0: Array [ … ] ? 2
//
<key>: Array [ … ]
//
<key>: (2) […]
//
0: 96
//
1: 10
//
length: 2
//
//
<value>: 2
//
1: Array [ … ] ? 1
//
//
<key>: (2) […]
//
0: 43
//
1: Array [ 67, 84 ]
//
1: (2) […]
//
0: 67
//
1: 84
//
length: 2
//
//
length: 2
//
//
<value>: 2
//
wmap.set(c, 3).set(b, 4);
console.log(wmap);
// WeakMap(3) { (2) […] -> 1, (2) […] -> 4, (3) […] -> 3 }
// WeakMap(3)
//
<entries>
//
0: Array [ … ] -> 1
//
0: (2) […] ? 1
//
- 92/174 -
//
<key>: (2) […]
//
0: 96
//
1: 10
//
length: 2
//
//
<value>: 1
//
1: Array [ … ] -> 4
//
1: (2) […] -> 4
//
//
<key>: (2) […]
//
0: 43
//
1: Array [ 67, 84 ]
//
length: 2
//
//
<value>: 4
//
2: Array(3) [ … ] -> 3
//
2: (3) […] -> 3
//
<key>: Array(3) [ … ]
//
<key>: (3) […]
//
0: 96
//
1: 42
//
2: 64
//
length: 3
//
//
<value>: 3
//
console.log("wmap.has([96, 42, 64]) = ",
wmap.has([96, 42, 64])); // => false
console.log(wmap.has(c));
// => true
console.log(wmap.get(a));
console.log(wmap.get(b));
console.log(wmap.get(c));
// => 1
// => 4
// => 3
wmap.delete(b);
console.log(wmap.get(b));
</script>
// => undefined
Le « get » et le « set » avec les « weakMap » :
- 93/174 -
var Oeil = (function () {
console.log("Dans « Oeil »");
var organes = new WeakMap;
console.log("this = ",this);
// this = undefined
function Oeil(lequel) {
organes.set(this, lequel);
console.log("this = ",this);
// this = Object { }
// this = Oeil {}
}
Oeil.prototype.dispOrgan = function () {
return organes.get(this);
};
Oeil.prototype.dispOrganPlus = function () {
return [organes.get(this)," Surchargé"];
};
return Oeil;
})();
console.log("Départ ...");
// Départ ...
var bruch = new Oeil('Membane de Bruch');
// Dans « Oeil »
console.log("Après « Oeil »");
// Après « Oeil »
console.log(bruch);
// Object { }
// Oeil {}
console.log(bruch.dispOrgan());
// Membane de Bruch
console.log(bruch.dispOrganPlus()[0]
, bruch.dispOrganPlus()[1]);
// Membane de Bruch Surchargé
for (var idx in bruch)
- 94/174 -
console.log("* for (var idx in bruch) => ",idx);
// * for (var idx in bruch) => dispOrgan
// * for (var idx in bruch) => dispOrganPlus
</script>
- 95/174 -
- 96/174 -
- 97/174 -
LES « SET »s :
C’est une forme d’Array d’itérables dans laquelle chaque élément ne peut
figurer qu’une seule fois, mais dont la syntaxe est similaire à celle des
« Typed Arrays ».
let t;
const a=[14, {a:12, b:17}, 19, 14, "Inco", [14, 15], 10,
14, 15];
console.log(a);
// Array(9) [ 14, {…}, 19, 14, "Inco", (2) […], 10, 14, 15
]
// (9) […]
//
0: 14
//
1: Object { a: 12, b: 17 }
//
1: {…}
//
a: 12
//
b: 17
//
<prototype>: {…}
//
2: 19
//
3: 14
//
4: "Inco"
//
5: Array [ 14, 15 ]
//
5: (2) […]
//
0: 14
//
1: 15
//
length: 2
//
<prototype>: [
//
6: 10
//
7: 14
//
8: 15
//
length: 9
//
<prototype>: []
const st = new Set(a);
console.log(st);
// Set(7) [ 14, {…}, 19, "Inco", (2) […], 10, 15 ]
// Set(7)
//
size: 7
//
<entries>
//
0: 14
- 98/174 -
//
1: Object { … }
//
1: {…}
//
a: 12
//
b: 17
//
//
2: 19
//
3: "Inco"
//
4: Array [ … ]
//
4: (2) […]
//
0: 14
//
1: 15
//
length: 2
//
//
5: 10
//
6: 15
//
//
<prototype>: {…}
//
add: function add()
//
clear: function clear()
//
constructor: function Set()
//
delete: function delete()
//
//
//
has: function has()
//
keys: function values()
//
size: Getter
//
//
//
Symbol(Symbol.toStringTag): "Set"
//
<prototype>: {…}
const fl = new Float64Array(a);
console.log(fl);
// Float64Array(9) [ 14, NaN, 19, 14, NaN, NaN, 10, 14, 15
]
// Float64Array(9)
//
0: 14
//
1: NaN
//
2: 19
//
3: 14
//
4: NaN
//
5: NaN
//
6: 10
//
7: 14
- 99/174 -
//
8: 15
//
//
buffer: ArrayBuffer
//
byteLength: 72
//
//
<prototype>: ArrayBufferPrototype
//
byteLength: Getter
//
//
//
//
<prototype>: {…
//
byteLength: 72
//
byteOffset: 0
//
length: 9
//
<prototype>: Float64ArrayPrototype { … }
//
<prototype>: Float64ArrayPrototype
//
//
constructor: function Float64Array()
//
constructor: Float64Array()
//
//
length: 3
//
name: "Float64Array"
//
prototype: Float64ArrayPrototype { … }
//
<prototype>: TypedArray()
//
//
length: 0
//
name: "TypedArray"
//
of: function of()
//
prototype: TypedArrayPrototype { … }
//
//
<prototype>: ()
//
//
arguments: null
//
//
//
caller: null
//
//
length: 0
//
name: ""
//
//
//
//
//
<prototype>: {…}
- 100/174 -
//
<prototype>: TypedArrayPrototype { … }
//
<prototype>: TypedArrayPrototype
//
buffer: Getter
//
byteLength: Getter
//
byteOffset: Getter
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
length: Getter
//
map: function map()
//
//
//
//
set: function set()
//
//
//
//
//
//
//
//
//
//
<prototype>: {…}
t = "";
for (let e of st) {
t += " => " + e + " : " + e % 2 + "\n";
}
console.log("Impaire ?\n", t);
// Impaire ?
//
=> 14 : 0
- 101/174 -
J.D.B.
//
//
//
//
DIASOLUKA Nz. Luyalu
=> [object Object] : NaN
=> 19 : 1
=> Inco : NaN
=> 14,15,10,14,15 : NaN
t = "";
for (let e of fl) {
t += " => " + e + " : " + e % 2 + "\n";
}
console.log("Impaire ?\n", t);
// Impaire ?
//
=> 14 : 0
//
=> NaN : NaN
//
=> 19 : 1
//
=> 14 : 0
//
=> NaN : NaN
//
=> NaN : NaN
</script>
Exécution avec Firefox :
Exécution avec Yandex :
Les propriétés de « Set » sont les suivantes :
- 102/174 -
- 103/174 -
var set = new Set(
['azui', 'motuka', 'bilamba', 'azui', 'motuka', 'keba']
);
console.log(set);
// Set(4) [ "azui", "motuka", "bilamba", "keba" ]
// Set(4)
//
size: 7
//
<entries>
//
0: "azui"
//
1: "motuka"
//
2: "bilamba"
//
3: "keba"
//
<prototype>: Object { ... }
set.add('dendo').add('bilamba').add('dendo');
console.log(set);
// Set(5) [ "azui", "motuka", "bilamba", "keba", "dendo" ]
set.delete('boni');
console.log(set);
// Set(5) [ "azui", "motuka", "bilamba", "keba", "dendo" ]
set.delete('bilamba');
console.log(set);
// Set(4) [ "azui", "motuka", "keba", "dendo" ]
console.log("set.size = ", set.size);
// set.size = 4
console.log("set.has('dendon') = ",
set.has('dendon'));
// set.has('dendon') = false
console.log("set.has('dendo') = ", set.has('dendo'));
// set.has('dendo') = true
set.forEach(function (it) {
console.log(it);
// azui
// motuka
// keba
// dendo
});
</script>
- 104/174 -
Une application de « Set » c’est la gestion des mots-clés, qui ne doivent
figurer qu’une seule fois dans la liste. De là vous n’avez qu’à faire un « copier-coller » légal et légitime :
let s = new Set([
"destructuring", "destructuration", "map", "every",
"filter", "find", "fndIndex", "destructuring",
"forEach", "destructuring", "from", "map",
"indexOf", "isArray", "join", "lastIndexOf",
"destructuring", "length", "map", "splice",
"destructuring", "includes", "map", "push", "of",
"pop", "concat", "destructuring", "reduce",
"reduceRight", "reverse", "shift", "slice", "some",
"sort", "delete", "destructuring", "unshift", map",
"Array", "destructuring", "objet global",
"destructuring", "constructeur", "tableaux",
"destructuring", "objets de haut-niveau",
"javascript", "ecmascript", "name", "map",
"destructuring", "prototype"]);
let arr= s, t="";
for(let i of arr){
t+=i+", "
}
console.log(t);
/*******/
let r = Array.from(s);
t="";
r.forEach(x => t+=x+", ")
console.log(t);
</script>
- 105/174 -
Gestion du contenu d’un « Set » :
var set = new Set(
[94, "string", [25, 93], 50, "string", 94, [25, 93]]
);
console.log(set); //
// Set(5) [ 94, "string", (2) […], 50, (2) […] ]
//
size: 5
//
<entries>
//
0: 94
//
1: "string"
//
2: Array [ … ]
//
2: (2) […]
//
0: 25
//
1: 93
//
length: 2
//
//
3: 50
//
4: Array [ … ]
//
4: (2) […]
//
0: 25
//
1: 93
//
length: 2
- 106/174 -
//
//
console.log(Array.from(set));
// Array(4) [ 94, (2) […], 50, (2) […] ]
// (4) […]
//
0: 94
//
1: "string"
//
2: Array [ 25, 93 ]
//
2: (2) […]
//
0: 25
//
1: 93
//
length: 2
//
//
3: 50
//
4: Array [ 25, 93 ]
//
4: (2) […]
//
0: 25
//
1: 93
//
length: 2
//
//
length: 5
//
let t="";
for (let v of set) t+=v + ` | `;
console.log(t);
// 94 | string | 25,93 | 50 | 25,93 |
// Il n'a pas supprimé le deuxième [25, 93],
// mais il a supprimé le doublon de « 94 »
// et celui de « string ».
let k="",v="";
for (var [cle, val] of set.entries()) {
k+=cle + " | " ;
v+=val + " | " ;
}
console.log(k);
// 94 | string | 25,93 | 50 | 25,93 |
k="";
for (var cle of set.keys()) k+= cle + " | ";
console.log(k);
- 107/174 -
// 94 | string | 25,93 | 50 | 25,93 |
v="";
for (var val of set.values()) v+= val + " | ";
console.log(v);
// 94 | string | 25,93 | 50 | 25,93 |
</script>
- 108/174 -
LES « WEAKSETS » :
var a = ["jmois", 9, 12], b = ["annee", 2018], c = [10];
// Définition 3 variables distinctes.
// a <= array à 3 éls : stg, num, num
// b <= array à 2 éls : stg et num
// c <= array à un seul él numérique
console.log("a = ", a); // a = Array(3) [ "jmois", 9, 12 ]
console.log("b = ", b); // b = Array [ "annee", 2018 ]
console.log("c = ", c); // c = Array [ 10 ]
var wset = new WeakSet([a, b, a]);
// Constitution d'un « weakSet » en
// proposant deux fois l'array « a »,
// qui ne sera retenu qu'une seule fois.
console.log("wset = ", wset);
// wset = WeakSet [ (3) […], (2) […] ]
wset.add(c).add(b).add(c);
// Ajout d'éléments à la weakSet,
// « b » faisant déjà partie de « wset »,
// « c » proposé deux fois et ne faisant
// pas déjà partie de « wset ».
// wset = WeakSet(3) [ (1) […], (3) […], (2) […] ]
console.log(".!. Attention .!.");
console.log(`wset.has([10]) = `, wset.has([10]));
// wset.has([10]) = false
console.log("wset.has(c) = ", wset.has(c));
// wset.has(c) = true
wset.delete(c);
console.log("wset.has(c) = ", wset.has(c));
// wset.has(c) = false
// wset = WeakSet [ (3) […], (2) […] ]
</script>
- 109/174 -
Avec Firefox Quantm 64.0b13 :
- 110/174 -
Avec Yandex Version 18.11.1.385 beta :
- 111/174 -
- 112/174 -
Si vous remplacez « weakSet » par « Set » vous obtiendrez le résultat suivant :
var a = ["jmois", 9, 12], b = ["annee", 2018], c = [10];
// Définition 3 variables distinctes.
// a <= array à 3 éls : stg, num, num
// b <= array à 2 éls : stg et num
// c <= array à un seul él numérique
console.log("a = ", a); // a = Array(3) [ "jmois", 9, 12 ]
console.log("b = ", b); // b = Array [ "annee", 2018 ]
console.log("c = ", c); // c = Array [ 10 ]
var set = new Set([a, b, a]);
// Constitution d'un « weakSet » en
// proposant deux fois l'array « a »,
// qui ne sera retenu qu'une seule fois.
console.log("set = ", set);
// set = WeakSet [ (3) […], (2) […] ]
set.add(c).add(b).add(c);
- 113/174 -
// Ajout d'éléments à la weakSet,
// « b » faisant déjà partie de « set »,
// « c » proposé deux fois et ne faisant
// pas déjà partie de « set ».
// set = WeakSet(3) [ (1) […], (3) […], (2) […] ]
console.log(".!. Attention .!.");
console.log(`set.has([10]) = `, set.has([10]));
// set.has([10]) = false
console.log("set.has(c) = ", set.has(c));
// set.has(c) = true
set.delete(c);
console.log("set.has(c) = ", set.has(c));
// set.has(c) = false
// set = WeakSet [ (3) […], (2) […] ]
</script>
<!--script type="text/javascript"> "use strict";
var a = [1] , b = [2] , c = [3];
var wmap = new WeakMap([[a, 1], [b, 2]]);
wmap.set(c, 3).set(b, 4);
console.log(wmap.has(a));
console.log(wmap.has([1]));
wmap.delete(a);
// => true
// => false
// => 1
// => undefined
// Private properties store:
var Person = (function () {
var names = new WeakMap;
function Person(name) {
names.set(this, name);
}
Person.prototype.getName = function () {
return names.get(this);
- 114/174 -
};
return Person;
})();
var person = new Person('Vasya');
console.log(person.getName());
// => 'Vasya'
for (var key in person)
console.log(key); // => only 'getName'
</script>
- 115/174 -
LES « DICT ionaries » :
- 116/174 -
L’OBJET ARRAYBUFFER :
Un objet particulier est le « ArrayBuffer » (littéralement « tampon de tableau »). C’est un espace-mémoire qu’on réserve pour des éléments
d’Arrays typées, de taille connue.
// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(10);
// Réserver 10 places en Bytes ds ArrayBuffer
console.log(buffer);
console.log(buffer.byteLength);
const uint8 = new Uint8Array(buffer, 3);
// Réserver des places pour des entiers non
// signés dans ArrayBuffer depuis l'offset 4
console.log(uint8);
console.log(uint8.byteLength);
uint8.fill(Math.round(Math.random()*10));
// Remplir tous les Bytes réservés
console.log(uint8);
</script>
- 117/174 -
Exemple :
//
var buffer = new ArrayBuffer(10);
//
var float32 = new Float32Array(buffer);
// Avec YANDEX : Uncaught RangeError:
- 118/174 -
// byte length of Float32Array should be a multiple of 4
// at new Float32Array (<anonymous>)
at test.html:3
//
// Avec Firefox : RangeError:
// attempting to construct out-of-bounds TypedArray
// on ArrayBuffer
test.html:3:16
var buffer = new ArrayBuffer(12);
console.log("buffer = new ArrayBuffer(12) =",buffer);
console.log("buffer.toString() =",buffer.toString());
console.log("Object.getOwnPropertyDescriptors(buffer) =",
Object.getOwnPropertyDescriptors(buffer));
console.log("");
var float32 = new Float32Array(buffer);
console.log("float32 = new Float32Array(buffer) =",
float32);
console.log("float32.byteLength =",float32.byteLength);
console.log("float32.length =",float32.length);
console.log("float32.buffer.byteLength=",
float32.buffer.byteLength);
</script>
Exécution avec YANDEX :
buffer = new ArrayBuffer(12) = ArrayBuffer(12) {}
test.html:16
buffer.toString() = [object ArrayBuffer]
test.html:17
Object.getOwnPropertyDescriptors(buffer) = {}
test.html:23
float32 = new Float32Array(buffer) =
Float32Array(3) [0, 0, 0]
test.html:25
test.html:26
test.html:28
float32.byteLength = 12
float32.length = 3
float32.buffer.byteLength= 12
- 119/174 -
test.html:15 buffer = new ArrayBuffer(12) = ArrayBuffer(12) {}
1. ArrayBuffer(12) {}
1. [[Int8Array]]: Int8Array(12) [0,0,0,0,0,0,0,0,0,0,0,0]
2. [[Int16Array]]: Int16Array(6) [0, 0, 0, 0, 0, 0]
3. [[Int32Array]]: Int32Array(3) [0, 0, 0]
1.
2.
3.
4.
5.
6.
7.
8.
9.
0: 0
1: 0
2: 0
buffer: (...)
byteLength: (...)
byteOffset: (...)
length: (...)
Symbol(Symbol.toStringTag): (...)
__proto__: TypedArray
1. BYTES_PER_ELEMENT: 4
2. buffer: (...)
3. byteLength: (...)
4. byteOffset: (...)
5. constructor: ƒ Int32Array()
6. length: (...)
7. Symbol(Symbol.toStringTag): (...)
8. __proto__: Object
4. [[Uint8Array]]: Uint8Array(12) [0,0,0,0,0,0,0,0,0,0,0,0]
6. __proto__: ArrayBuffer
2. constructor: ƒ ArrayBuffer()
1. arguments: (...)
2. caller: (...)
3. isView: ƒ isView()
4. length: 1
5. name: "ArrayBuffer"
6. prototype: ArrayBuffer {constructor: ƒ, slice: ƒ, Symb
ol(Symbol.toStringTag): "ArrayBuffer"}
7. Symbol(Symbol.species): (...)
8. get Symbol(Symbol.species): ƒ [Symbol.species]()
9. __proto__: ƒ ()
10. [[Scopes]]: Scopes[0]
3. slice: ƒ slice()
- 120/174 -
4. Symbol(Symbol.toStringTag): "ArrayBuffer"
5. get byteLength: ƒ byteLength()
test.html:23
float32
Float32Array(3) [0, 0, 0]
=
new
Float32Array(buffer)
1. Float32Array(3) [0, 0, 0]
1. 0: 0
2. 1: 0
3. 2: 0
4. buffer: (...)
7. length: (...)
9. __proto__: TypedArray
1. BYTES_PER_ELEMENT: 4
2. buffer: (...)
5. constructor: ƒ Float32Array()
6. length: (...)
Exécution Avec FireFox :
buffer = new ArrayBuffer(12) = ArrayBuffer { byteLength: 12 }
test.html:15:5
buffer.toString() = [object ArrayBuffer]
test.html:16:5
Object.getOwnPropertyDescriptors(buffer) = Object { }
test.html:17:5
float32 = new Float32Array(buffer) = Float32Array(3) [0, 0, 0]
- 121/174 -
=
test.html:23:5
float32.byteLength = 12
float32.length = 3
float32.buffer.byteLength= 12
test.html:25:5
test.html:26:5
test.html:27:2
buffer = new ArrayBuffer(12) = ArrayBuffer { byteLength: 12 }
test.html:15:5
ArrayBuffer { byteLength: 12 }
ArrayBuffer
byteLength: 12
byteLength: Getter
Object.getOwnPropertyDescriptors(buffer) = Object { }
test.html:17:5
{}
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
- 122/174 -
float32 = new Float32Array(buffer) = Float32Array(3) [0, 0, 0]
test.html:23:5
Float32Array(3)
0: 0
1: 0
2: 0
byteLength: 12
byteOffset: 0
length: 3
<prototype>: Float32ArrayPrototype { … }
Structure interne d’un « ArrayBuffer » en tapant ce mot à la ligne de
commande de la console du navigateur :
Avec Firefox :
- 123/174 -
Avec Yandex :
- 124/174 -
- 125/174 -
- 126/174 -
LES STRINGS :
Les Strings ne sont structurellement ni plus ni moins qu’une forme spéciale d’Array d’éléments de même nature et même taille (des valeurs entières non-signées représentées sur 16 bits) avec des propriétés et méthodes en plus ou en moins dans leurs constructeurs et leurs prototypes,
par rapport aux Arrays. Les éléments y sont indexés, ordonnés dans le
même ordre que dans la chaîne saisie, et numérotés à partir de l’indice 0
(zéro). Voici ce qu’on obtient à la console.
>> Object.getOwnPropertyDescriptors("Dias")
Object { 0: {…}, 1: {…}, 2: {…}, 3: {…}, length: {…} }
==========
>> Object.getOwnPropertyDescriptors(["D","i","a","s"])
Object { 0: {…}, 1: {…}, 2: {…}, 3: {…}, length: {…} }
====================
>> Object.getOwnPropertyDescriptors("Dias")
{…}
0: Object { value: "D", writable: false, enumerable:
1: Object { value: "i", writable: false, enumerable:
2: Object { value: "a", writable: false, enumerable:
3: Object { value: "s", writable: false, enumerable:
length: Object { value: 4, writable: false,
false, … }
true, … }
true, … }
true, … }
true, … }
enumerable:
propertyIsEnumerable: function propertyIsEnumerable()
- 127/174 -
==========
>> Object.getOwnPropertyDescriptors(["D","i","a","s"])
{…}
0: Object { value: "D", writable: true, enumerable: true, … }
1: Object { value: "i", writable: true, enumerable: true, … }
2: Object { value: "a", writable: true, enumerable: true, … }
3: Object { value: "s", writable: true, enumerable: true, … }
length: Object { value: 4, writable: true, enumerable:
false, … }
propertyIsEnumerable: function propertyIsEnumerable()
Exemple dans un code :
<script type = "text/javascript">
var str = "Un chasseur sachant chasser sans son chien est un
bon chasseur";
console.log("str = ", str);
console.log("str.slice(5,10)", str.slice(5,10));
console.log("str.fill(5,10)", str.fill(5,10));
</script>
- 128/174 -
str = Un chasseur sachant chasser sans son chien est un bon
chasseur
test.html:3:4
str.slice(5,10) asseu
test.html:5:4
str = Un chasseur sachant chasser sans son chien est un bon
chasseur
test.html:6:4
TypeError: str.fill is not a function
test.html:8:34
Les chaînes de caractères en JavaScript sont immuables, c’est-à-dire que
contrairement au langage C, en JavaScript une fois une chaîne créée, elle
ne peut plus être modifiée.
Mais la lecture des parties de la chaîne, la concaténation et le remplacement via une « expression régulière » restent possibles, ce qui en fait ne
modifient pas la partie du texte déjà saisi (sauf avec l’expression régulière).
Mais aussi on peut saisir une nouvelle chaîne dans la même variable (mais
qui naturellement n’aura pas nécessaireent la même taille), mais cela nous
permet une astuce de contourner cette restriction : la modification/mutation d’une chaîne [de caractères] dans JavaScript.
À la console du browser :
- 129/174 -
Dans un code :
<script type = "text/javascript"> "use strict";
let s = "DiaHoluka";
console.log(s);
let a = Array.from(s);
console.log(a);
a[3] = "s"
console.log(a);
s = a.join()
console.log(s);
s = s.replace(/,/g, e => "");
console.log(s);
</script>
- 130/174 -
Si on ne maîtrise pas les « expressions régulières » ou si on ne veut pas
les utiliser, on peut bien sûr mettre ce processus dans une fonction :
<script type = "text/javascript"> "use strict";
// Contrairement aux fonctions traditionnelles,
// une fonction fléchée DOIT être définie
// AVANT sa première utilisation.
const sreplace = (str,pos,substr) => {
const a = Array.from(str);
a[pos]=substr;
return a.join().replace(/,/g, e => "");
}
const s = "DiaHoluka";
console.log(s); // DiaHoluka
console.log(sreplace("DiaHoluka",3,"s"));
// Diasoluka
console.log(sreplace("DiaHoluka",4,"salé"));
// DiaHsaléluka
</script>
Notez que la chaîne initiale reste intacte :
- 131/174 -
La taille ou longueur (length) d'une chaîne de caractères est le nombre
d'éléments 16 bits que la chaîne contient :
L’opérateur « ... » (spread operator) convertit une String en une Array dont
les éléments restent dans l’Arrayt quand le tout est entouré de crochets, et
seulement affichés quand le tout n’est pas entouré de crochets.
console.log(new Date().getFullYear());
console.log(`${new Date().getFullYear()}`);
console.log(...`${new Date().getFullYear()}`);
console.log([...`${new Date().getFullYear()}`]);
for(let i of [...`${new Date().getFullYear()}`])
console.log(i);
</script>
Pour extraire uns sous-chaîne d’une autre chaîne :
- 132/174 -
Pour manipuler/extraire chaque caractère d’une chaîne, on peut utiliser la
boucle « for…of » :
for (let i of 'Année 2018')
console.log(i);
</script>
- 133/174 -
UN MÉLIMÉLO DES MÉTHODES DE STRING :
console.log("Diasoluka".includes("sol"));
console.log("Diasoluka".search("sol"));
console.log("Diasoluka".indexOf("sol"));
console.log("Diasoluka".lastIndexOf("a"));
console.log("Diasoluka".substr(3,3));
console.log("Diasoluka".substring(3,6));
console.log("Diasoluka".endsWith("luka"));
console.log("Diasoluka".endsWith("oluk",8));
console.log("Diasoluka".endsWith("solu",7));
console.log("Diasoluka".startsWith("Diaso"));
console.log("Diasoluka".startsWith("diaso"));
console.log("Diasoluka".startsWith("solu",3));
console.log("Diasoluka".slice(2,5));
console.log("Diasoluka".slice(-5,-1));
console.log("DiaSolUka".toLocaleLowerCase());
console.log(`"
DiaSolUka
// "
DIASOLUKA
"
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
true
3
3
8
sol
sol
true
true
true
true
false
true
aso
oluk
diasoluka
"`.toLocaleUpperCase());
console.log("'"+`${"
// 'DiaSolUka'
DiaSolUka
".trim()}`+"'");
// 'DiaSolUka '
DiaSolUka
".trimLeft()}`+"'");
// 'DiaSolUka '
DiaSolUka
".trimStart()}`+"'");
// ' DiaSolUka'
DiaSolUka
".trimRight()}`+"'");
// ' DiaSolUka'
DiaSolUka
".trimEnd()}`+"'");
console.log("Diasoluka".split("a"));
// (3) ["Di", "soluk", ""]
- 134/174 -
console.log("Diasoluka".replace(/[aeiouy]/g, e => "_"));
// D__s_l_k_
console.log("Diasoluka".replace(/[aeiouy]/g, e => ""));
// Dslk
console.log("Diasoluka".replace(/[aeiouy]/g, e =>
`${Math.round(Math.random()*10)}`));
// D98s4l9k4
console.log("Diasoluka".match("solu"));
// ["solu", index: 3, input: "Diasoluka", groups: undefined]
console.log(`so${Math.pow(2,10)}lu`);
// so1024lu
console.log(`so\nlu`);
// so
// lu
console.log(String.raw`so\nlu`);
// ["solu", index: 3, input: "Diasoluka", groups: undefined]
let n=Number(40);
console.log(typeof n.toString());
// string
console.log(typeof n.toString().valueOf()); // string
console.log(typeof n.toLocaleString());
// string
console.log("Teuf ".repeat(3));
console.log("Teuf".padStart(10,"-"));
console.log("Teuf".padEnd(10,"-"));
//
// Teuf Teuf Teuf
// ------Teuf
// Teuf------
console.log(String("Teuf").padLeft (10,"-"));
// TypeError: String(...).padLeft is not a function
//
console.log("Teuf".padRight (10,"-"));
// TypeError: "Teuf".padRight is not a function
</script>
« TypeCasting » vers une String :
- 135/174 -
Au besoin, la fonction « String(obj) » ou la méthode « obj.toString() »
convertissent la valeur primitive d’un objet en chaîne.
var x = _ => ["A",1,{a:"a"},["y",{2:"deux"}]];
console.log(x().toString());
// A,1,[object Object],y,[object Object]
console.log(String(x()));
// A,1,[object Object],y,[object Object]
</script>
Object . toString ( ) s’applique aux objets suivants :
Object
Behavior
Array
Elements of an Array are converted to strings. The resulting strings are
concatenated, separated by commas.
Boolean
If the Boolean value is true, returns "true". Otherwise, returns "false".
Date
Returns the textual representation of the date.
Error
Returns a string containing the associated error message.
Function
Returns a string of the following form, where functionname is the
name of the function whose toString method was called:
function functionname( ) { [native code] }
Number
Returns the textual representation of the number.
- 136/174 -
Object
Behavior
String
Returns the value of the String object.
Default
Returns "[object objectname]", where objectname is the name of the
object type.
La méthode « .toString » permet aussi de convertir un nombre d’une
base de numération vers une autre.
function CreateRadixTable (){
// Create table heading.
console.log("Hex".padStart(3," ")+
"Dec".padStart(6," ")+"Bin".padStart(9," ")+
"Oct".padStart(6," "))
for (var x = 0; x <= 32; x++) {
var s = "";
// Convert to hexadecimal.
s += (x.toString(16)).padStart(3," ");
// Convert to decimal.
s += (x.toString(10)).padStart(6," ")
// Convert to binary.
// Convert to octal.
console.log(s);
}
}
CreateRadixTable ();
</script>
- 137/174 -
Exécution :
Hex Dec Bin Oct
0 0 0 0
1 1 1 1
2 2 10 2
3 3 11 3
4 4 100 4
5 5 101 5
6 6 110 6
7 7 111 7
8 8 1000 10
9 9 1001 11
a 10 1010 12
b 11 1011 13
c 12 1100 14
d 13 1101 15
e 14 1110 16
f 15 1111 17
10
11
12
13
14
15
16
17
18
19
1a
1b
1c
1d
1e
1f
20
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
10000 20
10001 21
10010 22
10011 23
10100 24
10101 25
10110 26
10111 27
11000 30
11001 31
11010 32
11011 33
11100 34
11101 35
11110 36
11111 37
100000 40
Pour vérifier si une chaîne commence ou se termine par une souis-chaîne
donnée on peut utiliser les méthodes « startsWith() », « endsWith() »,
substr(d , L), substring(d , d+L).
startsWith(), endsWith(), substr(d , L), substring(d , d+L) :
console.log("abcde".startsWith("cd",2)) // true
console.log("abcde".endsWith("de")) // true
console.log("abcdef".substr(2,3)=="cde") // true (d, L)
console.log("abcdefg".substring(2,5)=="cde")
// false (d, d+L) ou (d, F-1)
console.log("«"+"abcdefg".substr("b","d")+"»")
// vide
console.log("«"+"abcdefg".substring("b","d")+"»")
// vide
console.log("«"+"abcdefg".substr("c")+"»") // Tout
console.log("«"+"abcdefg".substring("c")+"»") // Tout
console.log("«"+"abcdefg".substr()+"»") // Tout
- 138/174 -
console.log("«"+"abcdefg".substring()+"»") // Tout
</script>
localeCompare , search :
console.log("ddd".localeCompare("ddd")) // 0
console.log("ddd".localeCompare("ddc")) // 1
console.log("ddd".localeCompare("dde")) // -1
console.log("ddda".localeCompare("ddd")) // 1
console.log("ddd".localeCompare("ddda")) // -1
console.log("ddd".search("ddd")) // 0
console.log("abcabc".search("ca")) // 2
console.log("ddd".search("ddda")) // -1
console.log("abcabcabc".match("bc")) // Array ["bca"]
console.log("abcabc".match("bcd")) // null
</script>
- 139/174 -
Tester si une chaîne est plus « lourde » qu’une deuxième :
var str1 = "ddd";
"use strict";
var str2 = "aaaa"
console.log(str1.localeCompare(str2));
// 1
var str3 = "dd";
// 1
var str4 = "ddd";
// 0
var str5 = "dddd";
console.log(str1.localeCompare(str5)); /* -1 */
</script>
Truc / Astuce pour trier une chaîne de caractères :
- 140/174 -
Allons-y étape par étape :
String() . split() sans arguments :
String() . split() avec argument « espace » :
String() . split() avec argument « chaîne vide » :
- 141/174 -
- 142/174 -
VIII. Coder un texte avec « btoa(chaîne binaire) » et le décoder
avec « atob(chaîne base64String) ». Cette technique permet de
transmettre sans faille (interruption intempestive) un texte qui contient des caractères spéciaux entre ASCII 0 et ASCII 31.
let stg="Ne confondez pas « types de "+
"données (minuscules) » et "+
"« objets standard » (Capitalisés)";
// Encoder le texte
let encodedData = btoa(stg);
console.log(encodedData);
// Décoder le texte
let decodedData = atob(encodedData);
console.log(decodedData);
// Encoder texte contenant caractères spéciaux
encodedData = btoa(escape(stg));
console.log(encodedData);
// Décoder le texte
decodedData = unescape(atob(encodedData));
console.log(decodedData);
</script>
Pour rechercher une sous-chaîne dans une String on peut utiliser la méthode « indexOf » ou « lastIndexOf ».
var ss = "chasseur";
var str =
"Un chasseur sachant chasser sans son chien est un
bon chasseur";
console.log("str.indexOf(ss) =", str.indexOf(ss));
console.log("str.lastIndexOf(ss =)",
str.lastIndexOf(ss));
</script>
str.indexOf(ss) = 3
str.lastIndexOf(ss) = 54
test.html:5:4
test.html:6:4
Vérifier si une chaîne de caractères contient une sous-chaîne donnée :
includes() :
console.log("abcde".includes("cd")) // true
console.log("abcde".includes("cd", 2)) // true
console.log("abcde".includes("CD")) // false
console.log("abcde".includes("cd", 3)) // false
console.log("abcabc".indexOf("ca")) // 2
console.log("abcde".indexOf("de")==3) // true
console.log("abcabc".indexOf("x")) // -1
console.log("abcab".indexOf("de")==3) // false
console.log("a.b.c.d".lastIndexOf(".")) // 5
console.log("abcab".lastIndexOf("ab")==3) // true
console.log("abcabc".lastIndexOf("x")) // -1
console.log("abcab".lastIndexOf("de")==-2) // false
</script>
Mais on peut aussi utiliser une expression régulière (RegExp) pour vérifier
si une chaîne contient une sous-chaîne donnée.
RegExp . match ( ) :
const rgi = /chasseur/gi;
var str =
"Un Chasseur sachant chasser sans son chien "+
"est un bon CHASSEUR mieux qu'un autre chasseur";
console.log(str.match(rgi));
- 144/174 -
const rgCH = /CHASSEUR/g;
var str =
console.log(str.match(rgCH));
const rgc = /chasseur/g;
var str =
console.log(str.match(rgc));
const rgC = /Chasseur/g;
var str =
console.log(str.match(rgC));
const ri = /CHASSEUR/i;
var str =
console.log(str.match(ri));
</script>
RegExp . search ( ) :
var re = /sans son chien/gi;
var str = "Un chasseur sachant chasser sans son chien est un
bon chasseur";
if ( str.search(re) == -1 ) {
console.log("«",str,"»\nne contient pas «", re,"»");
- 145/174 -
}
else {
console.log("«",str,"»\nContient «", re,"»");
}
</script>
Exécution :
« Un chasseur sachant chasser sans son chien est un bon
chasseur »
Contient « /sans son chien/gi »
test.html:10:7
« RegExp » est un objet. Voici la structure de la nôtre en cliquant sur l’objet
« RegExp » de l’affichage ci-dessus dans la fenêtre de la console :
« /sans son chien/gi
global: true
ignoreCase: true
lastIndex: 0
multiline: false
source: "sans son chien"
sticky: false
unicode: false
»
<prototype>: {…}
compile: function compile()
constructor: function RegExp()
"$&": "sans son chien"
"$'": " est un bon chasseur"
"$+": ""
"$1": ""
"$2": ""
"$3": ""
"$4": ""
"$5": ""
"$6": ""
"$7": ""
"$8": ""
"$9": ""
"$_": "Un chasseur sachant chasser sans son chien
est un bon chasseur"
"$`": "Un chasseur sachant chasser "
input: "Un chasseur sachant chasser sans son chien
est un bon chasseur"
lastMatch: "sans son chien"
lastParen: ""
leftContext: "Un chasseur sachant chasser "
length: 2
name: "RegExp"
prototype: Object { … }
rightContext: " est un bon chasseur"
arguments: null
caller: null
length: 0
name: ""
exec: function exec()
flags: Getter
global: Getter
ignoreCase: Getter
multiline: Getter
source: Getter
sticky: Getter
test: function test()
toSource: function toString()
unicode: Getter
Symbol(Symbol.match): function Symbol.match()
Symbol(Symbol.replace): function Symbol.replace()
Symbol(Symbol.search): function Symbol.search()
Symbol(Symbol.split): function Symbol.split()
assign: function assign()
create: function create()
defineProperties:
function defineProperties()
defineProperty: function defineProperty()
freeze: function freeze()
getOwnPropertyDescriptor:
function getOwnPropertyDescriptor()
getOwnPropertyDescriptors:
function getOwnPropertyDescriptors()
getOwnPropertyNames:
function getOwnPropertyNames()
getOwnPropertySymbols:
function getOwnPropertySymbols()
getPrototypeOf: function getPrototypeOf()
is: function is()
isExtensible: function isExtensible()
isFrozen: function isFrozen()
isSealed: function isSealed()
length: 1
name: "Object"
preventExtensions:
function preventExtensions()
prototype: Object { … }
seal: function seal()
setPrototypeOf: function setPrototypeOf()
Voici la structure d’une « RegExp » telle que nous l’obtenons à la console
quand nous tapons ce mot à la ligne de commande. Nous y voyons toutes
les entrées que nous pouvons exploiter d’un « RegExp » :
Une méthode intéressante de « String » est le callback « replace » qui permet de remplacer les caractères dans une chaîne selon un critère spécifié.
function convertirVoyels(s) {
return s.replace(/[aeiouy]/g, function(e) {
return e.toUpperCase();
});
}
- 149/174 -
function convertirConsonnes(s) {
return s.replace(/[âeiouy]/g, function(e) {
});
}
function convertirEnMaj(s) {
return s.replace(/[a-z]/g, function(e) {
});
}
function convertirEnmin(s) {
return s.replace(/[A-Z]/g, function(e) {
return e.toLowerCase();
});
}
console.log(convertirVoyels(
"Lelo ya yo moko, Lobi ya bino
console.log(convertirConsonnes(
"Lelo ya yo moko, Lobi ya bino
console.log(convertirEnMaj(
"lelo ya yo moko, lobi ya bino
console.log(convertirEnmin(
"LELO YA YO MOKO, LOBI YA BINO
</script>
mibale"));
mibale"));
mibale"));
MIBALE"));
Les LITTÉRALES DE CHAÎNE :
Depuis ECMAScript 2015 (= ES6) existent les « littérales de chaîne » ou
- 150/174 -
« template strings » ou « template literals » ou « modèles de libellés » ou
« libellés de chaînes de caractères » ou « gabarits de chaînes de caractères ».
Ce sont des chaînes de caractères (strings) qui s’utilisent comme des
chaînes ordinaires (celles délimitées par des guillemets [doubles] ou des
apostrophes = guillemets simples), mais dans lesquelles on peut utiliser et
mélanger librement des guillemets et apostrophes, manipuler des variables,
paramètres formels, expressions et formules, appeler des fonctions,… bref
tout ce qui retourne une valeur et ce, sans opération de concaténation.
Il ne faut pas confondre les « littérales de chaîne » avec la « chaîne de
format » des langages C)
C’est un peu plus difficile à obtenir que les guillemets et apostrophes, mais
il paraît plus logique et plus intéressant de ne plus utiliser que le « ` »
comme délimiteurs des chaînes de caractères à la place des guillemets ou
apostrophes.
Pour saisir un back-tick ou backquotes (accent grave simple) comme tel
dans une littérale de chaîne, il faut le précéder d’un caractère
d’échappement « \` ».
console.log(`Littéral \`de\` chaîne.`);
console.log(`Littéral "de" chaîne.`);
console.log(`Littéral 'de' chaîne.`);
console.log("Chaîne avec `guillemets`.");
console.log('Chaîne avec àpostrophes`');
console.log("Chaîne avec \"guillemets\".");
console.log('Chaîne avec \'postrophes\'');
</script>
- 151/174 -
Simple littéral de chaîne :
console.log(`Littéral de chaîne.`);
console.log("Chaîne avec guillemets.");
console.log('Chaîne avec apostrophes');
</script>
Littéral de chaîne avec variable :
<body></body>
let v={x:"Ixhe" , y:"Igrec"}
console.log(
Ùne variable dans « ${Object.values(v)}
» une chaîne litérale`);
</script>
- 152/174 -
Pour éviter les mauvais renvois à la ligne il n’est pas nécessaire de
découper les « littérales de chaîne » avec un « backslash ». Le texte
à la sortie est automatiquement découpé en fonction des coupures
dans le code source, et surtout tous les espaces blancs y compris
ceux en début des lignes sont respectés, contrairement à l’HTML qui
ne retient que le premier caractère d’espacement. Pour éviter la pléthore d’espaces blancs au début d’une nouvelle ligne, commencez
cette nouvelle ligne juste à la marge gauche du code source.
console.log(
Ùne très très longue littérale de chaîne
qui doit nécessairement être découpée dans le
code source pour la rendre plus facile à lire sans
faire défiler la page avec l'ascenseur couché.`
)
</script>
Le « backslash » n’est pas un caractère spécial, n’a pas
d’interprétation spéciale et n’introduit pas une séquence
d’échappement
- 153/174 -
console.log(
Ùne autre longue \
littérale de chaîne.`
)
</script>
Configuration interne d’une « littérale de chaîne » :
<body></body>
let v={x:"Ixhe" , y:"Igrec" , z:Number(10)},
lc = `${Object.values(v)}`
// Configuration interne de la littérale de chaîne "lc"
console.log(
Object.getOwnPropertyDescriptors(lc)
);
// Configuration interne de la littérale d'objet "v"
console.log(
Object.getOwnPropertyDescriptors(Object.values(v))
);
</script>
- 154/174 -
Même les nombres sont stockés en tant que alpha et non pas en
tant que numériques. Voyez même ci-dessous, « 10d » n’est pas en
binaire « 1010b ».
Exemple :
Écrire un code qui écrit dans l’élément <body></body> :
C’est l’occasion aussi d’illustrer une « littérale de chaîne ».
La syntaxe d’une « littérale de chaîne » est la suivante :
${nom_variable | nom_paramètre_formel | expression | fonction}.
- 155/174 -
`` : = paire de back-tick (accent grave simple, <ALT-7>-<Barre
d’espacement> ou ASCII 96 ou « ` » ou « 0x60 » ou
« &grave; » ou « CTRL-ALT-7 » avec certains logiciels) introduit la
littérale de chaîne (ou template strings).
$ : introduit une variable dans la littérale de chaîne,
{} : placeholder = espace réservé. Délimitent la chaîne à substituer
(interpolation d’expression) qui peut représenter
I. le nom d’une variable ou d’un paramètre formel.
II. une expression à évaluer.
III. un ou plusieurs appels de fonction.
Les $ et {} ne sont nécessaires que quand on doit saisir une variable,
une expression ou une formule à calculer…
Attention, le back-tick (accent grave simple) est une fonctionnalité
JavaScript non encore reconnue par HTML/DOM.
Remplacement de variables [ou de paramètre formel] :
<body></body>
let f = (nom,matr) =>
`<div style=background:navy;color:red;font-size:16pt>
Notre DIV</div>
Bonjour, Mme/Mlle,M. « ${nom} » Matr: « ${matr} ».`;
document.body.innerHTML =f("Elaka",2018);
</script>
- 156/174 -
Remplacement d’expressions arithmétiques :
const x = 3, y = 5;
console.log(
`(${x} + ${y})² = ${x*x + y*y +2*x*y}`
) // (3 + 5)² = 64
</script>
Appel de fonctions :
const x = 3, y = 5;
console.log(
`Racine carrée de (${x} + ${y})² =`,
`${Math.sqrt(Math.pow(x,2) +
Math.pow(y,2) + 2*x*y)}`
) // Racine carré de (3 + 5)² = 8
</script>
La méthode « String . raw ( ) » :
Affiche le brut du contenu d'un « template string ».
Sans « String . raw ( ) » :
console.log(
Ùn \n caractère \t de contrôle.`
)
- 157/174 -
</script>
Avec « String . raw ( ) » :
console.log(
String.rawÙn \n caractère \t de contrôle.`);
</script>
La littérale de chaîne permet d’avoir une « template » pour le traitement
d’une chaîne utilisée comme argument d’appel d’une fonction. Toute expression ou valeur « x » non contenue dans un formateur « $ { x } » est un
élément de l’array du premier paramètre dans la fonction appelée (cidessous le paramètre « stg ») dans l’ordre dans lequel ils sont rencontrés,
et tout formateur « $ { x } » est un élément de l’array du paramètre du reste
(2è paramètre) dans la fonction appelée. Donc toute chaîne avant le premier « $ { x } » a l’indice 0 dans le premier paramètre de la fonction appelée, donc chaque « $ { x } » incrémente l’indice dans la liste des éléments
de l’aray du premier paramètre dans la fonction appelée, même quand deux
« $ { x } » ne sont pas séparés d’un espace.
function diag(stg, ...argum) {
return stg[0]+argum[0]+stg[1]+argum[1]+stg[2];
}
const stg1 = "voleur";
const stg2 = "volé";
console.log(diagÙn ${stg1} qui s'est fait ${stg2}
- 158/174 -
pleure`);
</script>
<script type="text/javascript"> ùse strict`;
const laDate = (txt, ...rParam) => {
let data = '';
console.log("txt ",txt)
console.log("rParam =",rParam)
alert(txt + "\n" + rParam)
txt.forEach((e, i) => {
if(rParam[i]) data += e + rParam[i];
});
return data;
}
const j = 27;
const m = "novembre";
const a = 2018;
const ts = `Jour = ${j} / Mois = ${m} / Année = ${a}`;
console.log(laDate`${ts}`);
</script>
À l’exécution :
- 159/174 -
Notez ceci :
La fonction [fléchée] n’est pas appelée avec la liste d’arguments dans une
paire de « parenthèses », mais avec une « littérale de chaîne » qui sert de
« template ».
Voyons comment cette template est configurée et reçue par la fonction
appelée « laDate » :
Le premier paramètre (celui de gauche = « txt ») reçoit les parties de la
template dans une Array. Les parties constituantes de cette Array sont
délimitées dans la « littérale de chaîne » par les « place holders » ( $ { } )
dont les contenus sont constitués des variables « j », « m » et « a » définies
au-dessus de l’appel de la fonction. Les 4 éléments de l’Array de notre
template sont donc comme indiquée dans le message pop-up et l’affichage
dans la console :
« 0 : Jour = »,
« 1 : / Mois = » et
« 2 : / Année = » et
« Une chaîne vide » qui représentant le reste vide de la littérale de chaîne.
Quant au paramètre du reste qui dès le départ est par nature lui aussi une
Array, il reçoit ici toutes les 3 variables de la littérale de chaîne envoyée à
la fonction appelée :
« 27 »,
« novembre » et
« 2018 ».
Quant à la méthode « String . forEach » elle a été appelée avec deux paDifférents types d’Arrays
- 160/174 -
ramètres, le « e » et le « i » qui sont aussi des « placeholders » :
Le paramètre « e » pour chacun des éléments de l’Array-paramètre ITÉRABLE « txt » (puisque c’est lui « txt » qui figure en préfixe de « . forEach ».
Le paramètre factice « i » qui nous servira de compteur qui parcourra automatiquement et à partir de l’indice zéro tous les éléments des deux paramètres-Arrays, comme on peut le voir ci-dessous :
let arr = [47, 95, 19];
'use strict';
arr.forEach((x, y) => {
console.log(x,y);
}
);
</script>
La fonction fléchée anonyme est un callBack qui sera donc automatiquement appelée pour chacun des éléments de l’Array « i » (qui est égale à
« txt »), dans leur ordre d’apparition.
Tant qu’il y a encore un élément dans l’array « rParam » (c’est-à-dire Tant
que l’élément « rParam[i] » ne sera pas null ou undefined ou en simple
tant que « rParam [ i ] » s’assimilera à « true », la chaîne de caractère « data » sera ici concaténée par une autre concaténation celle de l’élément
correspondant « txt [ i ] » représentée schématiquement par la variable
factice « e », avec l’élément « rParam [ i ] ». L’ensemble de la chaîne « data »
sera retournée par la fonction « laDate ».
Attention ne confondez pas ici « date » avec « e » et « data » avec « a »
sans lien spécifique entre les deux.
- 161/174 -
Ce qu’il faut retenir ici c’est que :
1.
Les templates littérales de chaîne sont envoyées en paramètres
dans des back-ticks ou backquotes (accents graves simples) à la place des
parenthèses,
2.
Les variables sont enfermées dans des « $ { } »,
3.
Les variables sont reçues par le paramètre du reste qui est une
Array,
4.
Les textes de la template sont reçus par le premier paramètre (celui
de gauche) sous forme aussi d’Array.
Une application pratique du template de littérale de chaîne :
<script> "use strict"; const cl=console.log;
const d=new Date();
let prepend = (p1,p2) => {
const len=p1.length+p2.length;
return p2.padStart(len,p1[0]);
};
let postpend = (p1,...p2) => {
const len=p1[1].length+p2[0].length;
return p2[0].padEnd(len,p1[1]);
};
let pend = (p1,...p2) => {
const len1=p2[0].length+p2[1].length,
len2=len1+p1[2].length;
return p2[1].padStart(len1,p2[0]).padEnd(len2,p1[2]);
};
const w="www.diasoluka.luy";
const re=prepend`http://${w}`;
- 162/174 -
cl(re);
const p="http://";
const ro=postpend`${p}www.diasoluka.luy`;
cl(ro);
const h="http://",u="www.diasoluka";
const rp=pend`${h}${u}.luy`;
cl(rp);
cl(`Durée = ${(new Date()-d)/1000} secs.`);
</script>
Une façon classique de le faire :
const d=new Date();
return p1.padStart(len,p2);
};
let postpend = (p1,p2) => {
return p1.padEnd(len,p2);
};
let pend = (p1,p2,p3) => {
const len1=p1.length+p2.length,
len2=len1+p3.length;
return p1.padStart(len1,p2).padEnd(len2,p3);
};
- 163/174 -
const re=prepend("/www.diasoluka.luy",`http:/`);
cl(re);
const ro=postpend(`http://`,`www.diasoluka.luy`);
cl(ro);
const rp=pend('www.diasoluka',"http://",`.luy`);
cl(rp);
</script>
De façon plus conventionnelle encore :
const d=new Date();
return p2+p1;
};
let postpend = (p1,p2) => {
return p1.concat(p2);
};
let pend = (p1,p2,p3) => {
return (p2+p1).concat(p3);
};
const re=prepend("/www.diasoluka.luy",`http:/`);
cl(re);
const ro=postpend(`http://`,`www.diasoluka.luy`);
cl(ro);
- 164/174 -
const rp=pend('www.diasoluka',"http://",`.luy`);
cl(rp);
</script>
- 165/174 -
L’OBJECT :
En fait qu’est ce qui est l’autre ? Est-ce l’objet qui est une Array, ou une
Array qui est un objet ? L’Array est un objet certes, mais la structure interne de l’objet est celle d’une Array.
let a = [];
let o = new Object();
a[0]="Dummy",a[1]="Fail",a[2]="Tercio";
o[0]="Dummy",o[1]="Fail",o[2]="Tercio";
console.log(a,o);
</script>
Ce sont leurs propriétés propres, prototypes [et ceux de leurs constructeurs] ainsi que leurs modes d’accès, de gestion qui les différencient. Mais
les deux sont construits selon les mêmes bases, la même structure interne,
comme du reste tous les autres objets (y compris les fonctions) en JavaScript.
Par exemple, l’Array diffère de l’objet entre autres par le fait qu’elle comporte une propriété « length ».
let a = [];
- 166/174 -
console.log(Object.getOwnPropertyDescriptors(a));
console.log(Object.getOwnPropertyDescriptors(o));
</script>
Notez ci-dessus que les labels dans l’objet ont été baptisés automatiquement et en numérique ordonné, comme dans une simple Array, et que
l’Array aussi a dans sa représentation interne des labels [numériques] ordonnés.
Voyez ceci :
let a = [];
- 167/174 -
console.log(Object.entries(a));
console.log(Object.entries(o));
</script>
Ci-dessus, la méthode « Object . entries » retourne le nombre d’éléments
contenus dans l’Array et l’objet, et ils valent tous 3.
Conversion facile d’un « object » en « Array » :
Avec « Array . flatMap ( ) » :
console.log(
[{a:97, b:"bimbo", c:[83, 92]}]
.flatMap(it => [it.a, it.b, it.c])
);
console.log(
[{a:97, b:"bimbo", c:[83, 92]}]
.flatMap(it =>
[it.c, Math.pow(it.a,2), (it.b).concat("***")]
- 168/174 -
)
);
</script>
Avec « Array . map ( ) » :
console.log(
[{a:97, b:"bimbo", c:[83, 92]}]
.map(it => [it.a, it.b, it.c])
);
console.log(
[{a:97, b:"bimbo", c:[83, 92]}]
.map(it =>
[it.c, Math.pow(it.a,2), (it.b).concat("***")]
)
);
</script>
console.log(
Array.from(
Object.values({a:17, b:5, c:95.3, d: 475})
)
);
</script>
- 170/174 -
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 :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation
- 171/174 -
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
• https://www.scribd.com/document/373847209/PropertyDescriptors
• https://www.scribd.com/document/373833282/l-ObjetDifférents types d’Arrays
- 172/174 -
Global-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
ces-Heresies-et-Heterodoxies-de-la-Notion-deLaboratoire
• https://www.scribd.com/document/315745725/RapportDifférents types d’Arrays
- 173/174 -
Entre-Oxymetrie-Et-Type-Respiration
- 174/174 -

différents types d'array

Transcription

Documents pareils

Tea House - ShowTime

Console - Bidon recyclé et Teck

la console vsmile - MetaGames-EU

Plan Villa CHARTREUX

Rapide utilisation de visualroute

Tutoriel Javascript - Simplon Boulogne sur Mer

Fiche atelier - flash xbox 360

Pourquoi faut-il des callback en Javascript ?

Console portable Ressemble à une tablette - 1001 jeux vidéo

Communiqué de presse StarQuery Suite 4.4: Une solution