like aggregation

Voici à quoi ressemble l'aggregation dans une base de données !


const products = [

  {
    "_id": 1,
    "item": "abc",
    "price": 10,
    "quantity": 2,
    "date": "2014-03-01T08:00:00.000Z"
  },
  {
    "_id": 2,
    "item": "jkl",
    "price": 20,
    "quantity": 1,
    "date": "2014-03-01T09:00:00.000Z"
  },
  {
    "_id": 3,
    "item": "xyz",
    "price": 5,
    "quantity": 10,
    "date": "2014-03-15T09:00:00.000Z"
  },
  {
    "_id": 4,
    "item": "xyz",
    "price": 5,
    "quantity": 20,
    "date": "2014-04-04T11:21:39.736Z"
  },
  {
    "_id": 5,
    "item": "abc",
    "price": 10,
    "quantity": 10,
    "date": "2014-04-04T21:23:13.331Z"
  },
  {
    "_id": 6,
    "item": "def",
    "price": 7.5,
    "quantity": 5,
    "date": "2015-06-04T05:08:13.000Z"
  },
  {
    "_id": 7,
    "item": "def",
    "price": 7.5,
    "quantity": 10,
    "date": "2015-09-10T08:43:00.000Z"
  },
  {
    "_id": 8,
    "item": "abc",
    "price": 10,
    "quantity": 5,
    "date": "2016-02-06T20:20:13.000Z"
  }
]

 const groupBy = (arr, key) =>

arr.reduce((acc, i) => {
  (acc[i[key]] = acc[i[key]] || [] ).push(i);
  return acc;
}, {});


let result = [];
let items = groupBy(products,"item");
for (const [key, value] of Object.entries(items)) {
  // console.log(`${key}, ${value}`);
  result.push(
    {
      "_id": key,
      "totalSaleAmount": value.reduce(function(acc, cur)  {
        acc+=cur.price*cur.quantity;
        return acc
      },0)
    }
  )
}
//console.table(result)
console.log(result)

REGexp split

 



Optional Chaining ?.

 


const cours = {
    titre : "JS",
    print(){
        console.log(this.titre)
    }
}

//cours.printAll() // Error
cours.printAll?.() //Optional Chaining
cours.print()

destructuration + reduce

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

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

  return acc;

}, {}); 

Remplace with regExp


html"<div> <h1> {{question}} </h1> 
<ul>
    <li>{{choice1}}</li>
    <li>{{choice2}}</li>
    <li>{{choice3}}</li>
    <li>{{choice4}}</li>
</ul>     
</div>"
randomChoise
 2
newCode"<div> <h1> {{question}} </h1> 
<ul>
    <li>{{choice1}}</li>
    <li class='selected'>{{choice2}}</li>
    <li>{{choice3}}</li>
    <li>{{choice4}}</li>
</ul>     
</div>"

Jest test

  https://github.com/dupontdenis/Jest-test1.git


test("Cat Boisson should has 2 articles", ()=> {
    expect(nbArtByCat.Boisson).toBe(2);
})

test("nb of Cats should be 5", ()=>{
    expect(Object.entries(nbArtByCat).length).toBe(5);
})

localstorage

 localStorage.setItem("saveTab",[1,2,3])

console.log(localStorage.getItem("saveTab")
> 1,2,3

Il faut utiliser JSON

localStorage.setItem("saveTAB",JSON.stringify([1,2,3]))


console.log(localStorage.getItem("saveTAB"))
> [1,2,3] // ce n'est pas un tableau mais un string

typeof localStorage.getItem("saveTAB")

> 'string'

Il faut utiliser JSON.parse
console.log(JSON.parse(localStorage.getItem("saveTAB")))
VM1856:1 (3) [1, 2, 3]
0: 1
1: 2
2: 3
length: 3[[Prototype]]: Array(0)

typeof JSON.parse(localStorage.getItem("saveTAB"))

'object'


En action

RegExp

 RegExp: \d(?=(\d{3})+\.)

Un nombre suivi de 3 nombres (une ou plusieurs fois) et un point sans les consommer (?= ).

Remplacement: $& 

Correspond au chiffre \d qui correspond.

Match 10-11
Group 14-7332
Match 23-45
Group 14-7332


https://regex101.com/r/wwpOnj/1

random word

 https://random-word-api.herokuapp.com/word?number=3&length=-1


learn API 

 https://random-word-api.herokuapp.com

En action

function import

Voici une importation conditionnel à un click grâce à la fonction : import("./module.js");

 

flat array

 lien

recursif

Protéger un état

rappels
let u ={a:1,b:1,c:1}; u = {...u, a:2, ["b"]:2, d:2}; // u = { a: 2,  b: 2,  c: 1,  d: 2}

u = {a:2, ["b"]:2, d:2, ...u}; // u = { a: 1,  b: 1,  c: 1,  d: 2}

let state = {
    account: null
  };

state.account="top"; //état non protégé
console.log(state)

// on protège l'état
  function updateState(property, newData) {
    state = Object.freeze({
      ...state,
      [property]: newData
    });
  }

  updateState("account",2);
  console.log(state)
  updateState("account",3);
  console.log(state)
 

  state.account="top"; // pluus possible

  console.log(state) 


L'affichage montre qu'une fois protégé on ne peut pas modifier l'état.

{ account: 'top' }

{ account: 2 }

{ account: 3 }

{ account: 3 }

Object.entries

 const obj = { "un": 1, deux: 2, trois: 3 };


const tab = Object.entries(obj);

console.log(tab) // 

  1. (3) [Array(2), Array(2), Array(2)]
    1. length: 3


const obj2 = Object.fromEntries(

  Object.entries(obj)

  .map(([ key, val ]) => [ `${key}*2`, val * 2 ])

);

console.log(obj2);

  1. {un*2: 2, deux*2: 4, trois*2: 6}
    1. deux*2: 4
    2. trois*2: 6
    3. un*2: 2

https://codepen.io/dupontcodepen/pen/abEaYeQ

Reduce and for of

Reduce with Map : closest value

 let value = 610;


const table = new Map([
    [0,'yellowgreen'],
    [150, 'green'],
    [600, 'olive'],
    [750, 'red'],
    [800, 'black'],
]);

const closestKey = [...table.keys()].reduce( (acc, key) => {
   return acc = ( Math.abs(acc-value) < Math.abs(key-value) ) ? acc : key
})

┌───────────────────┬─────┬───────────────┐
│ (iteration index) │ Key │ Values │ ├───────────────────┼─────┼───────────────┤ │ 0 │ 0 │ 'yellowgreen' │ │ 1 │ 150 │ 'green' │ │ 2 │ 600 │ 'olive' │ │ 3 │ 750 │ 'red' │ │ 4 │ 800 │ 'black' │ └───────────────────┴─────┴───────────────┘ console.log(closestKey, table.get(closestKey))
// 600 olive




Map : en action

 

let value = 610;

const table = new Map([
    [0,'yellowgreen'],
    [150, 'green'],
    [600, 'olive'],
    [750, 'red'],
    [800, 'black'],
]);

console.table(table.keys());
console.table([...table.keys()]);



table.keys() renvoie un itérateur ! 
[... table.keys()] renvoie un tableau !


Opérateur

 https://www.joshwcomeau.com/operator-lookup/

nvm for windows

 https://github.com/coreybutler/nvm-windows



 https://docs.microsoft.com/en-us/javascript/

Inscription à : Articles (Atom)