dupontES6: 2017

EX1

let max = arr.reduce(function(a,c) { return (a.length> c.length)?a:c;});

EX2

EX3

let calcul = function (rayon) {

const PI = 3.14;

let perimetre = 2*PI*rayon,

volume = 4/3*PI*Math.pow(rayon,3),

diametre = rayon+rayon;

return {perimetre,volume,diametre};

};

let {perimetre,volume} = calcul(val);

EX4

function foo ( ...args ) {

args = args.filter( v => v % 2 == 0);

console.log( args );

}

EX5

console.log(amis.reduce(function(prev, curr) {

return [...prev, ...curr.prenoms];

},[]););

window.getComputedStyle

window.getComputedStyle donne les propriétés d'un éléments.

Remarque

Le plus grande clé peut être obtenue avec :

Math.max(...Object.keys(cssObj).map(v=>v.length))

Décomposition : fonction fléchée

Définition

let f = ([a, b] = [10, 10], {x: c} = {x: a - b}) => a + b + c;

Paramètres

f([2,3],{x:10});

f = ([a, b], {x: c}) => a + b + c;

// 15 = 2 + 3 + 10

Paramètres

f([2,3]);

([a, b], {x: c} = {x: a - b}) => a + b + c;

// 4 = 2 + 3 + ( 2 - 3 )

Paramètres

f();

f = ([a, b] = [10, 10], {x: c} = {x: a - b}) => a + b + c;

// 20 = 10 + 10 + ( 10 - 10 )

for of

let tabPers = [ { nom: "Dupont", sex : "f", }, { nom: "Brusel", sex : "h", }, { nom: "Dupont", sex : "f", }, ];

for(let v of tabPers) { console.log(`${typeof v}, ${v instanceof Object}`)}

Etude de v

Déboggeur

Rappels sur les objets, tableaux et pointeur !

let tabPers = [ { nom: "Dupont", sex : "f", }, { nom: "Brusel", sex : "h", }, { nom: "Dupont", sex : "f", }, ];

ou

let tabPers = [ {
nom: "Dupont",
sex : "f",
},
{
nom: "Brusel",
sex : "h",
},
{
nom: "Dupont",
sex : "f",
},

];

Dessiner le résultat du code

let a = tabPers[1];

Dessiner le résultat du code

let a = tabPers[1];

let b = a["nom"];

Dessiner le résultat du code

let New = tabPers;

Dessiner le résultat du code

let New = tabPers;

New[2] = tabPers[0] = New[1];

code transf

let tabPers = [ {
nom: "Dupont",
sex : "f",
},
{
nom: "Brusel",
sex : "h",
},
{
nom: "Dupont",
sex : "f",
},
];

function toUpperName(person) {
person.nom = person.nom.toUpperCase();
return person;
}

function transf(array, fx) {
let passed = [];

for(let v of array)
passed.push(fx(v));

return passed;
}
let T = transf(tabPers,toUpperName);

Afficher T et tabPers

solution : code

code tranf

Rappel :
Object.assign({}, obj) permet de cloner l'obj.

code

let tabPers = [ {
nom: "Dupont",
sex : "f",
},
{
nom: "Brusel",
sex : "h",
},
{
nom: "Dupont",
sex : "f",
},
];

function clone(person) {
return Object.assign({},person)
}

function transf(array, fx) {
let passed = [];

for(let v of array)
passed.push(fx(v));

return passed;
}
let T = transf(tabPers,clone);

Afficher T et tabPers

solution : visualisation

code transf

Afficher tabT et tabPers

solution

Code filtre

let tabPers = [ {
nom: "Dupont",
sex : "f",
},
{
nom: "Brusel",
sex : "h",
},
{
nom: "Dupont",
sex : "f",
},
];

Le tableau tabPers

Afficher tabfiltre et tabPers

Faire DS

DS : Fonction as parameter

Aide au TD

http://duponttd.blogspot.fr/2017/10/projet-some-help.html

Données externes : comment les récupérer

Comment procéder facilement :

Vous avez votre tableau d'objet à déclarer dans un fichier js

[
{name: "Dupont"},
{name: "Dupond"}

]

Pour le transfert vous utilisez :

