Edited at

es6でよく使う、配列の中身を操作・検索する関数

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した内容が、そのまま配列の要素として上書きされていきます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map


forEach

配列全体に対して、処理をしたい時に使用します。

const ary = [1, 2, 3, 4, 5]

// 配列の中のものをすべてconsole.logします。
ary.forEach(item => {
console.log(item)
})

返り値はundefinedです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach


filter

配列の中から、必要な要素だけ抜き出すことができます。

const ary = [1, 2, 3, 4, 5]

// 3より小さいものだけを抜き出します。
const result = ary.filter(item => item < 3)
// result = [1, 2]

関数の中ではtrue, falseのいずれかを返す必要があります。

trueならその要素が残り、falseであれば破棄されます。

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


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が返ってきます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find


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.find(item => item === 2)

if (!index) {
// ... (合致した要素がなかった場合)
}

では誤りで、

if (index === -1) {

// ... (合致した要素がなかった場合)
}

という書き方になります。

配列の内容を操作したい時は、findよりも、findIndexの方が適しています。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex


some

配列の中に、条件を満たした要素があるかどうかをチェックする関数です。

返り値はtrue, falseのどちらかです。

const ary = [1, 2, 3, 4, 5]

// 配列の中に偶数が含まれているかどうかをチェックします
const isIncludeEven = ary.some(item => item % 2 === 0)

// isIncludeEven = true

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some


every

配列のすべての要素に対してチェックを行い、

そのすべてが合致すればtrue, ひとつでも違うものがあればfalseを返します。

const ary = [2, 4, 7, 8, 10]

// 配列の中身がすべて2で割れるかどうかをチェックします
const isAllEven = ary.every(item => item % 2 === 0)

// 7は、2で割った余りが1なので、条件に合致しない。
// isAllEven = false

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every


アロー関数

補足です。

アロー関数とは、es6から追加された新しい関数の書き方です。

特徴としては


  • 1行で書く場合にはreturn文、ブラケット{}を省略できる。

  • thisのスコープが固定される

など、functionを用いた書き方に比べてシンプルに記述することができます。

const result = ary.map(item => item * 2)

これは、

const result = ary.map(function(item) {

return item * 2;
});

と同じものです。