Set et Map

Set

let x = new Set();

x.add(42); // { 42 }
x.add("foo"); // { 42, "foo" }

x.has("foo"); // true
x.has(1337); // false

x.delete("foo");

x.size; // 1

for (let item of x) {
  // items; 
}

ES6

Map

let x = new Map();

x.set(42, "quarante-deux'");
x.set("foo", "f o o");

x.size; // 2

x.get(42); // "quarante-deux";
x.get("foo") // "f o o"

x.delete("foo");

x.forEach((value, key) => {
  // value;, key;
});

ES6

Date

Initialisation d'une Date

let a = new Date() // Maintenant

let b = new Date(1537621200000) // Milisecondes depuis l'epoch Unix

let c = new Date('2018-09-22T15:00:00+02:00') // Format ISO 8601

let d = new Date(2018, 8, 22) // Le mois est 0-indexé

ISO 8601

Formatter d'une Date

let x = new Date('2018-09-22T15:00:00+02:00')

x.getTime(); // 1537621200000

x.toLocaleDateString(); // "2018-9-22"

x.toLocaleTimeString(); // "15:00:00"

x.toISOString(); // "2018-09-22T13:00:00.000Z"

ISO 8601

Manipuler une Date

let x = new Date('2018-09-22T15:00:00+02:00');

x.getDate(); // 22

x.setDate(30); // Date { 2018-09-30T13:00:00.000Z }


// Je vous épargne tout les getters/setters

Maintenant

let now = new Date().getTime();

let now = Date.now();

ES6

JSON

JavaScript Object Notation

JSON est une syntaxe pour sérialiser des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs null.

Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.

Extrait de la Mozilla Developer Network

JSON invalide

