javascript tome xv - Arrays en JavaScript

Transcription

LES ARRAYS ( T a b l e a u x )
Po u r D é b u t a n t e n
J AVA S C R I P T (Programmation Internet) V O L . V
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
Array est l’objet global (constructeur) utilisé pour créer des
tableaux (objets de haut-niveau, en termes de complexité
homme-machine, semblables à des listes).
Syntaxes :
[el0, el1, ..., elN]
new Array(el0, el1[, ...[, elN]])
new Array(arrayLength) //0 à 232-1
Array . of ( )
Array . from ( )
<script type="text/javascript"> "use strict";
let r;
r = Array.of(1);
console.log(typeof r);
r[2]=28;
console.log(r);
// =>
[1]
r = Array.of(10);
r[2]=29;
console.log(r);
// =>
[10]
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
r = Array.of(78, 90, 25, 33, 56, 36, 39, 96, 93, 35);
r[11]=30;
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});
r[8]=31;
console.log(r);
// => (10) [78, 90, 25, 33, 56, 36, 39, 96, 93, 35]
</script>
Firefox Quantum 64.0b13 :
Yandex Version 18.11.1.385 beta :
ARRAYS en JavaScript
2 / 83
jeudi, 4. avril 2019
JavaScript Tome-V
Dans le code qui suit, tous les éléments de deux Arrays [identiques] sont automatiquement parcourus dans chacune des
deux, du premier au dernier et comparés l’un avec les autres
de l’autre Array.
Un peu de comparaison matricielle !
[1,2].forEach(x => [1,2].forEach(y =>
console.log(`x (${x}) == y (${y}) ? ${x==y}`)))
3 / 83
JavaScript Tome-V
La comparaison directe de deux Arrays ne suit pas la procédure habituelle.
« Array1 == Array2 » ou « Array1 === Array2 » comparent
les adresses-mémoire et non les contenus :
let a1 = Array.from(new Set([1,2,3]));
let a2 = Array.from(new Set([1,2,3]));
console.log(a1==a1);
// true
// La même référence (adresse-mémoire)
console.log(a1===a1);
// true
// La même référence (adresse-mémoire)
console.log(a1==a2); // false
// Références (adresses-mémoire) différentes.
console.log(a1===a2); // false
// Références (adresses-mémoire) différentes.
</script>
D’ordinaire, on accède aux éléments d’une Array par indexation en comptant à partir de zéro. Pour une Array de 5 éléments l’indexation va de 0 à 4 (taille de l’Array [5] – 1) :
<script type="text/javascript">
let ar = [34, 20, 90, 41, 74];
4 / 83
JavaScript Tome-V
console.log(ar[0], ar[3], ar[5]);
</script>
Comme vous l’avez vu, JavaScript n’interdit pas d’accéder
(lire ou écrire) un élément qui en dehors de sa taille, et écrire
sur un élément hors borne élargit automatiquement la taille de
l’Array en conformément.
let ar = [34, 20, 90, 41, 74];
// 34 41 undefined
console.log(ar.length);
ar[10] = "Disu";
console.log(ar.length);
// 5
// 11
// 34 41 Disu
</script>
« self » (« window ») permet dans le code qui suit, de créer
une Array d’indices et de « noms de variables » à partir des
valeurs littérales des éléments d’Array qui doivent être des
chaînes de caractères alphabétiques et jamais numériques, et
chacun de ces nouveaux « noms de variables » prend la valeur de l’indice de cette chaîne dans l’Array. Tout cela est par
la suite ajouté aux propriétés de « window » :
let ar, t;
for (let i of (ar =
["lola", "alamuki", "mbote", "etuci", "daba"])
) {
self[i] = ar.indexOf(i);
self[i+"_10"] = i;
5 / 83
JavaScript Tome-V
}
console.log(daba, mbote, etuci, alamuki, lola);
console.log(self);
var array2 =
["etuci", "alamuki", "daba", "lola", "mbote"]
t="";
for(let i of array2)
t+= array2[self[i]] + "=" + self[i] + " | "
console.log(t)
t="";
for(let i of array2)
t+= ar[self[i]] + "=" + self[i] + " | "
console.log(t)
</script>
6 / 83
JavaScript Tome-V
Quelques manipulations d’éléments d’Array:
console.dir(a = new Array(3));
// Tableau à 3 éléments non définis.
console.dir(a[1]); // undefined
console.dir(a = new Array(1,2,3));
// Tableau à trois éléments : 1, 2 et 3
console.dir(a[1]); // 2
console.dir(a = [1,2,3]);
// Tableau à trois éléments : 1, 2 et 3
console.dir(a[1]); // 2
</script>
let a;
console.dir(a = new Array(74, 53, 81));
// Tableau à trois éléments initialisés :
// Array(3) [ 74, 53, 81 ]
console.dir(a[1]);
// 53
console.dir(a = [74, 53, 81]);
// Tableau à trois éléments initialisés :
// Array(3) [ 1, 2, 3 ]
console.dir(a[1]);
// 53
7 / 83
JavaScript Tome-V
// Tableau à 3 éléments non définis.
// Array(3) [ <3 empty slots> ]
console.dir(a[1]);
// undefined
// Tableau à 0 élément (vide).
// Array []
console.dir(a = new Array());
// Tableau à 0 élément (vide).
// Array []
console.dir(a = new Array([
[62, 38, 52] , 47 , [43, 78],
`string` , {un:1 , 2:"deux"}
]));
// Tableau unidimensionneml à 5 éléments dont le pre-mier
// élément est une Array à 3 éléments initialisés,
// le deuxième élément est le scalaire 47,
// le 3è élément est une Array à 2 éléments initia-lisés.
// le quatrième élément est une chaîne de caractères
// contenant 6 caractères.
// le cinquième élément est un « littral d'objet (hash) »
// initialisé à 2 éléments ayant chacun 1 paire «
clé:valeur».
// Array [ (5) […] ]
console.dir(a[0]);
"string", {…} ]
console.dir(a[1]);
// Array(5) [ (3) […], 47, (2) […],
// undefined
console.dir(a[0][0]);
//
//
//
//
Array(3) [ 62, 38, 52 ]
47
Array [ 43, 78 ]
string
8 / 83
JavaScript Tome-V
// Object { 2: "deux", un: 1 }
// console.dir(a[1][0]);
// TypeError: a[1] is undefined;
// can't access element at index 0
console.dir(a = new Array(
[[62, 38] , 47] ,
[àbc` , {un:1 , 2:"deux"}],
[{jour:11 , 1953:"année"}]
));
// Tableau bidimensionneml à 3 éléments dans la deu-xième
// dimension et dont le premier [dans la deuxième dimension]
// est une Array [dans la première dimension] et contenant
// une array à 2 éléments initialisés et dont le pre-mier
// esg aussi une array et le deuxième un scalaire,
// le deuxième élément [de la deuxième dimension] est aussi
// une array iniialisée contenant un string et un objet
hash,
// le troisième élément [de la deuxième dimension] est
// aussi une Array dans la première dimension ne contenant
// qu'un seul élément (hash object).
//
// Mais c'est préférable qu'une array bidimensionnelle
// soit bien structurée dans le sens que les
// éléments d'un même indexage soient de même nature.
//
// Array(3) [ (2) […], (2) […], (1) […] ]
console.dir(a[0]);
console.dir(a[1]);
// Array [ (2) […], 47 ]
// Array [ "abc", {…} ]
// Array [ 62, 38 ]
// 47
// undefined
9 / 83
JavaScript Tome-V
// abc
// Object { 2: "deux", un: 1 }
// undefined
}
// Object { 1953: "année", jour: 11
// undefined
// undefined
console.dir(a = new Array(
[[62, 38] , [47, "chaîne1"]] ,
[[àbc`] , [{un:1 , 2:"deux"}, 82]],
[[{jour:11 , 1953:"année"}],
[
[83, 30],[22, 62, [44, 28, 99]]
]
]
));
// Tableau tridimensionneml à 3 éléments dans la troisième
// dimension a[0], a[1], a[2].
//
// Mais c'est préférable qu'une array multidimension-nelle
// soit bien structurée dans le sens que les
// éléments d'un même indexage soient de même nature.
//
// Array(3) [ (2) […], (2) […], (1) […] ]
console.dir(a[0]);
// Array [ (2) […], (2) […] ]
// Array [ 62, 38 ]
// Array [ 47, "chaîne1" ]
console.dir(a[0][0][0]);
//
//
//
//
62
38
47
chaîne1
10 / 83
console.dir(a[0][0][0][0]);
console.dir(a[1]);
// Array [ (1) […], (2) […] ]
// Array [ "abc" ]
// Array [ {…}, 82 ]
console.dir(a[2]);
JavaScript Tome-V
// undefined
//
//
//
//
abc
undefined
Object { 2: "deux", un: 1 }
82
// Array [ (1) […], (2) […] ]
// Array [ {…} ]
// Array [ (2) […], (3) […] ]
// undefined
11 }
// Object { 1953: "année", jour:
//
//
//
//
undefined
Array [ 83, 30 ]
Array(3) [ 22, 62, (3) […] ]
undefined
//
//
//
//
//
console.dir(a[2][1][1][2][0]);
console.dir(a[2][1][1][2][1]);
console.dir(a[2][1][1][2][2]);
console.dir(a[3]);
83
30
22
62
Array(3) [ 44, 28, 99 ]
// 44
// 28
// 99
// undefined
console.dir(a = [[10,20,30]]);
// Tableau bidimensionnel
11 / 83
//
JavaScript Tome-V
Array [ (3) […] ]
console.dir(a[0]); //
Array(3) [ 10, 20, 30 ]
// 10
// 20
// 30
console.dir(a = [...[10,20,30]]);
// Tableau unidimensionnel
// Array(3) [ 10, 20, 30 ]
console.dir(a[0]);
console.dir(a[1]);
console.dir(a[2]);
// 10
// 20
// 30
// undefined
console.dir(a = [80, 92,...[10,...[20,30]]]);
// Array(5) [ 80, 92, 10, 20, 30 ]
console.dir(a[0]);
console.dir(a[1]);
console.dir(a[2]);
console.dir(a[3]);
console.dir(a[4]);
//
//
//
//
//
80
92
10
20
30
// undefined
let ar = [10,...[20,30]];
console.dir(a = [80, 92,...ar]);
// « ar » est la suite d'une array.
// Array(5) [ 80, 92, 10, 20, 30 ]
console.dir(a[0]);
console.dir(a[1]);
console.dir(a[2]);
console.dir(a[3]);
console.dir(a[4]);
//
//
//
//
//
80
92
10
20
30
let arr = [10,...[20,30]];
console.dir(a = [80, 92, arr]);
// Tableau bidimensionnel,
12 / 83
JavaScript Tome-V
// « arr » est une array dans une array.
// Array(3) [ 80, 92, (3) […] ]
80
92
Array(3) [ 10, 20, 30 ]
undefined
undefined
// 10
// 20
// 30
let arra = [10, [20,30]];
console.dir(a = [80, 92, arra]);
// Tableau tridimensionnel,
// [20,30]est une array dans « arr » qui est
// aussi une array dans une array.
// Array(3) [ 80, 92, (2) […] ]
80
92
Array [ 10, (2) […] ]
undefined
undefined
// 10
// Array [ 20, 30 ]
// undefined
console.log([...10]); // TypeError: 10 is not iterable
</script>
13 / 83
JavaScript Tome-V
14 / 83
JavaScript Tome-V
Le Destructuring (destructuration) : On copie les valeurs
des éléments de l’Array de droite sur les éléments de l’Array
de gauche. Les éléments éventuellement en surplus dans
l’Array de droite ne sont pas injectés dans l’Array de gauche.
var [red, green, blue] =
[0xFF0000, 0x00FF00];
console.log([red, green, blue]);
console.dir(Object.entries([red, green, blue]));
[0xFF0000, 0x00FF00, 0x0000FF];
[0xFF0000, 0x00FF00, 0x0000FF, 0x000];
</script>
15 / 83
JavaScript Tome-V
Destructuration d’une Array avec « . map ( ) » :
var prémisse = ["zero", "un", "deux", "trois"];
// Array source.
var [zero, un, deux] = prémisse.map((v) => v);
// Destructuration.
console.log(zero, un, deux);
console.log('window[prémisse[0]]:',
window[prémisse[0]]);
console.log('window[zero]:',
window[prémisse[zero]]);
console.log('window[deux]:',
window[prémisse[deux]]);
console.log('window[un]:',
window[prémisse[un]]);
16 / 83
JavaScript Tome-V
console.log("=".repeat(10));
var [zero, un, deux] =
prémisse.map((undefined, v) => v);
// Destructuration.
console.log('window[0]:',
prémisse.map((k, undefined, v) => v);
// Destructuration.
17 / 83
JavaScript Tome-V
prémisse.map((k, c, undefined, v) => v);
// Destructuration.
console.log(prémisse);
</script>
18 / 83
JavaScript Tome-V
Le Remplissage automatique d’une Array : On peut le faire
facilement avec un générateur. Dès que toute l’Array a été
parcourue, le générateur s’arrête automatiquement :
19 / 83
JavaScript Tome-V
function* fGenerator() {
let i = 10;
while (true) yield i++;
};
let [ngai, ye, mosusu] = fGenerator();
console.log(ngai, ye, mosusu); // 10 11 12
let [a, b, c, d, e, f] = fGenerator();
console.log(a, b, c, d, e, f);
//
10 11 12 13 14 15
</script>
Notez que chaque Array pour laquelle la fonction génératrice est appelée [re]démarre sa série propre.
20 / 83
JavaScript Tome-V
Propriétés de l’objet Array et de Array.prototype :
Avec
console.log(Array)
</script>
Ou pour le prototype de « Array » :
console.log ( Array.prototype )
</script>
Ou pour les noms des Descripteurs de « Array » :
console.log(Object.getOwnPropertyNames(Array))
</script>
Ou pour les noms des Descripteurs du prototype de « Array » :
console.log(Object.getOwnPropertyNames(Array.prototype))
</script>
Ou pour les Descripteurs de « Array » :
console.log(Object. getOwnPropertyDescriptors(Array))
</script>
Ou pour le prototype :
Object. getOwnPropertyDescriptors (Array .prototype)
</script>
21 / 83
JavaScript Tome-V
Illustrations :
Avec Firefox Quantum 62.0.2 :
console.log(Object.getOwnPropertyNames(Array))
</script>
// Array(6) [ "isArray", "concat", "lastIndexOf", "indexOf", "forEach", "map", "filter", "every", "some", "reduce", … ]
// […]
// 0: "isArray"
// 1: "concat"
// 2: "lastIndexOf"
// 3: "indexOf"
// 4: "forEach"
// 5: "map"
// 6: "filter"
// 7: "every"
// 8: "some"
// 9: "reduce"
// 10: "reduceRight"
// 11: "join"
// 12: "reverse"
// 13: "sort"
// 14: "push"
// 15: "pop"
// 16: "shift"
// 17: "unshift"
// 18: "splice"
// 19: "slice"
// 20: "from"
// 21: "of"
// 22: "prototype"
// 23: "length"
// 24: "name"
// length: 25
console.log(Object.getOwnPropertyNames(Array.prototype))
22 / 83
JavaScript Tome-V
// Array(30) [ "length", "toSource", "toString", "toLocaleString", "join", "reverse", "sort", "push", "pop",
"shift", … ]
// […]
// 0: "length"
// 1: "toSource"
// 2: "toString"
// 3: "toLocaleString"
// 4: "join"
// 5: "reverse"
// 6: "sort"
// 7: "push"
// 8: "pop"
// 9: "shift"
// 10: "unshift"
// 11: "splice"
// 12: "concat"
// 13: "slice"
// 14: "lastIndexOf"
// 15: "indexOf"
// 16: "forEach"
// 17: "map"
// 18: "filter"
// 19: "reduce"
// 20: "reduceRight"
// 21: "some"
// 22: "every"
// 23: "find"
// 24: "findIndex"
// 25: "copyWithin"
// 26: "fill"
// 27: "entries"
// 28: "keys"
// 29: "includes"
// 30: "constructor"
// length: 31
// Object { isArray: {…}, concat: {…}, lastIndexOf: {…},
indexOf: {…}, forEach: {…}, map: {…}, filter: {…}, every: {…}, some: {…}, reduce: {…}, … }
23 / 83
JavaScript Tome-V
// {…}
// concat: Object { writable: true, enumerable: false,
configurable: true, … }
// every: Object { writable: true, enumerable: false,
// filter: Object { writable: true, enumerable: false,
// forEach: Object { writable: true, enumerable: false,
// from: Object { writable: true, enumerable: false,
// indexOf: Object { writable: true, enumerable: false,
// isArray: Object { writable: true, enumerable: false,
// join: Object { writable: true, enumerable: false,
// lastIndexOf: Object { writable: true, enumerable:
false, configurable: true, … }
// length: Object { value: 1, writable: false, enumerable: false, … }
// map: Object { writable: true, enumerable: false, configurable: true, … }
// name: Object { value: "Array", writable: false, enumerable: false, … }
// of: Object { writable: true, enumerable: false, configurable: true, … }
// pop: Object { writable: true, enumerable: false, configurable: true, … }
// prototype: Object { writable: false, enumerable:
false, configurable: false, … }
// push: Object { writable: true, enumerable: false,
// reduce: Object { writable: true, enumerable: false,
// reduceRight: Object { writable: true, enumerable:
false, configurable: true, … }
// reverse: Object { writable: true, enumerable: false,
// shift: Object { writable: true, enumerable: false,
24 / 83
JavaScript Tome-V
// slice: Object { writable: true, enumerable: false,
// some: Object { writable: true, enumerable: false,
// sort: Object { writable: true, enumerable: false,
// splice: Object { writable: true, enumerable: false,
// unshift: Object { writable: true, enumerable: false,
// Symbol(Symbol.species): Object { get: Symbol.species(), enumerable: false, configurable:
true, … }
console.log(Object.getOwnPropertyDescriptors (Array .prototype))
// Object { length: {…}, toSource: {…}, toString: {…},
toLocaleString: {…}, join: {…}, reverse: {…}, sort:
{…}, push: {…}, pop: {…}, shift: {…}, … }
// {…}
Object { isArray: {…}, concat: {…}, lastIndexOf: {…}, indexOf: {…}, forEach: {…}, map: {…}, filter: {…}, every:
{…}, some: {…}, reduce: {…}, … }
{…}
concat: Object { writable: true, enumerable: false, configurable: true, … }
every: Object { writable: true, enumerable: false, configurable: true, … }
filter: Object { writable: true, enumerable: false, configurable: true, … }
forEach: Object { writable: true, enumerable: false, configurable: true, … }
25 / 83
JavaScript Tome-V
from: Object { writable: true, enumerable: false, configurable: true, … }
indexOf: Object { writable: true, enumerable: false, configurable: true, … }
isArray: Object { writable: true, enumerable: false, configurable: true, … }
join: Object { writable: true, enumerable: false, configurable: true, … }
lastIndexOf: Object { writable: true, enumerable: false,
length: Object { value: 1, writable: false, enumerable:
false, … }
map: Object { writable: true, enumerable: false, configurable: true, … }
name: Object { value: "Array", writable: false, enumerable: false, … }
of: Object { writable: true, enumerable: false, configurable: true, … }
pop: Object { writable: true, enumerable: false, configurable: true, … }
prototype: Object { writable: false, enumerable: false,
configurable: false, … }
push: Object { writable: true, enumerable: false, configurable: true, … }
reduce: Object { writable: true, enumerable: false, configurable: true, … }
reduceRight: Object { writable: true, enumerable: false,
26 / 83
JavaScript Tome-V
reverse: Object { writable: true, enumerable: false, configurable: true, … }
shift: Object { writable: true, enumerable: false, configurable: true, … }
slice: Object { writable: true, enumerable: false, configurable: true, … }
some: Object { writable: true, enumerable: false, configurable: true, … }
sort: Object { writable: true, enumerable: false, configurable: true, … }
splice: Object { writable: true, enumerable: false, configurable: true, … }
unshift: Object { writable: true, enumerable: false, configurable: true, … }
Symbol(Symbol.species): Object { get: Symbol.species(),
enumerable: false, configurable: true, … }
<prototype>: {…}
__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()
console.log(Array)
// function Array()
// Array()
// concat: function concat()
27 / 83
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
JavaScript Tome-V
every: function every()
filter: function filter()
forEach: function forEach()
from: function from()
indexOf: function indexOf()
isArray: function isArray()
join: function join()
lastIndexOf: function lastIndexOf()
length: 1
map: function map()
name: "Array"
of: function of()
pop: function pop()
prototype: Array []
push: function push()
reduce: function reduce()
reduceRight: function reduceRight()
reverse: function reverse()
shift: function shift()
slice: function slice()
some: function some()
sort: function sort()
splice: function splice()
unshift: function unshift()
Symbol(Symbol.species): undefined
console.log(Array.prototype)
// Array []
// []
// concat: function concat()
// constructor: function Array()
// copyWithin: function copyWithin()
// entries: function entries()
// every: function every()
// fill: function fill()
// filter: function filter()
// find: function find()
// findIndex: function findIndex()
// forEach: function forEach()
// includes: function includes()
// indexOf: function indexOf()
// join: function join()
28 / 83
JavaScript Tome-V
// keys: function keys()
// lastIndexOf: function lastIndexOf()
// length: 0
// map: function map()
// pop: function pop()
// push: function push()
// reduce: function reduce()
// reduceRight: function reduceRight()
// reverse: function reverse()
// shift: function shift()
// slice: function slice()
// some: function some()
// sort: function sort()
// splice: function splice()
// toLocaleString: function toLocaleString()
// toSource: function toSource()
// toString: function toString()
// unshift: function unshift()
// Symbol(Symbol.iterator): undefined
// Symbol(Symbol.unscopables): undefined
</script>
Avec Yandex Version 18.11.1.385 beta :
1. {length: {…}, name: {…}, prototype: {…}, isArray: {…}, from: {…}, …}
1. from: {value: ƒ, writable: true, enumerable: false, configurabl
e: true}
2. isArray: {value: ƒ, writable: true, enumerable: false, configurable
: true}
3. length: {value: 1, writable: false, enumerable: false, configur
able: true}
4. name: {value: "Array", writable: false, enumerable: false, conf
igurable: true}
5. of: {value: ƒ, writable: true, enumerable: false, configurable:
true}
6. prototype: {value: Array(0), writable: false, enumerable: false, con
figurable: false}
29 / 83
JavaScript Tome-V
7. Symbol(Symbol.species): {get: ƒ, set: undefined, enumerable: false
, configurable: true}
8. __proto__: Object
Prototype :
1. prototype:
1. configurable: false
2. enumerable: false
3. value: Array(0)
1. concat: ƒ concat()
2. constructor: ƒ Array()
3. copyWithin: ƒ copyWithin()
4. entries: ƒ entries()
5. every: ƒ every()
6. fill: ƒ fill()
7. filter: ƒ filter()
8. find: ƒ find()
9. findIndex: ƒ findIndex()
10. flat: ƒ flat()
11. flatMap: ƒ flatMap()
12. forEach: ƒ forEach()
13. includes: ƒ includes()
14. indexOf: ƒ indexOf()
15. join: ƒ join()
16. keys: ƒ keys()
17. lastIndexOf: ƒ lastIndexOf()
18. length: 0
19. map: ƒ map()
20. pop: ƒ pop()
21. push: ƒ push()
22. reduce: ƒ reduce()
23. reduceRight: ƒ reduceRight()
24. reverse: ƒ reverse()
25. shift: ƒ shift()
26. slice: ƒ slice()
27. some: ƒ some()
28. sort: ƒ sort()
29. splice: ƒ splice()
30. toLocaleString: ƒ toLocaleString()
31. toString: ƒ toString()
32. unshift: ƒ unshift()
33. values: ƒ values()
34. Symbol(Symbol.iterator): ƒ values()
30 / 83
JavaScript Tome-V
35. Symbol(Symbol.unscopables): {copyWithin: true, entri
es: true, fill: true, find: true, findIndex: true
, …}
4. writable: false
Prototype du constructeur :
1. __proto__:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
Constructeur du prototype du constructeur :
1. __proto__:
1. constructor: ƒ Object()
1. arguments: (...)
2. assign: ƒ assign()
3. caller: (...)
4. create: ƒ create()
5. defineProperties: ƒ defineProperties()
6. defineProperty: ƒ defineProperty()
7. entries: ƒ entries()
8. freeze: ƒ freeze()
9. getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor()
10. getOwnPropertyDescriptors: ƒ getOwnPropertyDescriptors()
31 / 83
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
JavaScript Tome-V
getOwnPropertyNames: ƒ getOwnPropertyNames()
getOwnPropertySymbols: ƒ getOwnPropertySymbols()
getPrototypeOf: ƒ getPrototypeOf()
is: ƒ is()
isExtensible: ƒ isExtensible()
isFrozen: ƒ isFrozen()
isSealed: ƒ isSealed()
keys: ƒ keys()
length: 1
name: "Object"
preventExtensions: ƒ preventExtensions()
prototype: {constructor: ƒ, __defineGetter__: ƒ, __def
ineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ,
…}
seal: ƒ seal()
setPrototypeOf: ƒ setPrototypeOf()
values: ƒ values()
__proto__: ƒ ()
[[Scopes]]: Scopes[0]
32 / 83
JavaScript Tome-V
Quelques méthodes de l’objet « Array » :
Array . fnd ( ) :
let t="";
let isSquare = (val) => {
t += val + " | ";
console.log(t);
return !(Math.sqrt(val) % 1);
};
console.log(
[30, 52, 47, 16, 30, 50, 39, 26, 79, 49]
.find(isSquare));
console.log{t);
</script>
let t="";
t += val + " | ";
console.log(t);
return !(Math.sqrt(val) % 1);
};
console.log(
[76, 59, 19, 14, 60, 73, 46, 39, 80, 61]
.find(isSquare));
console.log(t);
</script>
33 / 83
JavaScript Tome-V
Array . fndIndex ( ) :
let t;
t += val + " | ";
console.log(t);
var res = !(Math.sqrt(val) % 1);
if(isNaN(val)) return NaN;
return res;
};
const a = [82, 44, 63, NaN, 14, 71, 42, 81, 73, 15];
console.log("a = ",a);
t="";
console.log("a.find(isSquare) = ",a.find(isSquare));
console.log(t);
t="";
console.log("a.findIndex(isSquare) =
",a.findIndex(isSquare));
console.log(t);
t="";
34 / 83
JavaScript Tome-V
console.log("a.find(isNaN)) = ",a.find(isNaN));
t="";
console.log("a.findIndex(isNaN)) =
",a.findIndex(isNaN));
</script>
a = Array(10) [ 82, 44, 63, NaN, 14, 71, 42, 81, 73, 15 ]
test.html:12:4
82 |
82 | 44 |
82 | 44 | 63 |
82 | 44 | 63 | NaN
82 | 44 | 63 | NaN
82 | 44 | 63 | NaN
82 | 44 | 63 | NaN
82 | 44 | 63 | NaN
a.find(isSquare) =
82 | 44 | 63 | NaN
|
| 14
| 14
| 14
| 14
81
| 14
82 |
82 | 44 |
82 | 44 | 63 |
82 | 44 | 63 | NaN |
82 | 44 | 63 | NaN | 14
82 | 44 | 63 | NaN | 14
82 | 44 | 63 | NaN | 14
82 | 44 | 63 | NaN | 14
a.findIndex(isSquare) =
82 | 44 | 63 | NaN | 14
| 71 | 42 | 81 |
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:15:4
test.html:16:4
|
|
|
|
7
|
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:5:8
test.html:19:4
test.html:20:4
|
| 71 |
| 71 | 42 |
| 71 | 42 | 81 |
71 |
71 | 42 |
71 | 42 | 81 |
71 | 42 | 81 |
a.find(isNaN)) = NaN
a.findIndex(isNaN)) = 3
test.html:23:4
test.html:26:4
Array . splice ( ) :
var spliced, copy, arr=[45,33,22,11,44,55,75,27];
// Créer copie individuelle de arr
35 / 83
JavaScript Tome-V
copy=arr.map(x=>x)
var remIdxSplice = (list,idx) => {
// Retirer 1 élément à partir de l'index idx
spliced=list.splice(idx,1);
return list; // Retourne la nouvelle copy.
}
console.log(arr); // Afficher l'Array initiale
console.log(copy); // Afficher la copy initiale
// Retirer 1 élément de copy à partir de l'index 3
var ret=remIdxSplice(copy,3);
console.log(arr); // Afficher l'Array initiale
console.log(copy); // Afficher la nouvelle copy
console.log(ret) // Afficher résultat de splice()
console.log(spliced) // Afficher l'élément retiré
console.log(arr) // Afficher de nouveau l'Array initiale
console.log(arr.splice(3)) // Afficher splice de arr
console.log(arr) // Afficher arr splicée
</script>
Exécution :
Array
Array
Array
Array
Array
Array
Array
Array
[
[
[
[
[
[
[
[
45, 33,
45, 33,
45, 33,
45, 33,
45, 33,
11 ]
45, 33,
11, 44,
22,
22,
22,
22,
22,
11,
11,
11,
44,
44,
44,
44,
44,
55,
55,
55,
55,
55,
75,
75,
75, 27 ]
75, 27 ]
75, 27 ]
27 ]
27 ]
22, 11, 44, 55, 75, 27 ]
55, 75, 27 ]
test.html:14:3
test.html:15:3
test.html:19:3
test.html:20:3
test.html:21:3
test.html:22:3
test.html:23:3
test.html:24:3
Array . splice ( ) et Array . delete ( ) 1 :
var array = [2, 7, 5, 9, 10, 6, 5, 2, 5];
var index = array.indexOf(5);
console.log("initial = ")
console.log(array)
console.log("indexOf(5) = "+ index)
if (index > -1) {
var sres = array.splice(index, 3);
36 / 83
JavaScript Tome-V
}
console.log("Spliced = ")
console.log(sres)
console.log("Remained = ")
console.log(array)
</script>
Exécution :
initial = (9) [2, 7, 5, 9, 10, 6, 5, 2, 5]
indexOf(5) = 2
/// DELETED ///
Deleted = true
Remained = (9) [2, 7, empty, 9, 10, 6, 5, 2, 5]
/// SPLICED ///
Spliced = test.html:26 (3) [empty, 9, 10]
Remained = (6) [2, 7, 6, 5, 2, 5]
var arrs = [2,9,2,3,2,2,7,2,2],
arrd = [2,9,2,3,2,2,7,2,2],
el=2;
"use strict";
console.log("Avant splice & delete = ");
console.log(arrs);
for(var i = arrs.length-1; i>=0 ;i--) {
if(arrs[i] === el) {
arrs.splice(i, 1);
delete arrd[i];
}
}
console.log("Après le splice = ");
console.log(arrs);
console.log("Après le delete = ");
37 / 83
JavaScript Tome-V
console.log(arrd);
console.log('Après filtrage des undefined :');
console.log(arrd.filter(function(d){return typeof d !==
"undefined"}));
</script>
Exécution avec YANDEX :
Avant splice & delete =
(9) [2, 9, 2, 3, 2, 2, 7, 2, 2]
Après le splice =
(3) [9, 3, 7]
Après le delete =
(9) [empty, 9, empty, 3, empty × 2, 7, empty × 2]
Après filtrage des undefined :
(3) [9, 3, 7]
Exécution avec FIREFOX :
Avant splice & delete = Array [ 9, 3, 7 ]
Après le splice =
Array [ 9, 3, 7 ]
Après le delete = Array [ <1 empty slot>, 9, <1 empty
slot>, 3, <2 empty slots>, 7, <2 empty slots> ]
Après filtrage des undefined :
Array [ 9, 3, 7 ]
var s, arrays,arrayd,array;
arrays=[2,9,2,3,2,2,7,2,2];
arrayd=[2,9,2,3,2,2,7,2,2];
array =[2,9,2,3,2,2,7,2,2];
"use strict";
var cptr=0, flags, flagd, sp, dl, el=2;
console.log(array+" vs "+el);
38 / 83
JavaScript Tome-V
for(var i = array.length - 1; i >= 0; i--) {
console.log("\n("+ ++cptr+") >==========<");
console.log("INITIAL ARRAY = ");
console.log(array);
console.log("SPLICED ARRAY = ");
console.log(arrays);
console.log("DELETED ARRAY = ");
console.log(arrayd);
if(arrays[i] === el) {
sp=arrays.splice(i, 1);
flags=1;
} else {
sp="Nothing";
flags=0
}
s="===> arrays["+i+"] = "+
arrays[i]+" après SPLICE()";
console.log(sp+" a été spliced");
if(flags)console.log(s+" *****");
if(arrayd[i] === el) {
dl=delete arrayd[i];
flagd=1;
} else {
dl="Nothing";
flagd=0
}
s="===> arrayd["+i+"] = "+
arrayd[i]+" après delete ar-rayd["+i+"]";
console.log(dl);
console.log(" deleted");
if(flagd)console.log(s+" -----");
}
</script>
Exécution :
2,9,2,3,2,2,7,2,2 vs 2
(1) >==========<
39 / 83
INITIAL ARRAY = (9) [2, 9,
SPLICED ARRAY = (9) [2, 9,
DELETED ARRAY = (9) [2, 9,
2 a été spliced
===> arrays[8] = undefined
true deleted
===> arrayd[8] = undefined
(2) >==========<
INITIAL ARRAY = (9) [2, 9,
SPLICED ARRAY = (8) [2, 9,
DELETED ARRAY = (9) [2, 9,
1]
2 a été spliced
===> arrays[7] = undefined
true deleted
===> arrayd[7] = undefined
JavaScript Tome-V
2, 3, 2, 2, 7, 2, 2]
2, 3, 2, 2, 7, 2, 2]
2, 3, 2, 2, 7, 2, 2]
après SPLICE() *****
après delete arrayd[8] ----2, 3, 2, 2, 7, 2, 2]
2, 3, 2, 2, 7, 2]
2, 3, 2, 2, 7, 2, undefined ×
après SPLICE() *****
après delete arrayd[7] -----
(3) >==========<
INITIAL ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, 2, 2]
SPLICED ARRAY = (7) [2, 9, 2, 3, 2, 2, 7]
DELETED ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, undefined × 2]
Nothing a été spliced
Nothing deleted
(4) >==========<
INITIAL ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, 2, 2]
SPLICED ARRAY = (7) [2, 9, 2, 3, 2, 2, 7]
DELETED ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, undefined × 2]
2 a été spliced
===> arrays[5] = 7 après SPLICE() *****
true deleted
===> arrayd[5] = undefined après delete arrayd[5] ----(5) >==========<
INITIAL ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, 2, 2]
SPLICED ARRAY = (6) [2, 9, 2, 3, 2, 7]
DELETED ARRAY = (9) [2, 9, 2, 3, 2, undefined × 1, 7, undefined × 2]
2 a été spliced
true deleted
===> arrayd[4] = undefined après delete arrayd[4] -----
40 / 83
JavaScript Tome-V
(6) >==========<
INITIAL ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, 2, 2]
SPLICED ARRAY = (5) [2, 9, 2, 3, 7]
DELETED ARRAY = (9) [2, 9, 2, 3, undefined × 2, 7, undefined × 2]
Nothing deleted
(7) >==========<
INITIAL ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, 2, 2]
SPLICED ARRAY = (5) [2, 9, 2, 3, 7]
DELETED ARRAY = (9) [2, 9, 2, 3, undefined × 2, 7, undefined × 2]
2 a été spliced
true deleted
===> arrayd[2] = undefined après delete arrayd[2] ----(8) >==========<
INITIAL ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, 2, 2]
SPLICED ARRAY = (4) [2, 9, 3, 7]
DELETED ARRAY = (9) [2, 9, undefined × 1, 3, undefined ×
2, 7, undefined × 2]
Nothing deleted
(9) >==========<
INITIAL ARRAY = (9) [2, 9, 2, 3, 2, 2, 7, 2, 2]
SPLICED ARRAY = (4) [2, 9, 3, 7]
DELETED ARRAY = (9) [2, 9, undefined × 1, 3, undefined ×
2, 7, undefined × 2]
2 a été spliced
true deleted
===> arrayd[0] = undefined après delete arrayd[0] -----
Array . filter ( ) :
const filt = 7
let arr = [5, 7, 2, 7, 1, 7, 7]
var nar
41 / 83
"use strict";
JavaScript Tome-V
nar = arr.filter(elm => elm !== filt)
console.log(arr)
console.log("(filter!==7)")
console.log(nar)
nar = arr.filter(elm => elm === filt)
console.log(arr)
console.log("(filter===7)")
console.log(nar)
</script>
Exécution :
(7) [5, 7, 2, 7, 1, 7, 7]
(filter!==7)
(3) [5, 2, 1]
(7) [5, 7, 2, 7, 1, 7, 7]
(filter===7)
(4) [7, 7, 7, 7]
Array . includes (element , startPos ) :
const ref = [2, 3, 5]
var narr;
let arr = [1, 2, 3, 4, 5, 3, 1]
console.log(arr)
console.log(ref)
"use strict";
narr = arr.filter(item => !ref.includes(item))
console.log(narr)
narr = arr.filter(item => ref.includes(item))
console.log(narr)
</script>
Exécution :
(7) [1, 2, 3, 4, 5, 3, 1]
(3) [2, 3, 5]
42 / 83
JavaScript Tome-V
(3) [1, 4, 1]
(4) [2, 3, 5, 3]
Array . map ( ) :
"use strict";
var arr=[]
for(var k=0;k<10;k++)
arr.push(Math.round(Math.random()*1000))
var ret=arr.map(x => String(x).padStart(3,0))
console.log(ret)
console.log(String(ret))
console.log(ret.toString())
</script>
/*
Array [ "770", "047", "909", "240", "005", "574",
"891", "558", "823", "153" ]
test.html:8:2
770,047,909,240,005,574,891,558,823,153 test.html:9:2
770,047,909,240,005,574,891,558,823,153 test.html:10:2 */
var arr=[]
arr.push(Math.round(Math.random()*10000))
var ret=arr.map(x => String(x).padEnd(5,"^"))
console.log(ret)
</script>
/*
Array [ "10^^^", "3103^", "5350^", "8623^",
"88^^^" ]
10^^^,3103^,5350^,8623^,88^^^
10^^^,3103^,5350^,8623^,88^^^
*/
43 / 83
JavaScript Tome-V
Au lieu de la méthode “ push ”, on peut utiliser la longueur de l’array
“ length ” comme indice de l’élément cible d’entrée dans l’array.
var arr=[]
arr[arr.length]=Math.round(Math.random()*10000)
var ret=arr.map(x => String(x).padEnd(5,"^"))
console.log(ret)
</script>
/*
Array [ "3321^", "7953^", "10^^^", "9682^", "2726^" ]
3321^,7953^,10^^^,9682^,2726^
3321^,7953^,10^^^,9682^,2726^
*/
Encore Array . map ( ) :
<script>
var srcArray = ["string", 2018, {}];
var destArray = srcArray.map(function(x) {
return typeof x; });
console.log("L'Array de destination = ");
console.log(destArray);
</script>
Ici le paramètre formel « x » est un itérateur des éléments de l’Array :
L'Array de destination =
(3) ["string", "number", "object"]
En cliquant sur l’objet Array, on obtient.
1 (3) ["string", "number", "object"]
44 / 83
A
B
C
D
E
JavaScript Tome-V
0:"string"
1:"number"
2:"object"
length:3
__proto__:Array(0)
On peut naturellement utiliser une fonction fléchée :
<script> "use strict";
var src = ["texte", 2018, {}];
var dest = src.map(src => typeof src);
console.log("L'Array de destination = ");
console.log(dest);
</script>
(3) ["string", "number", "object"]
0:"string"
1:"number"
2:"object"
length:3
__proto__ :Array(0)
Exécution avec FIREFOX :
Array [ "string", "number", "object" ]
[…]
0: "string"
1: "number"
2: "object"
length: 3
__proto__: Array []
La méthode « Array . prototype . forEach ( ) » fonctionne exactement
de la même façon que la méthode « Array . map ( ) », sauf que Array .
45 / 83
JavaScript Tome-V
map ( ) retourne un tableau du résultat du traitment de chaque élément
du tableau de départ, alors que Array . forEach ( ) retourne undefined.
Les “ return ” n’arrêtent pas les boucles « forEach ( ) » ni « map ( ) ».
Pour pouvoir arrêter la boucle, utilisez les méthodes « every » ou
« some ».
Array . map ( ) :
let arr = [-5.25, 5.25, -2.5, 2.5, -6.75, 6.75, -4, 4];
let res;
// Les return ici n’arrêtent pas map()
const round = arr.map(function(el, idx, array) {
res='él['+idx+'] :'+ el+" >= sonRound ["+
Math.round(el)+"]";
console.log(res);
// el >= son arrondi ?
if(el < Math.round(el)) {
console.log(" ¬")
return false;
}
console.log(" ¥")
return true;
});
console.log('=====');
const floor = arr.map(function(el, idx, array) {
res='él['+idx+'] :'+ el+" >= sonFloor ["+
Math.floor(el)+"]";
console.log(res);
// el >= son floor ?
if(el < Math.floor(el)) {
console.log(" ¬")
return false;
}
console.log(" ¥")
return true;
});
46 / 83
JavaScript Tome-V
const ceil = arr.map(function(el, idx, array) {
res='él['+idx+'] :'+ el+" >= sonCeil ["+
Math.ceil(el)+"]";
console.log(res);
if(el < Math.ceil(el)) {
console.log(" ¬")
return false;
}
console.log(" ¥")
return true;
});
console.log('***** Math.round() :', round);
console.log('***** Math.floor() :', floor);
console.log('***** Math.ceil() :', ceil);
</script>
él[0]
él[1]
él[2]
él[3]
él[4]
él[5]
él[6]
él[7]
=====
él[0]
él[1]
él[2]
él[3]
él[4]
él[5]
él[6]
él[7]
=====
él[0]
él[1]
él[2]
él[3]
él[4]
:-5.25 >= sonRound [-5]
:5.25 >= sonRound [5]
:-2.5 >= sonRound [-2]
:2.5 >= sonRound [3]
:-6.75 >= sonRound [-7]
:6.75 >= sonRound [7]
:-4 >= sonRound [-4]
:4 >= sonRound [4]
¬
¥
¬
¬
¥
¬
¥
¥
:-5.25 >= sonFloor [-6]
:5.25 >= sonFloor [5]
:-2.5 >= sonFloor [-3]
:2.5 >= sonFloor [2]
:-6.75 >= sonFloor [-7]
:6.75 >= sonFloor [6]
:-4 >= sonFloor [-4]
:4 >= sonFloor [4]
¥
¥
¥
¥
¥
¥
¥
¥
:-5.25 >= sonCeil [-5]
:5.25 >= sonCeil [6]
:-2.5 >= sonCeil [-2]
:2.5 >= sonCeil [3]
:-6.75 >= sonCeil [-6]
¬
¬
¬
¬
¬
47 / 83
JavaScript Tome-V
él[5] :6.75 >= sonCeil [7]
¬
él[6] :-4 >= sonCeil [-4]
¥
él[7] :4 >= sonCeil [4]
¥
***** Math.round() :
Array[false, true, false, false, true, false, true, true]
***** Math.floor() :
Array [ true, true, true, true, true, true, true, true ]
***** Math.ceil() :
Array[false,false, false, false, false, false, true,true]
Array . forEach ( ) :
La même chose que ci-dessus, mais avec les absolues des opérandes.
let arr = [-5.25, 5.25, -2.5, 2.5, -6.75, 6.75, -4, 4];
let res;
// Les return ici n’arrêtent pas forEach ()
const round = arr.forEach(function(el, idx, array) {
res='él['+idx+'] :'+ Math.abs(el)+" >= sonRound ["+
Math.abs(Math.round(el))+"]";
console.log(res);
if(Math.abs(el) < Math.abs(Math.round(el))) {
console.log(" ¬")
return false;
}
console.log(" ¥")
return true;
});
const floor = arr.forEach(function(el, idx, array) {
res='él['+idx+'] :'+ Math.abs(el)+" >= sonFloor ["+
Math.abs(Math.floor(el))+"]";
console.log(res);
// el >= son floor ?
if(Math.abs(el) < Math.abs(Math.floor(el))) {
console.log(" ¬")
return false;
}
console.log(" ¥")
return true;
});
48 / 83
JavaScript Tome-V
const ceil = arr.forEach(function(el, idx, array) {
res='él['+idx+'] :'+ Math.abs(el)+" >= sonCeil ["+
Math.abs(Math.ceil(el))+"]";
console.log(res);
if(Math.abs(el) < Math.abs(Math.ceil(el))) {
console.log(" ¬")
return false;
}
console.log(" ¥")
return true;
});
console.log('***** Math.round() :', round);
console.log('***** Math.floor() :', floor);
console.log('***** Math.ceil() :', ceil);
</script>
él[0]
él[1]
él[2]
él[3]
él[4]
él[5]
él[6]
él[7]
=====
él[0]
él[1]
él[2]
él[3]
él[4]
él[5]
él[6]
él[7]
=====
él[0]
él[1]
él[2]
él[3]
él[4]
él[5]
él[6]
él[7]
*****
:5.25 >= sonRound [5]
:5.25 >= sonRound [5]
:6.75 >= sonRound [7]
:6.75 >= sonRound [7]
:4 >= sonRound [4]
:4 >= sonRound [4]
¥
¥
¥
¬
¬
¬
¥
¥
:5.25 >= sonFloor [6]
:5.25 >= sonFloor [5]
:6.75 >= sonFloor [7]
:6.75 >= sonFloor [6]
:4 >= sonFloor [4]
:4 >= sonFloor [4]
¬
¥
¬
¥
¬
¥
¥
¥
:5.25 >= sonCeil [5]
:5.25 >= sonCeil [6]
:2.5 >= sonCeil [2]
:2.5 >= sonCeil [3]
:6.75 >= sonCeil [6]
:6.75 >= sonCeil [7]
:4 >= sonCeil [4]
:4 >= sonCeil [4]
Math.round() : undefined
¥
¬
¥
¬
¥
¬
¥
¥
49 / 83
JavaScript Tome-V
***** Math.floor() : undefined
***** Math.ceil() : undefined
Leur syntaxe générale est la même, comme suit:
var nvTableau = arr.map(callback [, thisArg]);
Valeur de retour : Un nouveau tableau composé des images de la fonction de rappel (callback function).
var nvTableau = arr.forEach(callback [, thisArg]);
Valeur de retour : undefined.
var nvTableau = arr.some(callback [, thisArg]);
Valeur de retour : Ce que vous spécifiez.
var nvTableau = arr.every(callback [, thisArg]);
Valeur de retour : Ce que vous spécifiez.
callback
La fonction (callback) utilisée pour créer les éléments du nouveau tableau, elle utilise au maximum trois arguments :
1er valeurCourante : La valeur de l'élément du tableau, à traiter.
2e index (Facultatif) : L'index de l'élément traité par la fonction.
3e tableau (Facultatif) : Le tableau sur lequel on appelle la méthode
(map, forEach, some ou every).
thisArg (Facultatif)
50 / 83
JavaScript Tome-V
L’objet que doit pointer « this » lors de l'exécution de la fonction callback (par défaut, l'objet global de l'environnement =window dans un
navigateur).
function Compute() {
this.add = 0;
this.cptr = 0;
}
Compute.prototype.ajouter = function(tableau) {
tableau.map(function(el) { // le callback
this.add += el*2; // Somme des doubles.
++this.cptr;
}, this); // this = l'objet Compute.
// ^---- l'argument this ici.
};
const iComp = new Compute();
const a=[2, -5, 9];
iComp.ajouter(a);
console.log("a=",a); // a= Array[3] [ 2, -5, 9 ]
console.log(iComp);
// Object { add: 12, cptr: 3 } [FIREFOX]
// ou
// Compute {add: 32, cptr: 3} [YANDEX]
console.log(iComp.cptr,"nbs sommant à", iComp.add);
// 3 "nbs sommant à" 12
</script>
Les méthodes map et forEach ne permettent pas de quitter la boucle, et
de ce fait parcourent l’intégralité de l’objet.. Si on souhaite quitter la
boucle sous certaines conditions, utilisez l’une des méthodes every ou
some.
// LA MÉTHODE EVERY
var SEUIL_MAX = 12;
var v = [5, 2, -16, 14, 3, 18, 20];
var res;
51 / 83
JavaScript Tome-V
res = v.every(function(el, idx, array) {
console.log('arr['+idx+']=', el, "< ",
SEUIL_MAX,'?');
// arr[0]= 5 < 12 ?
// arr[1]= 2 < 12 ?
// arr[2]= -16 < 12 ?
// arr[3]= 14 < 12 ?
if (el >= SEUIL_MAX) {
return false;
}
return true;
});
console.log('res:', res); // res: false
// LA MÉTHODE SOME
res = v.some(function(el, idx, array) {
console.log('arr['+idx+']=', el, "< ",
SEUIL_MAX,'? QUITTER ?');
// arr[0]= 5 < 12 ? QUITTER ?
// arr[1]= 2 < 12 ? QUITTER ?
// arr[2]= -16 < 12 ? QUITTER ?
// arr[3]= 14 < 12 ? QUITTER ?
if (el >= SEUIL_MAX) {
return true;
}
return false;
});
console.log('res:', res); // res: true
</script>
La méthode Math . log10 ( ) idem avec toutes les méthodes ou fonctions
qui n’attendent TOUJOURS qu’un et un seul argument (donc dont
length = 1) : on n’a pas besoin de spécifier un premier argument, conteneur., et on utilise la fonction traiteuse directement comme callback,
sans le mot-clé return.
var depart = [0, 1, 2, 3, 9, 10];
var apTTT = depart.map(Math.log10);
console.dir(apTTT);
// […]
52 / 83
//
//
//
//
//
//
//
JavaScript Tome-V
0: -Infinity
1: 0
2: 0.3010299956639812
3: 0.47712125471966244
4: 0.9542425094393249
5: 1
length: 6
console.log(depart);
// Array(6) [ 0, 1, 2, 3, 9, 10 ]
console.log(['0', 1.1, '2.2e2', '3e30', '10'].
map(Number));
// Array(5) [ 0, 1.1, 220, 3e+30, 10 ]
console.log(['0', 1.1, '2.2e2', '3e30', '10'].
map( str => parseInt(str)));
// Array(5) [ 0, 1, 2, 3, 10 ]
console.log(['0', 1.1, '2.2e2', '3e30', '10'].
map(parseInt));
console.log(['0', 1.1, '2.2e2', '3e30', '10'].
map(parseInt,10));
console.log(['0', 1.1, '2.2e2', '3e30', '10'].
map(parseInt,2)); // Array(5) [0, NaN, NaN, NaN, 4]
function retIntB10(el) {
return parseInt(el, 10);
}
console.log(['0', 1.1, '2.2e2', '3e30', '10'].
map(retIntB10)); // Array(5) [0, 1, 2, 3, 10]
function retIntB5(el) {
return parseInt(el, 5);
}
console.log(['0', '60', '2.2e2', '3e30', '10'].
map(retIntB5)); // Array(5) [0, NaN, 2, 3, 10]
</script>
« Array . map ( ) » dans une opération qui utilise le premier argument
comme opérande : il faut spécifier ce premier paramètre, et utiliser une
fonction factice comme callback, avec le mot-clé return.
53 / 83
JavaScript Tome-V
var depart = [0, 1, 2, 3, 9, Math.E];
var apTTT = depart.map(
function factice_inutile(x){
return Math.expm1(x)
}
);
console.dir("E=",Math.E,apTTT);
// E= 2.718281828459045
// […]
//
0: 0
//
1: 1.718281828459045
//
2: 6.38905609893065
//
3: 19.085536923187668
//
4: 8102.083927575384
//
5: 14.154262241479262
//
length: 6
</script>
Array . map ( ) avec destructuration :
var tOrig = [ {clé:1, val:5}, {clé:0, val:10},
{clé:"trois", val:20}, {clé:"zero", val: 30}];
var tDestructuré = tOrig.map(obj => {
var rObj = {};
rObj[obj.clé] = obj.val;
return rObj;
});
console.dir(tDestructuré);
// […]
//
0: Object { 1: 5 }
//
1: Object [ 10 ]
//
2: Object { trois: 20 }
//
3: Object { zero: 30 }
//
length: 4
</script>
Quand on n’a pas besoin d’une valeur de retour, et que toutes les opérations doivent se passer et se terminer dans le corps/bloc de la routine,
alors le choix doit être dicté par la rapidité d’exécution.
54 / 83
JavaScript Tome-V
Voici une comparaison des vitesses d’exécutions (benchmark) de 4 méthodes similaires de l’objet « Arrays » :
let arr = [-5.25, 5.25, -2.5, 2.5, -6.75, 6.75, -4, 4];
let d, b=100000000;
console.log("Array.map");
d=new Date();
for(let k=b;k;k--)arr.map(el => {});
console.log(new Date()-d);
console.log("Array.forEach");
d=new Date();
for(let k=b;k;k--)arr.forEach(el => {});
console.log("Array.every");
d=new Date();
for(let k=b;k;k--)arr.every(el => {});
console.log("Array.some");
d=new Date();
for(let k=b;k;k--)arr.some(el => {});
</script>
Avec Firefox Quantum 64.0b13 :
55 / 83
JavaScript Tome-V
Avec Yandex Version 18.11.1.385 beta :
Avec Google Chrome Version 70.0.3538.110 (Build officiel) (64 bits) :
56 / 83
JavaScript Tome-V
Avec Citrio Version 50.0.2661.276 (5854/1) :
Avec UC Browser 7.0.185.1002 :
Avec Opera Neon Version 1.0.2531.0 :
57 / 83
JavaScript Tome-V
Avec Opera Version :56.0.3051.116 :
Avec Torch Version 60.0.0.1508 (Build officiel)
58 / 83
JavaScript Tome-V
Avec Vivaldi 1.14.1077.45 (Stable channel) (32 bits)
Révision
416aa8c28dba11af9ad54090f9e67662438acc75Système d’exploitation
Windows
JavaScript
V8 6.4.388.41
Flash 32.0.0.101 :
Avec
Brave
V8
rev
Muon
OS Release
Update Channel
OS Architecture
OS Platform
Node.js
Brave Sync
0.21.18
6.4.388.41
580be78
4.8.2
6.1.7601
Release
x64
Microsoft Windows
7.9.0
v1.4.2
59 / 83
libchromiumcontent
JavaScript Tome-V
64.0.3282.140
Avec UR
Version 61.1.3163.16 (Build de développement) (BETA)
Avec Sushi
Version du navigateur: 0.21.3
Version chrome : 68.0.3440.84
Version Muon : 8.0.7 :
60 / 83
JavaScript Tome-V
Avec Comodo Dragon Version 57.0.2987.93 (portable) :
61 / 83
JavaScript Tome-V
ITÉRABILITÉ DES CHAÎNES DE CARACTÈRES :
Une chaîne de caractères est itérable. C’est le seul objet natif ressemblant à un tableau, bien que immuables. On peut donc par exemple
soumettre chaque caractère d’une chaîne à la méthode Array.map(),
mais indirectement seulement, via l’appel “ Array.prototype.map.call(),
l’objet itérable à traiter étant le premier argument, et la fonction callback le deuxième, le résultat étant naturellement retournée (avec return)
comme array.
Convertir une « Array » en « String » :
Deux méthodes donnent exactement le même résultat de conversion
d’Array en String : le « Array . toStrong ( ) » et le « Array . join ( ) ».
<script type="text/javascript"> ùse strict`;
console.log(["Un","Deux","Trois"] . toString());
// Un,Deux,Trois
console.log(["Un","Deux","Trois"] . join());
// Un,Deux,Trois
console.dir(Object.getOwnPropertyDescriptors(
["Un","Deux","Trois"] . toString()));
console.dir(Object.getOwnPropertyDescriptors(
["Un","Deux","Trois"] . join()));
</script>
62 / 83
JavaScript Tome-V
Codes ASCII des caractères d’une chaîne :
let map = Array.prototype.map;
let a = map.call('Congrats', function(x) {
let y=x.charCodeAt(0);
return [x.charAt(0), y ,
String.fromCharCode(y).toUpperCase()] });
console.dir(a);
// […]
//
0: Array [ "C", 67, "C" ]
//
1: Array [ "o", 111, "O" ]
63 / 83
//
2: Array [
//
3: Array [
//
4: Array [
//
5: Array [
//
6: Array [
//
7: Array [
//
length: 8
</script>
"n",
"g",
"r",
"a",
"t",
"s",
110,
103,
114,
97,
116,
115,
JavaScript Tome-V
"N"
"G"
"R"
"A"
"T"
"S"
]
]
]
]
]
]
Vérifier si caractères sont entre ‘a’ - ‘z’ :
let str="Progeria";
function estLettre(caract) {
let c = caract.toUpperCase();
return c >= 'A' && c <= 'Z';
}
if (Array.prototype.every.call(str, estLettre)) {
disp(str);
//La chaîne 'PROGERIA' n'a que des lettres (a - z)
}
if (Array.from(str).map(estLettre)) {
disp(str);
//La chaîne 'PROGERIA' n'a que des lettres (a - z)
}
function disp(s){
console.log("La chaîne '" + s.toUpperCase() +
"' n'a que des lettres (a - z)");
}
</script>
Une collection aussi étant itérable, peut être soumise à la méthode Array . map ( ), indirectement aussi, via l’appel “ Array . prototype .
map . call ( ), l’objet itérable à traiter étant le premier argument, et la
fonction callback le deuxième, le résultat étant aussi retournée (avec
return) comme array.
64 / 83
JavaScript Tome-V
Dans l’exemple qui suit, sélectionnez par exemple Lyon, Opel et Venus
puis rafraîchissez la page.
<select>
<option>Algérie</option>
<option>Lyon</option>
<option>Kinshasa</option>
<option>Petersburg</option>
</select>
<select>
<option>Ford</option>
<option>Opel</option>
<option>Jaguard</option>
</select>
<select>
<option>Terre</option>
<option>Mars</option>
<option>Venus</option>
</select>
var elems =
document.querySelectorAll('select option:checked');
var selec =
Array.prototype.map.call(elems, function(obj) {
return obj.value;
});
console.dir(selec);
// […]
//
0: "Lyon"
//
1: "Opel"
//
2: "Venus"
/// length: 3
</script>
Exemple plus long :
const array1 = [12, , 3, , 7];
const array2 = [];
65 / 83
JavaScript Tome-V
const dispEls=(el, idx, array1) =>
array2.push("exp (a[" + idx+ "] = "+el+") = "+
Math.exp(el).toFixed(2));
array2.push("===== FOREACH");
let rf=array1.forEach(dispEls);
// Ce dispEls = adresse de la fonction callback
// qui elle, porte les arguments.
array2.push("===== MAP");
let rm=array1.map(dispEls);
// dispEls = adresse de la fonction callback.
console.dir("array2=",array2)
// array2= […]
// 0: "===== FOREACH"
// 1: "exp (a[0] = 12) = 162754.79"
// 2: "exp (a[2] = 3) = 20.09"
// 3: "exp (a[4] = 7) = 1096.63"
// 4: "===== MAP"
// 5: "exp (a[0] = 12) = 162754.79"
// 6: "exp (a[2] = 3) = 20.09"
// 7: "exp (a[4] = 7) = 1096.63"
// length: 8
console.log(array1.map(x=>Math.exp(x).toFixed(2)))
// Array [ "162754.79", <1 empty slot>,
//
"20.09", <1 empty slot>, "1096.63" ]
// […]
// 0: "162754.79"
// 2: "20.09"
// 4: "1096.63"
// length: 5
console.dir(array1.forEach(x=>Math.exp(x).toFixed(2)))
// undefined
console.dir("rf=",rf) // rf= undefined
console.log("rm=",rm)
// Array [ 6, <1 empty slot>, 7, <1 empty slot>, 8 ]
// […] , 0: 6 , 2: 7 , 4: 8
// length: 5
</script>
66 / 83
JavaScript Tome-V
N.B. : “ forEach ” est une propriété aussi bien de l’objet “ Array ” que
de son protothype “ Array.prototype ” :
Object.getOwnPropertyNames(Array) :
[…] 0: "isArray" , 1: "concat" , 2: "lastIndexOf" ,
3: "indexOf" , 4: "forEach" , 5: "map" , 6: "filter" ,
7: "every" , 8: "some" , 9: "reduce" , 10: "reduceRight" ,
11: "join" , 12: "reverse" , 13: "sort" , 14: "push" ,
15: "pop" , 16: "shift" , 17: "unshift" , 18: "splice" ,
19: "slice" , 20: "from" , 21: "of" , 22: "prototype" ,
23: "length" , 24: "name"
length: 25
Object.getOwnPropertyNames(Array.prototype) :
[…]
0: "length" , 1: "toSource" , 2: "toString" ,
3: "toLocaleString" , 4: "join" , 5: "reverse" ,
6: "sort" , 7: "push" , 8: "pop" , 9: "shift" ,
10: "unshift" , 11: "splice" , 12: "concat" ,
13: "slice" , 14: "lastIndexOf" , 15: "indexOf" ,
16: "forEach" , 17: "map" , 18: "filter" , 19: "reduce" ,
20: "reduceRight" , 21: "some" , 22: "every"
23: "find" , 24: "findIndex" , 25: "copyWithin" ,
26: "fill" , 27: "entries" , 28: "keys" , 29: "includes" ,
30: "constructor"
length: 31
Array . reduce ( ) :
Applique une action à l’ensemble de tous les éléments de l’Array (du
premier au dernier), l’opération s’effectuant de l’extrême gauche vers
l’extrême droite.
'use strict';
let arr;
arr = [30, 15, 10, 1, 20];
console.log(arr.reduce((x, y) => x + y)); // 76
67 / 83
JavaScript Tome-V
console.log(arr.reduce((x, y) => x * y)); // 90000
console.log(arr.reduce((x, y) => x - y)); // -16
arr = [4, 4, -3, 0, -5, 0, 0, -2, 2, 2];
const Min = (x, y) => x < y ? x : y
const min = (collection) =>
arr.reduce(Min, collection);
console.log(min()); // -5
arr = [0, 0, 2, 6, 1, 2, 1, -3, 1, 1];
const Max = (x, y) => x > y ? x : y
const max = (collection) =>
arr.reduce(Max, collection);
console.log(max()); // 6
arr = [0, -6, -2, 3, 2, 3, 7, -2, 5, -4];
console.log("min =",min(arr)," | ","Max =",max(arr));
// min = -6 | Max = 7
</script>
68 / 83
JavaScript Tome-V
Array . reduceRight ( ) :
Applique une action à l’ensemble de tous les éléments de l’Array (du
premier au dernier), l’opération s’effectuant de l’extrême droite vers
l’extrême gauche.
let arr;
arr = [30, 15, 10, 1, 20];
console.log(arr.reduceRight((x,
'use strict';
y) => x + y)); // 76
y) => x * y)); // 90000
y) => x - y)); // -36
arr = [4, 4, -3, 0, -5, 0, 0, -2, 2, 2];
const Min = (x, y) => x < y ? x : y
const min = (collection) =>
arr.reduceRight(Min, collection);
console.log(min()); // -5
arr = [0, 0, 2, 6, 1, 2, 1, -3, 1, 1];
const Max = (x, y) => x > y ? x : y
const max = (collection) =>
arr.reduceRight(Max, collection);
console.log(max()); // 6
arr = [0, -6, -2, 3, 2, 3, 7, -2, 5, -4];
console.log("min =",min(arr)," | ","Max =",max(arr));
// min = -6 | Max = 7
</script>
Array . join ( ) :
69 / 83
JavaScript Tome-V
Retourne une « String = Chaîne de caractères » résultant de la conversion d’une « Array » (tableau), et donc comme si simplement supprimait les crochets. L’Array initiale reste intacte, les éléments dans l’Array
ainsi créée étant séparés par la chaîne séparatrice spécifiée comme paramètre dans l’instruction.
let v = new Uint8ClampedArray(
[86, 8, 512, 14, 125, 149, 815, 66]
);
console.log ( v );
// Uint8ClampedArray(8)
// [ 86, 8, 255, 14, 125, 149, 255, 66 ]
console.log ( v.join(' # ') );
// 86 # 8 # 255 # 14 # 125 # 149 # 255 # 66
console.log ( v );
// Uint8ClampedArray(8)
// [ 86, 8, 255, 14, 125, 149, 255, 66 ]
</script>
Array . split ( ) :
Retourne une « Array » résultant de la conversion en une « String »
dans laquelle une sous-chaîne est spécifiée comme séparateur, et donc
aussi délimite la chaîne par des crochet en remplaçant la chaîne séparatrice par une virgule. La chaîne initiale reste intacte.
let v = "86 # 8 # 255 # 14 # 125 # 149 # 255 # 66";
//
console.log ( v );
86 # 8 # 255 # 14 # 125 # 149 # 255 # 66
70 / 83
JavaScript Tome-V
console.log ( v.split(' # ') );
// Array(8)
// [ "86","8","255","14","125","149","255","66" ]
console.log ( v );
// 86 # 8 # 255 # 14 # 125 # 149 # 255 # 66
</script>
Remarque :
Il ne faut pas confondre la méthode « . split » et les méthodes « . slice »
et « . splice ».
Array . splice ( ) :
Conserve de l’Array source, seulement ses x premiers éléments selon le
nombre spécifié en paramètre de l’appel de la méthode. Le reste des
éléments est retourné dans une autre Array.
let v = [ "86","8","255","14","125","149","255","66" ]
console.log ( v );
// Array(8)
// [ "86","8","255","14","125","149","255","66" ]
console.log ( v.splice(3) );
// Array(5) [ "14", "125", "149", "255", "66" ]
console.log ( v );
// Array(3) [ "86", "8", "255" ]
</script>
71 / 83
JavaScript Tome-V
CHAPITRE 6 : LES ARRAYS... :
Syntaxe :
var arr = new Array()
var arr = new Array([taille])
var arr = new Array([el0[, el1[, ...[, elN]]]])
Exemples :
// Array à taille initiale indéterminée
var arrayObj = new Array()
console.log(arrayObj.length)
// Array à autant d'éléments
var arrayObj = new Array(5, "text", {}, _=>{})
// Array à autant d'éléments
var arrayObj = [5, "text", {}, _=>{}]
// Array à taille initiale 5 éléments
// Pas à élément unique = 5
var arrayObj = new Array(5)
// Array à élément unique = 5
var arrayObj = new Array(Math.pow(2,3))
console.log(arrayObj[0])
var arrayObj = new Array("Quelletaille")
72 / 83
JavaScript Tome-V
var arrayObj = new Array("Quelletaille".length)
var arrayObj = [5]
var arrayObj = new Array([5])
var arrayObj = [Math.pow(2,3)]
var arrayObj = ["Quelletaille"]
var arrayObj = ["Quelletaille".length]
</script>
Exécution :
0
4
4
5
8
undefined
1
Quelletaille
12
undefined
1
1
1
test.html:6:3
test.html:10:3
test.html:14:3
test.html:19:3
test.html:23:3
test.html:24:3
test.html:28:3
test.html:29:3
test.html:33:3
test.html:34:3
test.html:38:3
test.html:42:3
test.html:46:3
73 / 83
JavaScript Tome-V
8
1
Quelletaille
1
12
test.html:47:3
test.html:51:3
test.html:52:3
test.html:56:3
test.html:57:3
On ne peut accéder aux membres d’une Array que par un index
var arr = [
"rose",
45,
function(){console.log("Hello")}
]
console.log(arr[0])
console.log(arr[1])
arr[2]
arr[2]()
console.log(arr[2]())
console.log("=====")
for(var i in arr)console.log(i+". "+arr[i])
</script>
Exécution :
rose
45
Hello
undefined
=====
0. rose
1. 45
2. function(){console.log("Hello")}
test.html:9:3
test.html:10:3
test.html:6:19
test.html:13:3
test.html:14:3
test.html:15:20
test.html:15:20
test.html:15:20
Méthodes entries et vaules apppliquée aux arrays :
var arr = [
"rose",
45,
"use strict";
74 / 83
JavaScript Tome-V
function(){console.log("Hello")}
]
console.log(arr[0])
console.log(arr[1])
console.log(arr[2]) // Affiche la fonction
arr[2]()
// Exécute la fonction
console.log(arr[2]()) // Ne retourne rien (undefined)
for(var i in arr)console.log(i+". "+arr[i])
console.log(Object.entries(arr));
console.log(Object.values(arr));
console.log(">============<");
for(var [cle,val] of Object.entries(arr))
console.log("*"+cle+'^ '+val);
console.log(`=====================================
*** Itération, itérable, itérator ***
=====================================`);
const ITERABLE = Object.values(arr)
const ITERATOR = ITERABLE[Symbol.iterator]();
for(let key in ITERABLE)console.log(ITERATOR.next())
console.log(ITERATOR.next())
</script>
Exécution :
rose
45
ƒ (){console.log("Hello")}
Hello
Hello
undefined
=====
0. rose
1. 45
2. function (){console.log("Hello")}
(3) [Array(2), Array(2), Array(2)]
1
test.html:9
test.html:10
test.html:11
test.html:6
test.html:6
test.html:13
test.html:14
test.html:15
test.html:15
test.html:15
test.html:16
0:(2) ["0", "rose"]
75 / 83
2
3
4
5
JavaScript Tome-V
1:(2) ["1", 45]
2:(2) ["2", ƒ]
length:3
__proto__:Array(0)
(3) ["rose", 45, ƒ]
1
2
3
4
5
test.html:17
0:"rose"
1:45
2:ƒ ()
length:3
__proto__:Array(0)
>============<
*0^ rose
*1^ 45
*2^ function (){console.log("Hello")}
test.html:18
test.html:20
test.html:20
test.html:20
Si c’était sur un objet , ce serait comme ceci :
var obj = {
col:"rose",
prix:45,
11:function(){console.log("Hello")}
}
console.log(obj["col"])
// rose
console.log(obj.prix)
// 45
console.log(obj[11]) // Affiche la fonction
// function 11()
obj["11"]()
// Hello
// Exécute la fonction
console.log(obj[11]()) // Ne retourne rien (undefined)
// undefined
for(var i in obj)console.log(i+". "+obj[i])
/*
76 / 83
JavaScript Tome-V
11. function(){console.log("Hello")}
col. rose
prix. 45
*/
console.log(Object.entries(obj));
// Array [ […], […], […] ]
console.log(Object.values(obj));
// Array [ 11(), "rose", 45 ]
console.log(">============<");
for(var [cle,val] of Object.entries(obj))
console.log("*"+cle+'^ '+val);
/*
*11^ function(){console.log("Hello")}
*col^ rose
*prix^ 45
*/
console.log(`=====================================
=====================================`);
const ITERABLE = Object.values(obj)
const ITERATOR = ITERABLE[Symbol.iterator]();
for(let key
/*
Object {
Object {
Object {
*/
in ITERABLE)console.log(ITERATOR.next())
value: 11(), done: false }
value: "rose", done: false }
value: 45, done: false }
// Object { value: undefined, done: true }
// Object { value: undefined, done: true }
</script>
77 / 83
test.html:8
test.html:11
test.html:14
2test.html:5
test.html:20
test.html:23
test.html:25
test.html:25
test.html:25
test.html:32
test.html:35
test.html:38
test.html:41
test.html:41
test.html:41
test.html:48
test.html:55
test.html:55
test.html:55
test.html:62
test.html:65
JavaScript Tome-V
rose
45
ƒ (){console.log("Hello")}
Hello
undefined
=====
11. function (){console.log("Hello")}
col. rose
prix. 45
Array(3)
Array(3)
>============<
*11^ function (){console.log("Hello")}
*col^ rose
*prix^ 45
=====================================
=====================================
Object
Object
Object
Object
Object
Quelques méthodes de l’objet Array, en life :
"use strict";
var c1, c2, r, s, arr =[], arr2=[];
console.log(arr);
console.log('### arr.push("1. Pushed") ==> '+
arr.push("1. Pushed"))
console.log(arr);
console.log('### arr.unshift("2. Unshifted") ==> '+
arr.unshift("2. Unshifted"))
console.log(arr);
console.log('### arr.push("3. 2nd Push") ==>
'+arr.push("3. 2nd Push"))
console.log(arr);
console.log('### (4. arr[arr.length]="ARR.LENGTH") ==> '+
78 / 83
JavaScript Tome-V
(arr[arr.length]="4. ARR.LENGTH"))
console.log(arr);
console.log('### 5a. (r=arr.slice(0,2)) ==> '+
(r=arr.slice(0,2)))
console.log('### 5b. (s=arr.slice(2)) ==> '+
(s=arr.slice(2)))
console.log(arr);
console.log(r);
console.log(s);
console.log('### 6. (c1=r.concat(s)) ==> '+
(c1=r.concat(s)))
console.log(arr);
console.log("c1="+c1);
console.log('### 7. (c2=r+["Add1","Add2"]+s) ==> '+
(c2=r+["Add1","Add2"]+s))
console.log(arr);
console.log(c2);
console.log(
'### 8. (c2=r.concat(["Add1","Add2"]).concat(s)) ==> '+
(c2=r.concat(["Add1","Add2"]).concat(s)))
console.log(arr);
console.log(c2);
console.log('### 9. (arr2=r.join(" <=> ") ==> '+
(arr2=r.join(" <=> ")))
console.log(arr2);
console.log(r);
console.log(s);
console.log(arr2);
console.log(
'### 10. (arr2="La bave du crapeau".split(" ") ==> '+
(arr2="La bave du crapeau".split(" ")))
// String.split()
console.log(arr2);
console.log('### c2.shift("11. Shifted") ==>
'+c2.shift("11. Shifted"))
console.log(c2);
console.log('### c2.pop("12. Poped") ==> '+
c2.pop("12. Poped"))
console.log(c2);
console.log('### 13. c2.splice(0,1) ==> '+
c2.splice(0,1))
console.log(c2);
</script>
79 / 83
JavaScript Tome-V
Exécution :
Array []
test.html:3:3
### arr.push("1. Pushed") ==> 1
test.html:4:3
Array [ "1. Pushed" ]
test.html:5:3
### arr.unshift("2. Unshifted") ==> 2
test.html:6:3
Array [ "2. Unshifted", "1. Pushed" ]
test.html:8:3
### arr.push("3. 2nd Push") ==> 3
test.html:9:3
Array [ "2. Unshifted", "1. Pushed", "3. 2nd Push" ]
test.html:10:3
### (4. arr[arr.length]="ARR.LENGTH") ==> 4. ARR.LENGTH
test.html:11:3
Array [ "2. Unshifted", "1. Pushed", "3. 2nd Push", "4. ARR.LENGTH" ]
test.html:13:3
### 5a. (r=arr.slice(0,2)) ==> 2. Unshifted,1. Pushed
test.html:14:3
### 5b. (s=arr.slice(2)) ==> 3. 2nd Push,4. ARR.LENGTH
test.html:15:3
test.html:16:3
test.html:17:3
Array [ "3. 2nd Push", "4. ARR.LENGTH" ]
test.html:18:3
### 6. (c1=r.concat(s)) ==> 2. Unshifted,1. Pushed,3. 2nd Push,4. ARR.LENGTH
test.html:19:3
test.html:20:3
c1=2. Unshifted,1. Pushed,3. 2nd Push,4. ARR.LENGTH
test.html:21:3
### 7. (c2=r+["Add1","Add2"]+s) ==> 2. Unshifted,1. PushedAdd1,Add23. 2nd
Push,4. ARR.LENGTH
test.html:22:3
test.html:24:3
2. Unshifted,1. PushedAdd1,Add23. 2nd Push,4. ARR.LENGTH
test.html:25:3
### 8. (c2=r.concat(["Add1","Add2"]).concat(s)) ==> 2. Unshifted,1.
Pushed,Add1,Add2,3. 2nd Push,4. ARR.LENGTH
test.html:26:3
test.html:29:3
Array [ "2. Unshifted", "1. Pushed", "Add1", "Add2", "3. 2nd Push", "4.
ARR.LENGTH" ]
test.html:30:3
### 9. (arr2=r.join(" <=> ") ==> 2. Unshifted <=> 1. Pushed test.html:31:3
2. Unshifted <=> 1. Pushed
test.html:32:3
test.html:33:3
Array [ "3. 2nd Push", "4. ARR.LENGTH" ]
test.html:34:3
2. Unshifted <=> 1. Pushed
test.html:35:3
### 10. (arr2="La bave du crapeau".split(" ") ==> La,bave,du,crapeau
test.html:36:3
Array [ "La", "bave", "du", "crapeau" ]
test.html:37:3
### c2.shift("11. Shifted") ==> 2. Unshifted
test.html:38:3
Array [ "1. Pushed", "Add1", "Add2", "3. 2nd Push", "4. ARR.LENGTH" ]
80 / 83
JavaScript Tome-V
### c2.pop("12. Poped") ==> 4. ARR.LENGTH
Array [ "1. Pushed", "Add1", "Add2", "3. 2nd Push" ]
### 13. c2.splice(0,1) ==> 1. Pushed
Array [ "Add1", "Add2", "3. 2nd Push" ]
test.html:39:3
test.html:40:3
test.html:41:3
test.html:42:3
test.html:43:3
Array.forEach :
"use strict";
var arr=[-2,-1,0,1,2,3,4,5,6,7,8,9,10,20,30,40];
console.log("1 kByte, 1 MByte, 1 Giga, 1 Tera");
arr.forEach(x=>{
let r=Math.pow(2,x);
console.log("2^"+x+" = "+r+" (×2= "+2*r+" | ×3=
"+r*3+")");
})
</script>
Exécution :
1 kByte, 1 MByte, 1 Giga, 1 Tera
2^-2 = 0.25 (×2= 0.5 | ×3= 0.75)
2^-1 = 0.5 (×2= 1 | ×3= 1.5)
2^0 = 1 (×2= 2 | ×3= 3)
2^1 = 2 (×2= 4 | ×3= 6)
2^2 = 4 (×2= 8 | ×3= 12)
2^3 = 8 (×2= 16 | ×3= 24)
2^4 = 16 (×2= 32 | ×3= 48)
2^5 = 32 (×2= 64 | ×3= 96)
2^6 = 64 (×2= 128 | ×3= 192)
2^7 = 128 (×2= 256 | ×3= 384)
2^8 = 256 (×2= 512 | ×3= 768)
2^9 = 512 (×2= 1024 | ×3= 1536)
2^10 = 1024 (×2= 2048 | ×3= 3072)
2^20 = 1048576 (×2= 2097152 | ×3= 3145728)
2^30 = 1073741824 (×2= 2147483648 | ×3= 3221225472)
2^40 = 1099511627776 (×2= 2199023255552 | ×3= 3298534883328)
81 / 83
JavaScript Tome-V
Kinshasa, le 4 avril 2019 (10:42 ).
Mots-clés :
destructuring, destructuration, every, filter, find, fndIndex, forEach, from, indexOf, isArray, join, lastIndexOf,
length, map, splice, includes, push, of, pop, concat, reduce, reduceRight, reverse, shift, slice, some, sort, delete,
unshift, Array, objet global, constructeur, tableaux, objets de haut-niveau, javascript, ecmascript, name, prototype
82 / 83
JavaScript Tome-V
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]
83 / 83

javascript tome xv - Arrays en JavaScript

Transcription

Documents pareils

Tea House - ShowTime

Console - Bidon recyclé et Teck

la console vsmile - MetaGames-EU

Plan Villa CHARTREUX

Fiche atelier - flash xbox 360

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

Communiqué de presse StarQuery Suite 4.4: Une solution

vtech vsmile - MetaGames-EU

GUIDE DE REPARATON DU AV 500-2

FICHE SIGNALETIQUE CARACTERISTIQUES TECHNIQUES