JavaScriptで、関数を操作するときによく使う関数をまとめました。
es6のアロー関数を用いています。
Map
配列全体を加工して、新しい配列を作成します。
const a = 3
const ary = [1, 2, 3, 4, 5]
// 配列のすべての値をaの値だけ足します。
const result = ary.map(item => item + a)
// result = [4, 5, 6, 7, 8]
返り値として新しく作成された配列が返ってきます。
関数の中でreturnした内容が、そのまま配列の要素として上書きされていきます。
forEach
配列全体に対して、処理をしたい時に使用します。
const ary = [1, 2, 3, 4, 5]
// 配列の中のものをすべてconsole.logします。
ary.forEach(item => {
console.log(item)
})
返り値はundefinedです。
filter
配列の中から、必要な要素だけ抜き出すことができます。
const ary = [1, 2, 3, 4, 5]
// 3より小さいものだけを抜き出します。
const result = ary.filter(item => item < 3)
// result = [1, 2]
関数の中ではtrue, falseのいずれかを返す必要があります。
trueならその要素が残り、falseであれば破棄されます。
find
es6から対応です。
配列の中から、特定の要素を1つ抜き出すことができます。
const a = 'blue'
const ary = ['red', 'green', 'blue', 'yellow', 'white']
// aと同じ要素があれば、抜き出します。
const result = ary.find(item => item === a)
// result = 'blue'
最初に関数の中がtrueを返した時点で処理が中断され、要素がそのまま返ってきます。2つ以上要素があった場合でも、最初の要素のみが返ってきます。
見つからなかった場合は、undefinedが返ってきます。
findIndex
es6から対応です。
配列の中から、特定の要素のインデックスを返します。
基本的な使い方はfindと同じです。
const a = 'blue'
const ary = ['red', 'green', 'blue', 'yellow', 'white']
// aと同じ要素があれば、そのインデックス(何番目か)を返します。
const index = ary.findIndex(item => item === a)
// index = 2
const result = ary[index]
// result = 'blue'
一点注意なのが、検索結果が見つからなかったとき、findIndexは -1 を返します。
つまり、要素が存在するかどうかを判定するのに、
const index = ary.findIndex(item => item === 2)
if (!index) {
// ... (合致した要素がなかった場合)
}
では誤りで、
if (index === -1) {
// ... (合致した要素がなかった場合)
}
という書き方になります。
配列の内容を操作したい時は、findよりも、findIndexの方が適しています。
some
配列の中に、条件を満たした要素があるかどうかをチェックする関数です。
返り値はtrue, falseのどちらかです。
const ary = [1, 2, 3, 4, 5]
// 配列の中に偶数が含まれているかどうかをチェックします
const isIncludeEven = ary.some(item => item % 2 === 0)
// isIncludeEven = true
every
配列のすべての要素に対してチェックを行い、
そのすべてが合致すればtrue, ひとつでも違うものがあればfalseを返します。
const ary = [2, 4, 7, 8, 10]
// 配列の中身がすべて２で割れるかどうかをチェックします
const isAllEven = ary.every(item => item % 2 === 0)
// 7は、2で割った余りが1なので、条件に合致しない。
// isAllEven = false
アロー関数
補足です。
アロー関数とは、es6から追加された新しい関数の書き方です。
特徴としては
- 1行で書く場合にはreturn文、ブラケット{}を省略できる。
- thisのスコープが固定される
など、functionを用いた書き方に比べてシンプルに記述することができます。
const result = ary.map(item => item * 2)
これは、
const result = ary.map(function(item) {
return item * 2;
});
と同じものです。