diff --git a/D-chaines.md b/D-chaines.md
index a703aa890fbc3bf4baa3bc033086efbab06c3e91..53e4491cd57716c91a8712fa160f4c7f79c13357 100644
--- a/D-chaines.md
+++ b/D-chaines.md
@@ -69,7 +69,7 @@ let s3 = `Les étudiants de ${ getCurrentSchool() } sont les meilleurs`;
Même si nous n'avons pas encore vu comment manipuler la page html grâce à l'API DOM (chapitre 3), vous trouverez ci-dessous le code qui va permettre d'injecter notre balise `<a>` dans la page. A la fin de votre code, ajouter l'instruction suivante :
```js
- document.querySelector(".pizzasContainer").innerHTML = html;
+ document.querySelector('.pizzasContainer').innerHTML = html;
```
Cette instruction va avoir pour effet d'injecter le code HTML contenu dans la variable `html` à l'intérieur de la balise de classe CSS `"pizzasContainer"`.
diff --git a/E-tableaux-objets.md b/E-tableaux-objets.md
index 5cbba5343d4a6c8097094a79c140cf6a68df230e..d4058094ba7d8a6b1c6d44eb2417e0b3a591b639 100644
--- a/E-tableaux-objets.md
+++ b/E-tableaux-objets.md
@@ -6,28 +6,56 @@
## E.1. Manipulation des tableaux
-Initialiser un tableau nommé `data` avec 3 chaines de caractères : 'Regina', 'Napolitaine', 'Spicy'. Parcourir ce tableau afin de générer 3 liens sur le modèle de celui réalisé plus haut.
+Initialisez un tableau nommé `data` avec 3 chaines de caractères : 'Regina', 'Napolitaine', 'Spicy'. Parcourez ce tableau afin de générer 3 liens sur le modèle de celui réalisé plus haut.
-Utilisez les différentes méthodes de parcours des tableaux :
+Utilisez pour cela les différentes méthodes de parcours des tableaux :
1. Une boucle `for` classique
2. La méthode `Array.forEach` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
3. la méthode `Array.map` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map accompagnée de la méthode `Array.join` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join
+4. la méthode `Array.reduce` cf. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/reduce
-Le résultat obtenu sera identique dans les 3 cas :
+*NB: pour `forEach`, `map` et surtout `reduce` pensez à utiliser les arrow functions !*
+
+Le résultat obtenu sera identique dans les 4 cas :
<a href="images/readme/pizzaland-03.jpg"><img src="images/readme/pizzaland-03.jpg" width="80%"></a>
## E.2. Les Objets littéraux
-Modifier le tableau `data` : au lieu de 3 chaînes de caractères, on va maintenant y mettre 3 objets littéraux de la forme suivante :
+Modifiez le tableau `data` : au lieu de 3 chaînes de caractères, on va maintenant y mettre 3 objets littéraux :
+
+Première pizza :
```js
{
nom: 'Regina',
base: 'tomate',
prix_petite: 5.5,
- prix_grande: 7.5
+ prix_grande: 7.5,
+ image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+}
+```
+
+Deuxième pizza :
+```js
+{
+ nom: 'Napolitaine',
+ base: 'tomate',
+ prix_petite: 6.5,
+ prix_grande: 8.95,
+ image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300&q=80'
}
```
-Modifier la boucle pour générer un code de ce type :
+Troisième pizza :
+```js
+{
+ nom: 'Spicy',
+ base: 'crème',
+ prix_petite: 5.5,
+ prix_grande: 8,
+ image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300&q=80'
+}
+```
+
+ModifieZ la boucle pour générer un code de ce type :
```html
<article class="media">
<a href="images/regina.jpg">
@@ -47,5 +75,7 @@ Le rendu final devra correspondre à ceci :
<a href="images/readme/pizzaland-04.jpg"><img src="images/readme/pizzaland-04.jpg" width="90%"></a>
+***Attention au formatage des prix** (examinez bien la capture d'écran) !*
+
## Étape suivante <!-- omit in toc -->
Si tout fonctionne, vous pouvez passer à l'étape suivante : [F. Compiler avec Babel](./F-babel.md)
\ No newline at end of file
diff --git a/F-babel.md b/F-babel.md
index faadb5bcc5c26bb61a054beb6b2772a7a26e3f68..3d9dd7561aa4eeb8dc48e682cc7c6dc807eb2ecc 100644
--- a/F-babel.md
+++ b/F-babel.md
@@ -57,3 +57,5 @@ L'installation de Babel se fait avec npm (Node Package Manager - l'outil fourni
```
+## Étape suivante <!-- omit in toc -->
+Si tout fonctionne, vous pouvez passer à l'étape suivante : [G. Filtres et tris](./G-filtres-tri.md)
\ No newline at end of file
diff --git a/G-filtres-tri.md b/G-filtres-tri.md
new file mode 100644
index 0000000000000000000000000000000000000000..d15d1c6975f8d90142f39ed0d33b3b52f4fb5788
--- /dev/null
+++ b/G-filtres-tri.md
@@ -0,0 +1,94 @@
+# TP 1 : G. Filtres, tri et destructuring <!-- omit in toc -->
+
+## Sommaire <!-- omit in toc -->
+- [G.1. Tri de tableau](#g1-tri-de-tableau)
+- [G.2. Système de filtres](#g2-système-de-filtres)
+- [G.3. Destructuring](#g3-destructuring)
+ - [Principe du destructuring](#principe-du-destructuring)
+ - [Destructuring et fonctions](#destructuring-et-fonctions)
+ - [Mise en application](#mise-en-application)
+
+## G.1. Tri de tableau
+A l'aide de la méthode sort de la classe Array (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort) triez les pizzas :
+1. Par ordre alphabétique
+
+ <a href="images/readme/pizzaland-05.jpg"><img src="images/readme/pizzaland-05.jpg" width="80%"></a>
+
+1. Par prix petit format croissant
+
+ <a href="images/readme/pizzaland-06.jpg"><img src="images/readme/pizzaland-06.jpg" width="80%"></a>
+
+
+1. Par prix petit format croissant et en cas d'égalité, par prix grand format croissant
+
+ <a href="images/readme/pizzaland-07.jpg"><img src="images/readme/pizzaland-07.jpg" width="80%"></a>
+
+
+
+## G.2. Système de filtres
+A l'aide de la méthode filter (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter), n'affichez que les pizzas dont :
+1. la propriété `base` est 'tomate'
+
+ <a href="images/readme/pizzaland-08.jpg"><img src="images/readme/pizzaland-08.jpg" width="80%"></a>
+
+1. le prix petit format est inférieur à 6€
+
+ <a href="images/readme/pizzaland-09.jpg"><img src="images/readme/pizzaland-09.jpg" width="80%"></a>
+
+1. le nom contient deux fois la lettre "i"
+
+ <a href="images/readme/pizzaland-10.jpg"><img src="images/readme/pizzaland-10.jpg" width="80%"></a>
+
+
+
+## G.3. Destructuring
+
+### Principe du destructuring
+Une des fonctionnalités ES6+ les plus pratiquées s'appelle le "destructuring".
+
+Le destructuring permet de facilement déclarer des variables dont les valeurs vont être remplies automatiquement par des propriétés d'objets. Prenons par exemple l'objet 'hodor' ci-dessous :
+
+```js
+const hodor = {
+ firstname: 'hodor',
+ lastname: 'hodor'
+};
+```
+
+Si l'on veut récupérer son nom et son prénom, sans le destructuring, on ferait ceci :
+```js
+const firstname = hodor.firstname,
+ lastname = hodor.lastname;
+```
+
+Le destructuring va permettre de faire la même chose mais en plus rapide :
+```js
+const { firstname, lastname } = hodor;
+```
+
+Notez les deux accolades autour du nom des constantes. Les constantes doivent aussi avoir le même nom que les propriétés de l'objet (même si un [système d'alias existe](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition#Affecter_avec_un_nom_diff%C3%A9rent)).
+
+Le résultat lui est le même que dans l'exemple précédent : on crée deux constantes, dont les valeurs sont celles des propriétés de l'objet hodor.
+
+**Notez bien que cela fonctionne pour les `const` mais bien entendu aussi pour les `let` !**
+
+### Destructuring et fonctions
+Le destructuring est souvent utilisé dans la déclaration de fonctions qui reçoivent des objets en paramètre. Par exemple, imaginons la fonction suivante :
+
+```js
+function kill(character) {
+ console.log( `${character.firstname} ${character.lastname} is dead :'(` );
+}
+```
+
+Le destructuring permet de simplifier l'écriture de la fonction :
+```js
+function kill({firstname, lastname}) {
+ console.log( `${firstname} ${lastname} is dead :'(` );
+}
+```
+
+Dans cette nouvelle version, le code est beaucoup moins verbeux, et surtout la fonction est maintenant quasiment **auto-documentée** : rien qu'en lisant la signature de la fonction, on sait que le paramètre qu'on doit lui passer est un objet (grâce aux accolades) et aussi qu'il doit avoir deux propriétés, firstname et lastname. Pratique !
+
+### Mise en application
+Appliquez le destructuring partout où c'est possible dans votre code !
\ No newline at end of file
diff --git a/images/napolitaine.jpg b/images/napolitaine.jpg
index cf99280d3de6d0098b0bd192820508d107fd9132..c174faa08acccf3a9b1abc57b47ab4bf00f9a3fd 100644
Binary files a/images/napolitaine.jpg and b/images/napolitaine.jpg differ
diff --git a/images/readme/pizzaland-02.jpg b/images/readme/pizzaland-02.jpg
index d55c8e84de75ecdf6f2a089fdea9573edaa2fb7e..bb391adecd564aced5bc197d964d055dec335757 100644
Binary files a/images/readme/pizzaland-02.jpg and b/images/readme/pizzaland-02.jpg differ
diff --git a/images/readme/pizzaland-03.jpg b/images/readme/pizzaland-03.jpg
index a018e940c5f413c497fd21c5177c78411d5eb8fe..9a53dadb3337d1bcecdc54104043c73a4ca10c60 100644
Binary files a/images/readme/pizzaland-03.jpg and b/images/readme/pizzaland-03.jpg differ
diff --git a/images/readme/pizzaland-04.jpg b/images/readme/pizzaland-04.jpg
index dabe73afe86c8a6589eaecc7013eb83f7460f690..3e6c82716f3ee5e1b61c383dfe9357701ab4b6fc 100644
Binary files a/images/readme/pizzaland-04.jpg and b/images/readme/pizzaland-04.jpg differ
diff --git a/images/readme/pizzaland-05.jpg b/images/readme/pizzaland-05.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dae4fb8fc656ab6b0e51c7f3d34dddf8943d498d
Binary files /dev/null and b/images/readme/pizzaland-05.jpg differ
diff --git a/images/readme/pizzaland-06.jpg b/images/readme/pizzaland-06.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7776197b4bc0974e2faf2349928024a630574699
Binary files /dev/null and b/images/readme/pizzaland-06.jpg differ
diff --git a/images/readme/pizzaland-07.jpg b/images/readme/pizzaland-07.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2ee0072a670ea12c4909e76f2fd7cedfa798544a
Binary files /dev/null and b/images/readme/pizzaland-07.jpg differ
diff --git a/images/readme/pizzaland-08.jpg b/images/readme/pizzaland-08.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0a60872647ad55655a6bf095562f12b89a4f1e63
Binary files /dev/null and b/images/readme/pizzaland-08.jpg differ
diff --git a/images/readme/pizzaland-09.jpg b/images/readme/pizzaland-09.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d6d07dfc44a7d1e43b8abc0b7bf880d413f5e938
Binary files /dev/null and b/images/readme/pizzaland-09.jpg differ
diff --git a/images/readme/pizzaland-10.jpg b/images/readme/pizzaland-10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c321992678235e7a74010d76f981e4ed01a58d8b
Binary files /dev/null and b/images/readme/pizzaland-10.jpg differ
diff --git a/images/regina.jpg b/images/regina.jpg
index 4c62f7ee5672168d1cfaec1a764c68af6c39a687..cfa2a320286215d3d02e6756e5ad1263b87be572 100644
Binary files a/images/regina.jpg and b/images/regina.jpg differ
diff --git a/images/spicy.jpg b/images/spicy.jpg
index 039353c7b57e583f68bf82cc244781f6e41f4830..25b1b53792382e3269ec595f119dca8d5f66d070 100644
Binary files a/images/spicy.jpg and b/images/spicy.jpg differ