JavaScriptの便利関数

筆者が勉強してて必要そうな関数について機能と使い方をまとめておこうと思います。

・map関数

すでにある配列の中身を使用して、新しい配列を作成してくれる関数です。ReactのJSX記法で仮想DOMを配列の個数分作成するなどの使用法ができます。

const array = [1, 2, 3, 4, 5];

const newArray = array.map(x => x * x);

このように書くとarrayの要素一つ一つを取り出して、mapの()内の処理を行って、新しい配列であるnewArrayの要素に格納されます。今回であれば配列の中身を２乗して新しい配列に格納していきます。

今回のコードを実行すると変数「newArray」には下記のような配列が代入されます。

・filter関数

すでにある配列の中身を、条件分をしようして条件に合う要素のみを抽出して取り出し新しい配列へと格納します。

const array = [1, 2, 3, 4, 5];

const newArray = array.filter(x => x >3);
// filter((変数) => 条件式)

このNewArrayをconsole.log(newArray)で表示させると、[4, 5]のみの配列が表示されます。これはarrayの要素の中の3より大きい要素のみを取り出して新しい配列を作り直しているためです。これもReactで仮想DOMを作成する際に役に立つ（はず）です。

・splice関数

すでにある配列の要素を直接操作することができる関数です。要素の追加も削除も行うことができます。いくつかできることがあるので、書き方が主に4種類あります（勉強不足でほかにもあるかもしれませんがご容赦ください）

const array = [1, 2, 3, 4, 5];

array.splice(0, 1)
// splice(配列のスタート地点, そこから消す個数)

引数が二個のこの書き方は配列の要素を消す書き方です。この場合は0番目の要素である１が削除されます。

const array = [1, 2, 3, 4, 5];

array.splice(0, 0, 10)
// splice(配列のスタート地点, そこから消す個数, そこの場所に追加する要素)

引数が3個以上の時は、要素を削除した後、その場所に要素を追加することができます。

その他にも配列を操作するAPIはたくさんありますが、ここら辺を覚えておくとReactを書く際にとても便利になります。