Array

Initialisation d'un Array

let x = [1, 2, 3];

let y = ["Hello", true, 42, {foo: "bar"}];

let z = [[1,2,3], [4,5,6]];

Lecture dans un Array

let x = [1, 2, 3];

x[0]; // 1

let y = ["Hello", true, 42, {foo: "bar"}];

x[3]; // {foo: "bar"}

let z = [[1,2,3], [4,5,6]];

x[1]; // [4,5,6]
x[1][2]; // 6

Écriture dans un Array

let x = [1, 2, 3];

x[0] = 42;

x; // [42, 2, 3]

Taille d'un Array

let x = [1, 2, 3];

x.length; // 3

Itération d'un Array

let digits = [1, 2, 3];

for(let i = 0; i < digits.length; i++) {
  // digits[i];
}

for(let digit of digits) {
  // digit;
}

// Performance
digits.forEach(digit => {
  // digit;
});

ES6

Manipulation d'un Array

let x = [12, 3, 1, 150];

x.push(17); // Ajoute 17 en fin de tableau
x; // [12, 3, 1, 150, 17]

x.pop(); // 17 - Supprime et retourne le dernier élement
x; // [12, 3, 1, 150]

x.unshift(42); // Ajoute 17 en début de tableau
x; // [42, 12, 3, 1, 150]

x.shift(); // 42 - Supprime et retourne le premier élement
x; // [12, 3, 1, 150]

x.splice(1, 2); // [12, 150] - Supprime 2 éléments à la position 1

Transformation d'un Array

let x = [12, 3, 1, 150];

x.map(element => element * 2); // [24, 6, 2, 300]

x.reduce((acc, element) => acc + element) // 166

x.sort();
x; // [1, 12, 150, 3]

x.sort((a, b) => a - b);
x; // [1, 3, 12, 150]

Recherche dans un Array

let x = [12, 3, 1, 150];

x.indexOf(3); // 1 - Trouve l'index d'un élément

Recherche dans un Array

let x = [12, 3, 1, 150];

x.includes(3); // true - Indique la présence d'un élément

x.find(element => element === 3); // 3 - Trouve un élément
x.find(element => element === 0); // undefined

x.findIndex(element => element === 3); // 1 - Trouve l'index d'un élément
x.findIndex(element => element === 0); // undefined

x.filter(element => element < 10); // [3, 1] - Filtre les éléments

ES6

Affectation par décomposition

const [x, y] = [1, "foo"];

x; // 1
y; // "foo"

ES6

Opérateur de reste et Array

const [x, y, ...z] = [1, "foo", true, {}, 23];

x; // 1
y; // "foo"
z; // [true, {}, 23]

ES6

Opérateur de reste et Array

const [x, y, ...z] = [1, "foo", true, {}, 23];

x; // 1
y; // "foo"
z; // [true, {}, 23]

const reconstruit = [x, y, ...z]; 
// [1, "foo", true, {}, 23]

ES6

Object

Initialisation d'un objet

let x = {};

let y = new Object();

Initialisation d'un objet

let x = {
  firstname: "Benjamin",
  lastname: "Chazelle",
  age: 24,
  engineer: true,
  company: "Ubitransport"
};

Initialisation d'un objet

let x = {
  firstname: "Benjamin",
  "lastname": "Chazelle",
  age: 24,
  'engineer': true,
  company: "Ubitransport"
};

Propriétés d'un objet

let x = {
  firstname: "Benjamin",
  lastname: "Chazelle",
  age: 24,
  engineer: true,
  company: "Ubitransport"
};

x.age; // 24

x['company']; // "Ubitransport"

Propriétés d'un objet

let infos = {
  firstname: "Benjamin",
  lastname: "Chazelle",
  company: {
    name: "Ubitransport",
    city: "Mâcon",
    creation: 2012
  }
};

Propriétés d'un objet

let x = {
  firstname: "Benjamin",
  lastname: "Chazelle",
  age: 24,
  engineer: true,
  company: "Ubitransport"
};

x.age = 20;
x['company'] = "IUT Lyon 1";
x['passion'] = "Piano";


x;
// {
//   firstname: "Benjamin",
//   lastname: "Chazelle",
//   age: 20,
//   engineer: true,
//   company: "IUT Lyon 1",
//   passion: "Piano"
// }

Chaînage de propriétés

