filter

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成する。

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

てりー 2021/03/13に更新

keycode

e.keyを使うと、画像のようにkeycodeの名称が表示される。
文字消したり改行が反映されない。

key毎にイベントを設定

この記事参考に1つ1つの要素に挙動を設定していく。

keyイベントを取り敢えず中止

if(e.key.length > 1){
 return;
}

これでkeyが取得できた時はreturnする

入力フォームでEnterで入力完了

該当コード

onKeyDown={(e) => {
              console.log({ e });
              if (isComposed) return; //変換中のenter押下はreturn
              if (e.target.value === "") return; //入力空でのenterはreturn
              if (e.key === "Enter") initializeLocalPeer(e);
            }}

全体像

変換のEnterは無視する

Reactのコンポジションイベント
https://ja.reactjs.org/docs/events.html

変換の初めと終わりのイベント。
ここでisComposedの値を更新。

 onCompositionEnd={() => setIsComposed(false)}
 onCompositionStart={() => setIsComposed(true)}

isComposedならonKeyDownをreturnする

 if (isComposed) return

入力エリアが空ならEnterで更新しない

e.terget.value === ""でreturnさせる

 if (e.target.value === "") return; //入力空でのenterはreturn

てりー 2021/03/14に更新

Object.entries（）

オブジェクトを[key,value]のペアの配列にする

[
  [
    "key-1",
    "value-1"
  ],
  [
    "key-2",
    "value-2"
  ]
]

てりー 2022/01/12

リテラル型

let status: 1 | 2 | 3 = 1;

使い所

上記の様にユニオン型とリテラル型を組み合わせて使う
https://qiita.com/sh-suzuki0301/items/ed3823263ac721406f3e

類似機能のenum型よりスッキしていて良い。

enum Greeting { 
  Hello =  'Hello',
  Hey = 'Hey',
  Hi = 'Hi',
 }```

てりー 2022/12/18に更新

久々に「JavaScript本格入門」を読んだので振り返りをまとめる

Array

要素が順番に並んでいるコレクション
インデックスで管理する

map、forEach、filter、reduceメソッドなど

reduce：配列に対して、左から右へ関数を実行して単一の値にする
使い所

値の合計出す
値の重複の個数出す
値を変換する

など

今回の実用例
ObjectのArray型であるitemをidをkeyとしたMap型のmappedItemに変換する

item = [{ id: 1, name: "りんご", value: 2},{id: 2, name: "いちご", value: 3}]
const mappedItem = items.reduce((acc, item) => {
 return acc.set(item.id, item)
}, new Map());

Map

keyとvalueのオブジェクトのコレクション
keyで管理する

set, getメソッド

Mapはsetでコレクションの追加、getでコレクションの取得が出来る

例
const map = new Map()  // 空のMapを作成
map.set(1, "first") 　// コレクションを追加
console.log(map.get(1)) // 出力："first"

setメソッドは複数迂回同じコレクションに使うと、上書きする
Mapのkeyは任意の任意の型で指定出来る