destructuration + reduce

const dir = films.reduce( (acc, cur) => {

  acc[cur.director] = [ ... (acc[cur.director] || [] ), cur.title ];

  return acc;

}, {}); 

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)

Deep destructuration

Exemple

const itemInfos = [
{name:"id20199",infos:{min:66864,max:66927}},
{name:"id34555",infos:{min:7615,max:119296}}
]

let min1 = itemInfos[0].infos.min;

for (let { infos: { min } } of itemInfos) {

    console.log(` la valeur min = ${min}`);

}

code

Cas des tableaux

Trie avec le premier élément du tableau comme critère.

COMPAGNIES.sort( ({ ranges: [A] } , {ranges: [B] }) => A < B );

code

Passage par défault

class Player {

 constructor({
    keysMap = new Map([
      ["up", "ArrowUp"],
      ["right", "ArrowRight"],
      ["down", "ArrowDown"],
      ["left", "ArrowLeft"],
    ]),
    x = 20,
    y = 20,
    speed = 0.5,
  } = {}) {

    Object.assign(this, { touches, x, y, speed });
    ...
    this.moveX = 0;
    this.moveY = 0;
    

  }
  ...
}


https://es6console.com/jpcwjhve/

------------ Amélioration du code

Méthode static !

class Player {

  constructor( {keysMap, x, y, speed} ) {

    Object.assign(this, {

      keysMap,

      x,

      y,

      speed

    });

    this.moveX = 0;

    this.moveY = 0;

    ...

  }

  static create({

    keysMap = new Map([

      ["ArrowUp", "up"],

      ["ArrowRight", "right"],

      ["ArrowDown", "down"],

      ["ArrowLeft", "left"],

    ]),

    x = 100,

    y = 100,

    speed = 0.5,

  } = {}) {

    return new Player({keysMap, x, y, speed})

  }

...

}

appel

Player.create();

Player.create({

    keysMap: new Map([

      ["z", "up"],

      ["d", "right"],

      ["x", "down"],

      ["q", "left"],

    ]),

    speed: 2

  });

  

https://es6console.com/jpdtv6zx/

Destructuring : pour renommer des variables !

Nous pouvons renommer des varibles lors de la destructuration :

const doc = document.documentElement;

const { clientWidth : largeur } = doc;

console.log( `La largeur = ${largeur}px` );

En action

Test

Vous pourrez arrêter de travailler si vous me donnez le résultats de

DOM : destructuring

Pour accéder à un élément par son id, on utilise généralement document.getElementById().

utilisation de la déstructuration

La déstructuration vous permet d'aller plus loin.

Considérons le code HTML

On peut avoir accès à <input ... id="date...>  par window.date ou date directement.

La déstructuration nous permet de modifier facilement l'identifiant.

Par exemple, le code suivant permet de déclarer day comme l’élément <input ... id="date...>

const { "date": day } = window;

Exemple de code

Inconvénients

lecture

map

const liste = [
{age:10,arg:2,exp:2},
{age:1,arg:1},
{age:100,arg:3},
];

function AgeArg({arg,age}){
  return age*arg;
}

let T = liste.map(AgeArg);

console.log(T);

reduce : destructuring

const liste = [
{age:10,arg:2,exp:2},
{age:1,arg:1},
{age:100,arg:3},
];

function AgeArg(acc,{arg,age}){
  return acc+ age*arg;
}

let T = liste.reduce(AgeArg,0);

console.log(T); //321

for_of

const liste = [
{age:10,arg:2,exp:2},
{age:1,arg:1},
{age:100,arg:3},
];

for_of

classique

for (l of liste){
console.log(l.age)
}

destructuring

for ({arg,age} of liste){
console.log(arg*age)
}