TD module

Mise en place d'une application

correction 

Application WEB !

 

Objectifs

Transformer notre code en une application.

Découvrir la notion de module.

Définir la fonction createArray

/**
 *
 * @param {number} start The start of the createTab.
 * @param {number} end The end of the createTab.
 * @param {number} step The value to increment or decrement by.
 * @param {boolean} [fromRight] Specify iterating from right to left.
 * @returns {Array} Returns the createTab of numbers.
 */

createTab(10,20) = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

createTab&(0,9,3) = [ 0, 3, 6 ]

createTab(0,9,3,true) = [ 6, 3, 0 ]

Transformer notre code en une application : http://localhost:3000/

TD : Min Max

 

// pour un tableau simple

const t = [20, 12, 2, 12];

const [min, max] = t.reduce(([min, max], cur) => {

    if (min > cur) min = cur;

    if (max < cur) max = cur;

    return [min, max];

}, [Number.MAX_VALUE, Number.MIN_VALUE]);

code

//tableau de pers

const etudiants = [

    { nom: "superA", note: 20 },

    { nom: "superB", note: 12 },

    { nom: "superC", note: 2 },

    { nom: "superD", note: 12 },

];

//retourne un tableau de valeurs

const [minE, maxE] = etudiants.reduce(([min, max], { note }) => {

    if (min > note) min = note;

    if (max < note) max = note;

    return [min, max];

}, [Number.MAX_VALUE, Number.MIN_VALUE]);

code

//retourne un tableau de pointeurs

const [dernier, major] = etudiants.reduce(([dernier, premier], etudiant) => {

    if (dernier.note > etudiant.note) dernier = etudiant;

    if (premier.note < etudiant.note) premier = etudiant;

    return [dernier, premier];

}, [etudiants[0], etudiants[0]]);

code

//retourne un objet

const { dernier, major } = etudiants.reduce(({ dernier, major }, etudiant) => {

    if (dernier.note > etudiant.note) dernier = etudiant;

    if (major.note < etudiant.note) major = etudiant;

    return { dernier, major };

}, { dernier: etudiants[0], major: etudiants[0] });

code

Dans le grand bain des applications WEB

Clonage

Express

Pug

Heroku

Mongodb

Mongoose

En action

My blog !

Vidéo

Un petit tour du côté des méthodes !

 

Some, every

rappel : destructuration

map

   

   

filter

  

reduce

Some

 

some

Nous connaissons la méthode some ?

La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.

1. const T = [41, 23, 65, 43, 57],
2.    test = (element) => element % 2;
3. 
   
4. console.log(t.some(test));

code

Que recherchons nous dans ce tableau avec la fonction test ?

Modifier le code précédent, sans utiliser la négation, pour tester si un élément du tableau est pair.

Donner le code de la fonction some qui teste si au moins un élément du tableau vérifie la fonction test.

1. const T = [41, 23, 65, 43, 57];
2.    test = (element) => element % 2;
3. 
   
4. console.log(some(T,test));

Pourrait on appliquer de telle fonction à des tableaux de vidéos ?

Préparation au DS

 → Cours

• Rappelez le corps de la fonction filtre vue en cours filtre(array, test)
• Donner le corps de la fonction some(array, test) qui teste si au moins un élément du tableau en argument passe le test implémenté par la fonction fournie.

→ Exercice

Soit la BD d'animaux, comprenant des 🐶 et des 🐱.