{

firstname: "Benjamin",

'lastname': "Chazelle",

"age": 024,

"company": {

`hiring`: true,

"nextWebTalent": undefined

"confinedUntil": null,

"courses": ['JavaScript', "Vue.js"],

}

JSON invalide

{

firstname: "Benjamin",

'lastname': 'Chazelle',

"age": 024,

"company": {

`hiring`: true,

"nextWebTalent": undefined

"confinedUntil": null,

"courses": ['JavaScript', "Vue.js"],

}

JSON valide

{

"firstname": "Benjamin",

"lastname": "Chazelle",

"age": 24,

"company": {

"hiring": true

"confinedUntil": null,

"courses": ["JavaScript", "Vue.js"]

}

Encoder et décoder en JSON

let decoded = { firstname: 'Benjamin', age: 24, company: "Ubitransport" };

JSON.stringify(decoded);
// '{"firstname":"Benjamin","age":24,"company":"Ubitransport"}'


let encoded = '{"firstname":"Benjamin","age":24,"company":"Ubitransport"}';

JSON.parse(encoded);
// {
//    firstname: 'Benjamin',
//    age: 24, 
//    company: 'Ubitransport'
// }

Les fonctions

Déclaration d'une fonction

function maFonction () {
  
}

Déclaration d'une fonction

function maFonction () {
  
}

maFonction(); // undefined

Déclaration d'une fonction

function maFonction () {
  return 42;
}

maFonction(); // 42

Déclaration d'une fonction

function addition (a, b) {
  return a + b;
}

addition(10, 7); // 17

Déclaration d'une fonction

function addition (a, b, c = 0) {
  return a + b + c;
}

addition(10, 7); // 17

addition(10, 7, 100); // 117

Fonction anonyme

const addition = function (a, b, c = 0) {
  return a + b + c;
}

addition(10, 7); // 17

addition(10, 7, 100); // 117

Fonction fléchée

const addition = (a, b, c = 0) => {
  return a + b + c;
}

addition(10, 7); // 17

addition(10, 7, 100); // 117

ES6

Fonction fléchée

const addition = (a, b, c = 0) => a + b + c;

addition(10, 7); // 17

addition(10, 7, 100); // 117

ES6

Fonction fléchée

const majuscule = str => str.toUpperCase();

majuscule("hello world"); // "HELLO WORLD"

ES6

Opérateur de reste et Function

const casting = (a, b, ...plusEncore) => {
  let liste = `${a} et ${b}`;
  if(plusEncore.length > 0) {
    liste += ` (et ${plusEncore.join(", ")})`;
  }
  return liste;
};

casting("Alice", "Bob");
// "Alice et Bob"

casting("Alice", "Bob", "Charlie", "Dan");
// "Alice et Bob (et Charlie, Dan)"

ES6

Passage par copie / référence

function exclamer(str) {
  str += " !";
  return str;
}

// Type primitif
let x = "Hello world";


exclamer(x); // "Hello world !"
x; // "Hello world"

x = exclamer(x);
x; // "Hello world !"

!!!

function exclamer(obj) {
  obj.y += " !";
}


// Type objet
let x = {};
x.y = "Hello world";

exclamer(x);
x.y; // "Hello world !"

Les fermetures

function () {
  const phrase = "Houra";
  const crier = function () {
    console.log(phrase); // phrase est accessible
  }
}

Fonction d'objet

let x = {
  argent: 25,
  gagnerLoto: function () {
    // ...
  }
}

ES6

Vue

let y = {
  argent: 25,
  gagnerLoto: () => {
    // ...
  }
}

let z = {
  argent: 25,
  gagnerLoto() {
    // ...
  }
}

Le mot clé this

let x = {
  argent: 25,
  gagnerLoto: function () {
    this; // === x
  }
}

ES6

Vue

let y = {
  argent: 25,
  gagnerLoto: () => {
    this; // !== y
  }
}

let z = {
  argent: 25,
  gagnerLoto() {
    this; // === z
  }
}

Le mot clé this

let x = {
  argent: 25,
  gagnerLoto: function () {
    this.argent = 10e6;
  }
}

ES6

Vue

let y = {
  argent: 25,
  gagnerLoto: () => {
    this.argent = 10e6; 
    // this ne cible pas y
  }
}

let z = {
  argent: 25,
  gagnerLoto() {
    this.argent = 10e6;
  }
}

Le mot clé this

let x = {
  argent: 25,
  gagnerLoto: function () {
    this.argent = 10e6;
  }
}

x.gagnerLoto();
x.argent; // 10e6

ES6

Vue

let y = {
  argent: 25,
  gagnerLoto: () => {
    this.argent = 10e6;
    // this ne cible pas y
  }
}

y.gagnerLoto();
y.argent; // 25

let z = {
  argent: 25,
  gagnerLoto() {
    this.argent = 10e6;
  }
}

z.gagnerLoto();
z.argent; // 10e6

Fonction fléchée et this

this; // globalThis;


let x = {
  gagnerLoto: () => {
    this; // globalThis;
  },
  houra: function () {
    this; // x
    const crier = () => {
      this; // x
      console.log("Houra");
    }
    crier();
  }
}

ES6

Function.bind et this

let x = {
  argent: 25,
  gagnerLoto: function () {
    this.argent = 1e6;
  }
}

let z = {
  argent: 25,
  gagnerLoto() {
    this.argent = 350;
  }
}

ES6

Vue

let volerLoto = x.gagnerLoto.bind(z);

volerLoto();

x.argent; // 25

z.argent; // 1e6

!!!

Les classes

Déclaration d'une classe

class Humain {
  
}

ES6

kevin = new Humain();

Déclaration d'une classe

class Humain {
  
}

ES6

kevin = new Humain();

Constructeur d'une classe

class Humain {
  
  constructor(nom) {
    this.nom = nom;
    this.age = 0;
  }
  
}

ES6

kevin = new Humain("Kevin");

Méthode d'une classe

class Humain {
  
  constructor(nom) {
    this.nom = nom;
    this.age = 0;
  }
  
  vieillir() {
    this.age++;
  }
  
}

ES6

kevin = new Humain("Kevin");

kevin.vieillir();

Getter d'une classe

class Humain {
  
  constructor(nom) {
    this.nom = nom;
    this.langues =
      ["Anglais", "Italien"];
  }
  
  get langue() {
    let langue = this.nom;
    langue += " parle ";
    langue += this.langues.join(" ");
    return langue;
  }
  
}

ES6

kevin = new Humain("Kevin");

kevin.langue; 
// "Kevin parle Anglais Italien"

Setter d'une classe

class Humain {
  
  constructor(nom) {
    this.nom = nom;
    this.langues = [];
  }
  
  set langue(nom) {
    this
      .langues
      .push(nom);
  }
  
}

ES6

kevin = new Humain("Kevin");

kevin.langues; 
// []

kevin.langue = "Anglais";

kevin.langues; 
// ["Anglais"]

kevin.langue = "Italien";

kevin.langues; 
// ["Anglais", "Italien"]

Héritage

class Terrien {
  constructor(age) {
    this.planet = "Terre";
    this.age = age;
  }
}

class Humain extends Terrien {
  constructor(age) {
    super(age);
  }
}

ES6

kevin = new Humain("Kevin");

kevin.planet; // "Terre"

Static

class Humain {
  
  static estHomoSapiens() {
    return true;
  }
  
}

ES6

Humain.estHomoSapiens(); // true

Le prototype

class Humain {}

let kevin = new Humain();

Humain.prototype.parler = function () {
  console.log("Blah blah");
}

kevin.parler(); // > "Blah blah"

Vue

Quizz

https://interactly.glitch.me/

Set et Map sont de types objets ?

Une Date JavaScript peut être initialisée à partir de

JSON

On peut sérialiser en JSON via

Une fonction

Les fonctions fléchées sont apparues dans ES6

L'opérateur de reste (...) dans une fonction permet

Dans une fonction, un paramètre de type number serait passé par copie

Dans une fonction un paramètre de type Date serait passer par copie

Le mot clé this

Une classe Planet se déclare

Une méthode statique signifie

Le prototype d'un objet

Any question ?

[5] JS: Set, Map, JSON, Date, Fonction, Classe

By Benji Chaz

[5] JS: Set, Map, JSON, Date, Fonction, Classe

Set et Map

Set

Map

Date

Initialisation d'une Date

Formatter d'une Date

Manipuler une Date

Maintenant

JSON

JavaScript Object Notation

JSON invalide

JSON invalide

JSON valide

Encoder et décoder en JSON

Les fonctions

Déclaration d'une fonction

Déclaration d'une fonction

Déclaration d'une fonction

Déclaration d'une fonction

Déclaration d'une fonction

Fonction anonyme

Fonction fléchée

Fonction fléchée

Fonction fléchée

Opérateur de reste et Function

Passage par copie / référence

Les fermetures

Fonction d'objet

Le mot clé this

Le mot clé this

Le mot clé this

Fonction fléchée et this

Function.bind et this

Les classes

Déclaration d'une classe

Déclaration d'une classe

Constructeur d'une classe

Méthode d'une classe

Getter d'une classe

Setter d'une classe

Héritage

Static

Le prototype

Quizz

Set et Map sont de types objets ?

Une Date JavaScript peut être initialisée à partir de

JSON

On peut sérialiser en JSON via

Une fonction

Les fonctions fléchées sont apparues dans ES6

L'opérateur de reste (...) dans une fonction permet

Dans une fonction, un paramètre de type number serait passé par copie

Dans une fonction un paramètre de type Date serait passer par copie

Le mot clé this

Le mot clé this

Une classe Planet se déclare

Une méthode statique signifie

Le prototype d'un objet

Any question ?

[5] JS: Set, Map, JSON, Date, Fonction, Classe

More from Benji Chaz