dupontES6: 2021

Révisions

reduce

Object.entries

Vous disposez d'un tableau d'articles. un article = {nom: String, cat: String, prix: Number}

data = [

{nom: 'coka', cat: 'Boisson', prix: 4}

{nom: 'farine', cat: 'Epicerie', prix: 4}

{nom: 'carotte', cat: 'Legume', prix: 9}

{nom: 'cafe', cat: 'Petit-dej', prix: 4}

{nom: 'jus de fruit', cat: 'Boisson', prix: 2}

{nom: 'choux', cat: 'Legume', prix: 2}

{nom: 'olives', cat: 'Epicerie', prix: 60}

{nom: 'veau', cat: 'Boucherie', prix: 40}

{nom: 'poireau', cat: 'Legume', prix: 2}

];

Donner

Le nombre d'articles.

Ajouter un attribut facture sous la forme prix.toLocaleString("fr-FR", { style: "currency", currency: "EUR" } pour chaque article

{ nom: 'carotte', cat: 'Legume', prix: 9, facture: '9,00 €' },

Afficher le tableau par ordre alpha des articles.

Les articles d'une "cat" donnée.

[
{ nom: 'carotte', cat: 'Legume', prix: 9, facture: '9,00 €' },
{ nom: 'choux', cat: 'Legume', prix: 2, facture: '2,00 €' },
{ nom: 'poireau', cat: 'Legume', prix: 2, facture: '2,00 €' }
]

Le coût du panier (total achat).

127

L'ensemble des "cat".

[ 'Petit-dej', 'Legume', 'Boisson', 'Epicerie', 'Boucherie' ]

Un objet donnant par "cat" le nombre d'articles.

{ 'Petit-dej': 1, Legume: 3, Boisson: 2, Epicerie: 2, Boucherie: 1 }

La "cat" qui a le plus d'articles.

{Legume: 3}

Un objet ou tableau donnant par "cat" un tableau d'articles.

[
'Petit-dej': [ 'cafe' ],
Legume: [ 'carotte', 'choux', 'poireau' ],
Boisson: [ 'coka', 'jus de fruit' ],
Epicerie: [ 'farine', 'olives' ],
Boucherie: [ 'veau' ]
]

Un objet donnant par "cat" un tableau des prix des articles.

[
'Petit-dej': [ 4 ],
Legume: [ 9, 2, 2 ],
Boisson: [ 4, 2 ],
Epicerie: [ 4, 60 ],
Boucherie: [ 40 ]
]

Un tableau d'objet avec par cat le total des prix des articles

[{"categorie":"Petit-dej","total":4}
,{"categorie":"Legume","total":15.3}
,{"categorie":"Boisson","total":2.4}
,{"categorie":"Epicerie","total":64}
,{"categorie":"Boucherie","total":40}]

Donner le coût du panier à partir du tableau précédent.

127

fetch GitHub fils

<!DOCTYPE html>

<html lang="en">

<head>
</head>

<body>
    <script>
        const urlTest = 'https://raw.githubusercontent.com/dupontdenis/revision/master/test.json'

        const load = async () => {
            try {
                const response = await fetch(urlTest);
                const data = await response.json();
                //return or directly insertToDOM
                return data;
            } catch (error) {
                console.log(`file?: ${error}`)
            }
        }
        load().then(({ products }) => {
            products.forEach(({ Name, Price }) =>
                document
                    .body
                    .insertAdjacentHTML('afterbegin', `<p> ${Name}: ${Price} </p>`))
        });

    </script>
</body>

</html>

delete

const titi = "TITI";

    const body = {"toto":"TOTO",titi,"_id":"23"}

    delete body._id;

    const thing = {...body};

    console.log(thing)

PS C:\Users\denis.dupont\OneDrive - Universite Evry Val d'Essonne\Bureau\testgenerateur> node .\test.js { toto: 'TOTO', titi: 'TITI' }

lodash

https://lodash.com/docs/4.17.15#pullAllBy

Exemples

const cours = { html: 12, css: 2, JS: 30 };

Object.entries(cours)

> Array [Array ["html", 12], Array ["css", 2], Array ["JS", 30]]

Object.fromEntries(Object.entries(cours))

> Object { html: 12, css: 2, JS: 30 }

En action

const cours = { html: 12, css: 2, JS: 30 };

const  choix = Object.fromEntries(

  Object.entries(cours)

  .filter(([ _, val ]) => val>10 )

);

console.log(choix); // > Object { html: 12, JS: 30 }

En action

const words = ["Beau", "cool", "Ange", "Ananas", "ballon"]; const alpha = words.reduce((a, x) => { const l = x[0].toUpperCase() if(!a[l]) a[l] = []; a[l].push(x); return a; }, {}); const glosaire = Object.fromEntries( Object.entries(alpha) .sort(([a] , [b]) => a<b?-1:1)); console.log(glosaire); //

[object Object] {
A: ["Ange", "Ananas"],
B: ["Beau", "ballon"],
C: ["cool"]
}

regexp

function normalizeDataKey(key) {

    return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`);
  }

  console.log(normalizeDataKey("denisDupont")) // denis-dupont

destructuration, map

const arr = [{

    id: 1,
    name: 'bill'
  }, {
    id: 2,
    name: 'ted'
  }]
  
const result = arr.map( ({id:value,name:text}) => ({ value, text }));
  console.log(result)

` `

function test(lit,...sub){

    console.log(lit);
    console.log(sub);

}
const nom = "dupont"
const adj = "cool"

test `denis ${nom} est ${adj}`;

modules

index.html

src

index.js

query.js

index.html

<!doctype html>
<html>
<head>
    <title>My project</title>
</head>
<body>
    <script src="./src/index.js" type="module"></script>
</body>
</html>

index.jsimport retrieveContent from './query.js';

console.log("here they are");
async function showContent() {
  try {
    const content = await retrieveContent();
    let ul = document.createElement('ul');
    content.forEach(element => {
       let li = document.createElement('li');
       li.innerText = element;
       ul.appendChild(li);

    });
   
    

    document.getElementsByTagName('body')[0].appendChild(ul);
  } catch (e) {
    console.log('Error', e);
  }
}

showContent();

query.js
export default async function retrieveContent() {
    const url = "https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1";
  
    const response = await fetch(url);
    return response.json();
  }
  

before/after

/* On ajoute un coeur avant les liens */
a::before {
  content: "♥";
}

lien

Server nodejs

sous powershell

> $env:PORT="8000"

> echo $env:PORT

8000

const http = require('http')

const port =  process.env.PORT;

const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/html')
  res.end('<h1>Hello, World!</h1>')
})

server.listen(port, () => {
  console.log(`Server running at port ${port}`)
})

In Windows Command-Prompt the syntax is

>set PORT="8000"

>echo %POST%

To get a list of all environment variables enter the command set To send those variables to a text file enter the command set > filename.txt

regexp

const string = 'Favorite GitHub repos: dupontdenis/bureauwindows dupontdenis/HTML_TD3 v8/v8.dev',
regex = /\b(?<owner>[a-z0-9]+)\/(?<repo>[a-z0-9\.]+)\b/g;
for (const match of string.matchAll(regex)){
console.log(`${match[0]} at ${match.index} with '${match.input}'`);
console.log(`owner: ${match.groups.owner}`);
console.log(`repo: ${match.groups.repo}`)
}

const array = [1,2,3,4,5,6];
const x = array.slice(0).reduce((acc, curr, i, tab) => {
if (acc>5) {
tab.splice(1);
console.count(`tab = ${tab}`); //ne marche pas sur pythontutor
return acc;
}
console.count(`tab = ${tab}`);
return (acc += curr);
});
console.log("total ", x, "\noriginal Arr: ", array);

code

MSDN : vidéos

https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=nodebeginner-ch9-cxa

dupontES6

Pages

groupBy

Révisions

fetch GitHub fils

Async wait Promise

delete

lodash

Object.fromEntries

Exemples

En action

En action

regexp

destructuration, map

` `

modules

index.html

index.js

query.js

before/after

Server nodejs

regexp

générateur

Correction test

this ?

Reduce : sortir du reduce !

MSDN : vidéos