javascript tome xxi - Destructuration & paramètres

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
J AVA S C R I P T (Programmation Internet) V O L . V I
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
Aprè s le succè s foudroyant du Vol I destiné à dé montrer de
faç on pragmatique, pratique la puissance du JavaScript à ré soudre mê me les problè mes Mathé matiques (*l’
algorithmique
d’
analyse des nombres de Kaprekar, *le calcul du carr é d’
un
nombre, *le carré parfait, *les tests conditionnels, *quelques
diffé rences entre langage C et JavaScript, mais aussi
*diffé rents é diteurs de texte et leurs particularit é s), voici
le VOL II qui est premiè rement destiné à enrichir mon mé mento
personnel mais aussi à aider les autres dans leurs premiers
pas dans ce langage.
Cette dé marche saugrenue, de commencer par le plus complexe
pour continuer par le simple, s’
explique par le fait que nous
voulions d’
abord faire l’
apologie du langage =JavaScript= avant
de nous lancer en douceur dans ses dé tails.
Cette sé rie pré sentera de faç ons trè s é lé gante, les concepts
fondamentaux (de base, essentiels) permettant un engagement
progressif, plus profond et plus efficace dans ce langage.
C’
est une fois de plus l’
occasion de remercier, honorer, glorifier et aduler le Grand Dieu, tout Puissant Cré ateur de toutes
choses qui existent (et qui n’
existent pas encore, visibles et
caché es, connues et ignoré es, imaginables et insoupç onnables...) pour toutes les merveilles qu’
Il a toujours accomplies depuis bien avant mê me la cré ation des univers, toutes
les dimensions et tout ce qui s’
y trouve y compris les intra- /
extra-terrestres et les entité s é thé riques non-biologiques.
DIASOLUKA Nz. Luyalu
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Informaticien-amateur, Programmeur et WebMaster.
CHAPITRE 12 : DÉSTRUCTURATION (DESTRUCTURING) ET
GESTION DES PARAMÈTRES :
La déstructuration est un moyen pratique d’extraire des valeurs
contenues dans des objets ou des arrays, via les noms de leurs
propriétés [quelque soit l’ordre des propriétés dans chacun des
objets].
La déstructuration est facile à comprendre quand on part du concept que les arrays et les objets sont des pointeurs sur adressesmémoire.
Par exemple :
let ob = { nom: 'Kortof', age: 45 }; // (A)
let { age: va , nom: vn } = ob; // (B).
console.log(vn+" "+va); // Kortof 45
Concernant les littéraux d’objet, ci-dessus dans (A) on crée le
littéral d’objet jetob avec deux propriétés, nom et age. L’objet ob
est donc un pointeur sur les propriétés nom et age qui en réalité
représentent des offsets à partir de l’adresse-mémoire pointée par
ob, cette adresse étant aussi celle du premier élément (ici propriété) de l’objet. Donc dans une array par exemple, l’adresse pointée
par l’array ar correspond à celle de son premier élément ar[0]
Variables & Functions
-2/6-
jeudi, 4. avril 2019 (10:49 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
(vous pouvez facilement visualiser cette notion avec le langage C).
Dans (B) on définit des couples « prop , var », prop étant le nom
de la propriété dans l’objet ou l’array de référence ou objet/array
modèle = source [= les données à déstructurer] (A), et var le nom
[de la variable] par lequel on peut accéder (en dehors de ob) à
cette propriété [de l’objet de référence dans (A)]. (B) = cible ou
target [= le modèle utilisé pour la déstructuration], respecte la
syntaxe array ou littéral d’objet de (A), mais l’ordre des propriétés
est arbitraire, pas obligatoirement celui dans (A), les noms des
propriétés sont respectés.
Dans la déstructuration des littéraux d’objet donc, les propriétés
de l’objet de droite sont accessibles via des noms (ou id) des variables de l’objet de gauche.
let [p, q] = ['a','b']; // (C) p='a'; q='b'
console.log(p+" "+q); // a b
Concernant les arrays, l’array des deux variables [p, q] est
égale à l’array des valeurs ['a','b'], et donc les deux arrays
pointent la même adresse-mémoire, et donc les variables p et q
de l’array de gauche sont égaux aux valeurs équivalentes à leurs
positions respectives à l’array de droite ('a' et 'b').
Dans la déstructuration des arrays donc, les éléments (ou
membres) de l’array de droite sont accessibles par des noms (id)
des variables de la même position dans l’array de gauche.
Syntaxes de la destructuration :
// Déclarations de variable :
Variables & Functions
-3/6-
jeudi, 4. avril 2019 (10:49 )
J.D.B. DIASOLUKA Nz. Luyalu
let [var] = [value];
const [var] = [value];
var [var] = [value];
JavaScript Tome-VI
// Affectations (Assignments):
[var] = [value];
// Définitions de Paramètre :
function f([param]) { · }
f([arg]);
Autres exemples :
<script type="text/javascript"> "use strict";
let [x] = ['ax']; // 1 [Variable], 1 [val]
console.log(x+" "+[x]); // ax ax
// > x -> "ax"
// > [x] -> Array [ "ax" ]
const [xy] = ['axy',5]; // 1 [Variable], 2 [val]
console.log(xy+" "+[xy]); // axy axy
// > xy -> "axy"
// > [xy] -> Array [ "axy" ]
// > xy[0] -> "a"
// > xy[3] -> undefined
const [vw,yz] = ['avw']; // 2 [Variables], 1 [val]
console.log(vw+" "+[vw]+" "+yz+" "+[yz]);
// avw avw undefined
// > vw -> "avw"
// > [vw] -> Array [ "avw" ]
// > vw[0] -> "a"
// > vw[3] -> undefined
const [xy1,xy2] = ['axy1',5]; // 2 [var], 2 [val]
console.log(xy1+" "+[xy1]+" "+xy2+" "+[xy2]);
// axy1 axy1 5 5
// > xy1 -> "axy1"
// > [xy1] -> Array [ "axy1" ]
Variables & Functions
-4/6-
jeudi, 4. avril 2019 (10:49 )
J.D.B. DIASOLUKA Nz. Luyalu
// > xy2 -> 5
// > [xy2] -> Array [ 5 ]
JavaScript Tome-VI
let v = ['vvv']; // Var Array ordinaire
console.log(v+" "+[v]); // vvv vvv
// > v -> Array [ "vvv" ]
// > [v] -> Array [ […] ]
// […]
//
0: Array [ "vvv" ]
//
length: 1
//
__proto__: Array []
//
// > [v][0] -> Array [ "vvv" ]
// > v[0] -> "vvv"
let w = 'www'; // Var String ordinaire
console.log(w+" "+[w]); // www www
// > w -> "www"
// > [w] -> Array [ "www" ]
// > [w][0] -> "www"
// > w[0] -> "w"
let obj = {
a: [{ foo: 123, bar: 'abc' }, {}],
b: true
}; // (A)
let { a: [{foo: f}] } = obj; // f = 123 // (B)
// (A) obj = littéral d'objet à deux propriétés
dont :
// a = array à 2 littéraux d'objet, et
// b = une booléenne.
//
// (B) Déstructuration appariant f à 123 de foo
// de l'objet obj.
console.log(f); // 123
let {length : len} = 'abc'; // len = 3
console.log(len); // 3
let {toString: s} = 123;
// s = Number.prototype.toString
Variables & Functions
- 5 / 6 - jeudi, 4. avril 2019 (10:49 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-VI
console.log(s); // function toString()
</script>
Variables & Functions
-6/6-
jeudi, 4. avril 2019 (10:49 )