react構造分解+map+restパラメータアレイによるn要素の作成

1077 ワード

TOC

  • 地図の脆弱性
  • 構造分解とrestパラメータ
  • react hooksでカレンダーを作成中
    1日から30日までの数字をhtml要素に印刷するためにmapを使った瞬間、1~30の配列が全く含まれていないことに気づきました.
    reactでfor文を使うことを学びましたが、コードがかなり乱雑になっているので使用しません.
    この問題を解決するために.
    restパラメータと構造分解を理解すると、より簡単に解決できます.
    rest parameterはMDN : rest parameter
    割当構造分解=割当設計図
    let a, b, rest;
    [a, b] = [10, 20];
    
    console.log(a);
    // expected output: 10
    
    console.log(b);
    // expected output: 20
    
    [a, b, ...rest] = [10, 20, 30, 40, 50];
    
    console.log(rest);
    // expected output: Array [30,40,50]
    それらを組み合わせると.
    配列がない場合、mapの配列を作成できます.
    [...Array(yourInteger)].map
    そうすると、->youintegerの配列が生成され、その配列を再分解して各配列に入れます.
    Integer=2の場合
    [[undefined, undefined]]->[undefined, undefined]
    形成された形態.
    [undefined,undefined,...]
    配列はInteger個の配列を生成します.