let bonPourTransfert = JSON.stringify([[
{name: "Dupont"},
{name: "Dupond"}
])

Dans votre fichier utilisant les données que vous récupérer, il faut écrire :

tabObj = JSON.parse(bonPourTransfert) ;

Utilisation de la bibliothèque Jquery pour la mise en oeuvre.

$.ajax({type: "GET",
 url: "https://fichier.js", // adresse de de votre fichier.js
 dataType: "json",          // format
 success: handleData        // votre tabObj           
 });

En action : Dans cette exemple, les données se trouvent dans un fichier JS externe.

JSON ?

Les données sur lesquelles vous travaillez ne se trouvent généralement pas dans le fichier JS.
Elles sont dans une base de données. Pour être manipulées, les données seront extraites.

JSON est le format de transfert de données ( XML en est un autre).

Passage d'un objet JS à un objet JSON

const profJS = {
nom: "Dupont",
prenom: "denis"
};

profJSON = JSON.stringify(profJS);

console.log(profJSON); //{"nom":"Dupont","prenom":"denis"}

Passage d'un objet JSON à un objet JS

Destructuring : pour renommer des variables !

Nous pouvons renommer des varibles lors de la destructuration :

const doc = document.documentElement;

const { clientWidth : largeur } = doc;

console.log( `La largeur = ${largeur}px` );

En action

Test

Vous pourrez arrêter de travailler si vous me donnez le résultats de

DOM : for of

Il est facile de faire une boucle sur un ensemble de balises.

// selection des nodes 
const nodes = document.querySelectorAll("selecteurs");

for(let item of nodesInput) {
   // action sur item
}

DOM : ...

Il est facile de transformer une liste de nœud en tableau (voir array.from)

// select input
const eltsInput = document.querySelectorAll("input");

// utilisation de spread pour créer un array
const nodesArray = [...eltsInput];

DOM : destructuring

Pour accéder à un élément par son id, on utilise généralement document.getElementById().

utilisation de la déstructuration

La déstructuration vous permet d'aller plus loin.

Considérons le code HTML

On peut avoir accès à <input ... id="date...> par window.date ou date directement.

La déstructuration nous permet de modifier facilement l'identifiant.

Par exemple, le code suivant permet de déclarer day comme l’élément <input ... id="date...>

const { "date": day } = window;

Exemple de code

Inconvénients

lecture

Projet : opérateur ( cas de la déstructuration)

Utilisation de la déstructuration

Modifier le code pour déstructurer le retour de la fonction ! Autrement dit, une fonction (que je peux ne pas avoir écrite) renvoie un objet contenant plein de valeurs (surface, périmètre, volume ...).
La déstructuration me permet de récupérer "uniquement" le périmètre, ou le volume et la surface.

See the Pen Projet cours rayon by dupont (@dupontcodepen) on CodePen.

Projet : opérateur

Pour ne pas avoir de problème de conversion de type vue dans un projet précédent nous modifions le code HTML

<input type="number" id="rayon" value="0" min="0" max="100" step="any"/>

Et, nous utilisons valueAsNumber pour récupérer la valeur.

Ajouter un opérateur pour résoudre le problème d'un champ vide (mettre valeur à Zéro).

Projet : type 2

Tester et corriger le code pour afficher correctement la valeur du diamètre.

Projet : type 1

Définir des constantes et variables.

boucle

Articles :
Boucles sur un tableau !
Projet
Ecrire sa fonction forEach !

Aide TP structure de contrôle

Etudier :

valueAsNumber permet de récupérer une valeur d'un input.

Code en action↗

Amélioration du code

Un cas délicat : champ vide !

En action valueAsNumber

Code En Action

Closure : one more !

Article

Vous pouvez commencer par lire un article général sur les closures : Article sur les closures

Code

Nous pouvons examiner trois exemples de code et le résultat dans le débogueur :

http://jsbin.com/xuqika/2/edit?html,js,console,output

function f(){
console.log(C);
}
f();
let C = "c";

A l'appel de la fonction C est inconnue !

{

let U = "je suis oubliée par la closure";

function f(){

console.log(C);

}

let C = "c";

} // bloc

f();

A l'appel de la fonction C est connue. Or le bloc n'est plus accessible (on ne pourrait afficher U en dehors). Cela semble magique ...

http://jsbin.com/xuqika/3/edit?html,js,console,output

La "closure" est intelligente (elle ne garde vraiment que les variables utiles)
http://jsbin.com/xuqika/3/edit?html,js,console

Historiquement, avant l'arrivée des blocs, nous pouvions générer une closure de la façon suivante :

function A() {
let a = " a ";
function B() {
console.log (a);
}
return B;
}

let closure = A();
closure();

Le fermeture (closure) est constituée de la fonction B et de son environnement. Ainsi, l'exécution de la fonction closure permet d'atteindre la variable a.

Le comportement est surprenant car :
When you declare a variable in a function, you can access this variable only within the function. You can't get this variable once you get out of it.

Voici la vue du débogger.

JS Bin on jsbin.com

map

const liste = [
{age:10,arg:2,exp:2},
{age:1,arg:1},
{age:100,arg:3},
];

function AgeArg({arg,age}){
return age*arg;
}

let T = liste.map(AgeArg);

console.log(T);

reduce : destructuring

const liste = [
{age:10,arg:2,exp:2},
{age:1,arg:1},
{age:100,arg:3},
];

function AgeArg(acc,{arg,age}){
return acc+ age*arg;
}

let T = liste.reduce(AgeArg,0);

console.log(T); //321

for_of

const liste = [
{age:10,arg:2,exp:2},
{age:1,arg:1},
{age:100,arg:3},
];

for_of

classique

for (l of liste){
console.log(l.age)
}

destructuring

for ({arg,age} of liste){
console.log(arg*age)
}

foreach array of objet

const liste = [
{age:10,arg:2,exp:2},
{age:1,arg:1},
{age:100,arg:3},
];

forEach

classique

liste.forEach(function(v,i){
console.log(v.arg)
})

arrow

liste.forEach((v,i)=>{
console.log(v.arg)
})

destructuring

liste.forEach(({age,arg},i)=>{
console.log(arg*age)
})

array Random

Array.from({length: Math.random()*9}, (v, k) => k);

Ne pas utiliser V = value qui n'est pas définie

Game !

https://jsbin.com/rumapib/5/edit?js,output

JS Bin on jsbin.com

String literal

let t = ["abcdefghi"];

let MyA = t[0].split("");

let v = MyA.reduce((p,n,i) => (i%3===0) ? (`
${p}

${n}`) : `${p} ${n}`);

JS Bin on jsbin.com

Map en action

const allowedKeys = new Map([
[37, 'left'],
[38, 'up'],
[39, 'right'],
[40, 'down']
]);
document.addEventListener('keydown', function(e) {
let arrow = allowedKeys.get(e.keyCode);
if (arrow) document.querySelector("#Key").innerHTML +=`<br/>${arrow}`;
e.preventDefault();
return false;
});

JS Bin on jsbin.com

simuler une boucle avec un itérateur

let a = ["d","e","n","i","s"];

for (let val, ret, it = a[Symbol.iterator]();
(ret = it.next()) && !ret.done;
) {
val = ret.value;
console.log( val );
}

"d" "e" "n" "i" "s"

l'opérateur ...

le comportement de l'opérateur ... dépend de comment et où il est utilisé.

spread	gathers
function fx(x,y,z) { console.log( x, y, z ); } fx( ...[1,2,3] );	function fx(x, y, ...z) { console.log( x, y, z ); } Fx( 1, 2, 3, 4, 5 );

Plus d'infos »

portee

regardez la vidéo et tenter d'évaluer la valeur d'une expression.

Les deux codes suivants sont équivalents

ES2015	Before ES2015
let x = "G"; function f() { console.log(x); } { let x = "B"; console.log(`x = ${x}`); f(); }	"use strict"; var x = "G"; function f() { console.log(x); } { var _x = "B"; console.log("x = " + _x); f(); }

A la node.js

Pages

EX1

EX2

EX3

EX4

EX5

Définition

Paramètres

Paramètres

Paramètres

Etude de v

Déboggeur

Dessiner le résultat du code

Dessiner le résultat du code

Dessiner le résultat du code

Dessiner le résultat du code

Afficher T et tabPers

code

Afficher T et tabPers

Afficher tabT et tabPers

Afficher tabfiltre et tabPers

Utilisation de la bibliothèque Jquery pour la mise en oeuvre.

Passage d'un objet JS à un objet JSON

Passage d'un objet JSON à un objet JS

En action

utilisation de la déstructuration

Exemple de code

Inconvénients

Etudier :

Amélioration du code

Article

Code

for_of

classique

destructuring

forEach

classique

arrow

destructuring