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

La decomposition

 

Amélioration du code

 

Discussion autour des boucles

Amélioration du code

La structuration de valeurs dans un tableau, nécessite une boucle pour réaliser un parcours des valeurs.

Exemple : 

Affichons simplement les éléments d'un tableau :

1. let array = [1, 2, 3];
2. for (let i = 0; i < array.length; i++) {
3.   let current = array[i];
4.   console.log(current); // affichage
5. }

Imaginons l'affichage des valeurs comme une action.

1. for (let i = 0; i < array.length; i++) {
2.   let current = array[i];
3.   actionAffichage(current); // affichage
4. }

Affichage des positifs

Pour afficher les valeurs positives, il est facile de créer une condition ; la fonction précédente devient.

1. for (let i = 0; i < array.length; i++) {
2.   let current = array[i];
3.   if (current>0) actionAffichage(current);
4. }

ou

1. for (let i = 0; i < array.length; i++) {
2.   let current = array[i];
3.   actionAffichagePositif(current);
4. }

Affichage des Négatifs

Pour afficher les valeurs négatives, il est facile de créer une condition ; la fonction précédente devient.

1. for (let i = 0; i < array.length; i++) {
2.   let current = array[i];
3.   actionAffichageNégatif(current);
4. }

Bilans

Pour chaque type d'affichage, il est nécessaire de redéfinir la boucle.

Améliorations

Nous allons encapsuler le code de la boucle dans une fonction forEach. 👿

Il nous reste à réfléchir sur le passage des actions (positif, négatif ...) 

comme paramètres.

Ainsi,  "afficher quelque chose" peut être vu comme une fonction.
Les fonctions étant des variables et comme les variables peuvent être passées en paramètres, on peut passer "afficher quelque chose" à une fonction.

Ainsi, la fonction "afficher quelque chose" sera passée en paramètre à la fonction forEach.

Résumé des codes

Affichage	function affVal(v){    console.log(`val tab : ${v}`) }
Affichage Positif	function AffPositif(v){    if (v>0) console.log(` val positif : ${v} `); }
Boucle sur le tableau	function forEach(array, fx) {   for (var i = 0; i < array.length; i++)//for of     fx(array[i]); }
Appel	forEach(T, AffPositif);
Appel anonyme	forEach(T, function (v){   console.log(`-> tab : ${v}`); });

En Action