Animals = [

        {name: 'Butters', age: 3, type: '🐶'},

        {name: 'Lizzy', age: 6, type: '🐶'},

…

        {name: 'Minou', age: 10, type: ''🐱"}, ];

La fonction getAges, calcul la somme des âges des chiens en équivalent humain !

1. function getAges(array) {
2.     let sum = 0;
3.     for (var i = 0; i < array.length; i++){
4.       if (array[i].type === 'dog'){
5.         let tempAge = array[i].age;
6.         sum += (tempAge * 7);
7.       }
8.     }
9.    return sum; 
10. }

• Réécrire la fonction getAges sous la forme let ageDogs = Animal.filter(?).map(?).reduce(?);
• Donnez également ageCats (pensez à minimiser la taille du code).

→ Exercice

Soit la BD des régions Française

const Régions = [{name: "IDF", villes: [26 200,  120000, ...]}

            , {name: "PACA", villes: [116 703, 65000, ... ]},

...

]

villes est un tableau du nombre d'habitants 👫 pour les villes de plus de 10 000 habitants.

• Trouver les régions qui ont au moins une ville au dessus de 1 000 000 👫.
• Donner les deux régions, parmi celles qui ont au moins une ville à plus de 120 000👫, les villes les moins peuplées.
• Donner un tableau donnant l'écart de population entre la ville la plus peuplée et la moins peuplée pour chaque Région.

TD

code

Ecrire le code pour créer un nouveau tab

Ecrire le code pour modifier le tableau existant

Je suis végétarien !

 

Nous allons utiliser notre fonction de filtre pour retirer les ingrédient qui n'appartiennent pas à un ensemble regroupant ["🐷", "🐑","🐔"].

Nous reviendrons sur cet objet Ensemble qui est très facile d'utilisation.

en action 

5 fruits - 5 légumes par jours

 

Commençons l'aventure "5 fruits par jours" en coupant les fruits en 2.

Répétons sur chaque fruit, l'action de 🔪. Pour cela nous utilisons notre fonction forEach !

voir code "Ora🔪"

Je vous laisse découvrir le sens de l'action : `${fruit.substring(0, fruit.length / 2)}\ud83d\udd2a`

Amélioration :

Nous pourrions à la place de valeur "2" (pour couper les fruits en deux), mettre une variable pour pouvoir couper les fruits en des quartiers de taille variable.

Code

lecture

foreach

Plus jamais de boucles for ! Génial

Voici les dupont/dupond

Nous voulons obtenir après filtrage et transformation le tableau des DUPONT.

Compléter les codes des fonctions forEach, trans, filter

   

const dupontd = [

    { name: "Dupont", sex: "m" },

    { name: "DUPONT", sex: "m" },

    { name: "duPont", sex: "f" },

    { name: "dupond", sex: "f" }

];

--------------------------------------- A compléter ----------------------------

function forEach(t, fx) {

   

}

function trans(t, fx) {

   

}

function filter(t, fx) {

   

}

----------------------------- les callbacks ------------------------------

function upperCase(pers) {

    pers.name = pers.name.toUpperCase();

}

function isDupont(pers) {

    return pers.name == "DUPONT"

}

function civilite({ name, sex }) {

    sex == 'm' ? name = `Monsieur ${name}` : name = `Madame ${name}`

    return { name }

}

----------------------------------- APPELS -------------------------------------

forEach(dupontd, upperCase);

const dupontFamily = filter(dupontd, isDupont)

const tid = trans(dupontFamily, civilite)

Help : Projet

  Les objets, tableaux et pointeurs !

Soit tabPers un tableau d'objets, nous allons dessiner 

sa représentation à l'aide de Pythontutor.

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

Solution du DM : unique !

 Définir une fonction unique recherchant les valeurs uniques d'un tableau.

1. const t = [2,0,2,0,2,3];
2. const u = unique(t);

💥Proto de SuperDupont

Unique !

Nous allons donner un ensemble de fonction recherchant les valeurs uniques d'un tableau.

1. let t = [2,0,2,0,2,3];
2. 
   
3. unique(t);

Nous découvrirons les méthodes et propriétés suivantes :

Array.isArray

array.length

array.splice

array.indexOf

array.push

array.includes

Nous pourrons comparer le temps d'exécution des différentes propositions de code.

1. let t = [2,0,2,0,2,3];
2. 
   
3. console.time("time");
4. unique(t);
5. console.timeEnd("time");

Nous pourrions également integrer un test élémentaire sur le tableau en argument

1.   if (!Array.isArray(arr)) {
2.     throw new TypeError('array-unique expects an array.');
3.   }

Les écritures suivantes ne sont pas commentées

1. function unique(t){
2.   let cur = t.length;
3.   while (--cur){
4. 
   
5.   for (let i=0; i< cur; i++){
6.       if (t[i] == t[cur]){
7.           t.splice(cur,1);
8.           break;
9.       }
10.   }
11.   }
12. }

code

1. function unique(arr) {
2.   let i = -1;
3.   while (i++ < arr.length) {
4.     var j = i + 1;
5. 
   
6.     for (; j < arr.length; ++j) {
7.       if (arr[i] === arr[j]) {
8.         arr.splice(j--, 1);
9.       }
10.     }
11.   }
12.   return arr;
13. };

code

1. function unique(array) {
2.   let passed = [];
3.   for (let i=0 ; i < array.length; i++) {
4.     if (array.indexOf( array[i]) === i)
5.       passed.push(array[i]);
6.   }
7.   return passed;
8. }

code

code

Dans quelques temps, nous apprendrons des méthodes sur les tableaux très utiles

1. array.reduce
2. array.filter

1. function unique(t){
2.   
3.   let u = t.reduce(function(a,c){
4.     if (!a.includes(c)){
5.       a.push(c)
6.     }
7.     return a;   
8.     },[])
9.   return u;
10. }

code

code

1. function unique(value,index,tab){
2.   return tab.indexOf(value) === index;
3. }
4. 
   
5. console.time("while")
6. t = t.filter(unique);
7. console.timeEnd("while");

code

Finalement, SuperDupont pourra toujours nous impressionner par l'utilisation de nouveaux

 types d'objet SET et MAP.

1. console.time("while")
2. let v = [...new Set(t)];
3. console.timeEnd("while");

code

Mais que dire des tableaux contenant des objets ! 

1. const T = [
2.     { name: 'dupont', id:22 },
3.     { name: 'dupont', id:20 },
4.     { name: 'dupond', id:21 },
5.     { name: 'dupond', id:21 },
6.   ];
7. const unique = [];
8. const map = new Map();
9. for (const item of T) {
10.     if(!map.has(item.id)){
11.         map.set(item.id, true);    // set any value to Map
12.         unique.push({
13.             id: item.id,
14.             name: item.name
15.         });
16.     }
17. }
18. console.log(unique)

code