Slide 1

Slide 1 text

for文禁止縛り in JS

Slide 2

Slide 2 text

for文禁止縛りって? その名の通り、 for文を使わずに繰り返し処理を書こう! というもの。 用量・用法を守って適切に使いましょう ...

Slide 3

Slide 3 text

Step. 1 配列の加工 大体の繰り返しは、繰り返す対象の配列が存 在しているので結構使われる。 なかでも、一つ一つを加工する場合は多い。

Slide 4

Slide 4 text

Step. 1 配列の加工 こういう、「配列の個々の要素を加工する」系 の処理はmapで書ける。 加工する処理を関数として分離できた。

Slide 5

Slide 5 text

Step. 2 配列に関する繰り返し 配列を加工しないけど、「全要素に対してなん かしたい」ときもある。

Slide 6

Slide 6 text

Step. 2 配列に関する繰り返し そういうときはforEachを使うと書ける。 mapよりも自由度の高い処理が可能

Slide 7

Slide 7 text

Step. 3 前のループの結果が 必要 たまに、「前のループの結果」が必要な処理が ある。 右側のスクリプトは、配列の中のオブジェクト を全てマージする例。

Slide 8

Slide 8 text

Step. 3 前のループの結果が 必要 こういう場合こそ、「reduce」を使うことができ る。 サンプルは足し算なので、使いどころはないと 思われがちだが、実は汎用性が高い。 「今までの累計、今の要素の値」から、「今の 要素も含めた累計」を返す関数を使う。

Slide 9

Slide 9 text

Step. 4 オブジェクトの プロパティごとに処理 右側はプロパティの値を全部 1加算するスクリ プト。

Slide 10

Slide 10 text

Step. 4 オブジェクトの プロパティごとに処理 Object.entries関数を使うと、オブジェクトを [key, value]の配列に変換することができる。 Step. 3を使うともとのオブジェクトに戻せる。 賛否両論。

Slide 11

Slide 11 text

Step. 5 探索 while文やfor文で配列の要素を探索する場合 を考える(効率は悪いのでこんなことしないか もしれないが) 右のは、最初の偶数を探すプログラム。

Slide 12

Slide 12 text

Step. 5 探索 こういうのは、「find」という関数が用意されて いる。indexOfで探索する手法が一般的だ が、値だけ必要な場合はfindで充分である。 条件を満たす全ての値が欲しいときは filterを 使う。

Slide 13

Slide 13 text

Step. x その他 上のでできないこと ● break(for文禁止縛りでもできないことはないがどれも黒魔術) ● 任意回数ループ(メモリを食わずにやる方法を知りたい ...)