let x = {
  firstname: "Benjamin",
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

x.company.name; // "Ubitransport"

Chaînage de propriétés

let x = {
  firstname: "Benjamin",
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

x.home; // undefined

x.home.address; // Uncaught TypeError: x.home is undefined

Chaînage optionnel

let x = {
  firstname: "Benjamin",
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

x.home; // undefined

x.home.address; // Uncaught TypeError: x.home is undefined


x?.home; // undefined

x?.home?.address; // undefined

ES6

Opérateur in

let x = {
  firstname: "Benjamin",
  company: "Ubitransport"
};

"firstname" in x; // true

"phone" in x; // false

Opérateur delete

let x = {
  firstname: "Benjamin",
  company: "Ubitransport"
};

delete x.firstname;

x; // { company: "Ubitransport" }

Lister les propriétés

let x = {
  firstname: "Benjamin",  
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

Object.keys(x); // ["firstname", "company"]

Object.keys(x.company); // ["name", "address"]

Itérer sur les propriétés

let x = {
  firstname: "Benjamin",  
  company: {
    name: "Ubitransport",
    address: "200 Bd de la Résistance, 7100 Mâcon"
  }
};

// Historique
for(let property in x) {
    // x[property];
}

// Performance
Object.keys(x).forEach(property => {
    // x[property];
})

ES6

Affectation par composition

const firstname = "Benjamin";
const lastname = "Chazelle";

let x = { 
  firstname, 
  lastname 
};

x;
// {
//   firstname: "Benjamin",
//   lastname: "Chazelle"
// }

Vue

ES6

Affectation par composition

const firstname = "Benjamin";
const contact = {
  phone: "06 51 23 51 39",
  email: "benjamin@chazelle.pro"
}

let x = { 
  firstname, 
  contact
};

x;
// {
//   firstname: "Benjamin",
//   contact: {
//     phone: "06 51 23 51 39",
//     email: "benjamin@chazelle.pro"
//    }
// }

Opérateur de reste et Objet

const firstname = "Benjamin";
const contact = {
  phone: "06 51 23 51 39",
  email: "benjamin@chazelle.pro"
}

let x = { 
  firstname, 
  ...contact
};

x;
// {
//   firstname: "Benjamin",
//   phone: "06 51 23 51 39",
//   email: "benjamin@chazelle.pro"
// }

Vue

ES6

Affectation par composition

const firstname = "Benjamin";
const contact = {
  phone: "06 51 23 51 39",
  email: "benjamin@chazelle.pro"
}

let x = { 
  firstname, 
  contact
};

x;
// {
//   firstname: "Benjamin",
//   contact = {
//     phone: "06 51 23 51 39",
//     email: "benjamin@chazelle.pro"
//    }
// }

Affectation par composition

const width = 67;
const height = 23;
const dimensions 
= { width, height }
const colour = "red";
const texture = "vinyle";

const data = {
  colour,
  texture: "iron",
  ...dimensions
}


data; // ?

// Triangle rouge
{
  colour: "red",
  texture: "vinyle",
  dimensions: {
  	width: 67,
  	height: 23
  }
}

// Rond jaune
{
  colour: undefined,
  texture: "iron",
  width: 67,
  height: 23
}

// Losange bleu
{
  colour: "red",
  texture: "iron",
  width: 67,
  height: 23
}

// Carré vert
{
  colour: "red",
  texture: "iron",
  dimensions: {
  	width: 67,
  	height: 23
  }
}

Affectation par composition

const firstname = "Benjamin";
const contact = {
  phone: "06 51 23 51 39",
  email: "benjamin@chazelle.pro"
}

let x = { 
  firstname, 
  contact
};

x;
// {
//   firstname: "Benjamin",
//   contact = {
//     phone: "06 51 23 51 39",
//     email: "benjamin@chazelle.pro"
//    }
// }

Prêt pour cette

nouvelle session interactive ?

https://interactly.glitch.me/

Dans un Array, je peux avoir des éléments de différents types

Dans un Array foo = ["x", "y", "z"], foo[2] retourne

Je peux connaître la taille d'un Array foo via

Utiliser des éléments de langage ES6 nativement implique

Je peux ajouter un élément à la fin de mon Array foo via

Je peux itérer sur un Array elements via

Pour transformer l'Array [1, 2, 3]

en [10, 20, 30], je peux utiliser

L'opérateur de décomposition

de reste s'écrit

Dans la déclaration littérale d'un objet,

les propriétés

Jusqu'ici je kiff ce cours de JavaScript

Un objet peut en imbriquer d'autres

Je peux accéder à Ubitransport

Que vaut foo.bar ?

let foo = {};

foo.bar; // ?

Que vaut

foo.bar.qux ?

let foo = {};

foo.bar.qux; // ?

Que vaut

foo?.bar.qux ?

let foo = {};

foo?.bar.qux; // ?

Que vaut

foo?.bar?.qux ?

let foo = {};

foo?.bar?.qux; // ?

Je peux tester si la propriété bar existe ou non dans l'objet foo

let width = 67
let height = 23
let measures = 
    { width, height }
let color = "red"
let texture = "vinyle"

let data = {
   color,
   texture: "iron",
   ...measures
}

data // ?

{  // Réponse B
   color: undefined,
   texture: "iron",
   width: 67,
   height: 23
}


{  // Réponse D
   color: "red",
   texture: "iron",
   measures: {
      width: 67,
      heigth: 23
   }
}

{  // Réponse A
   color: "red",
   texture: "vinyle",
   measures: {
      width: 67,
      height: 23
   }
}


{  // Réponse C
   color: "red",
   texture: "iron",
   width: 67,
   height: 23
}

let width = 67
let height = 23
let weight = 19
let measures = 
 {width, height, weight}

let data = {
   weight: 42,
   texture: "iron",
   ...measures
}

data // ?

{  // Réponse B
   texture: "iron",
   width: 67,
   height: 23,
   weight: 19,
}
   

{  // Réponse D
   texture: "iron",
   measures: {
      width: 67,
      heigth: 23,
      weight: 19,
   },
}

{  // Réponse A
   texture: "iron",
   weight: 42,
   measures: {
      width: 67,
      height: 23,
      weight: 19,
   }
}

{  // Réponse C
   weight: 19,
   texture: "iron",
   width: 67,
   height: 23,
}

Any question ?

Exercice: Moteur de recherche

Projet Glitch : Search Engine

JavaScript / Vue.js

Benjamin Chazelle

iut@chazelle.pro