こんにちは！ともです(@_tomo_engineer)！

JavaScriptを利用していて、

ってよく忘れるのでいくつかメソッドについてまとめて置こうと思います。

この記事では、JavaScriptで配列に利用するメソッドについてまとめておきます。

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

こちらの配列に対して次の7つのメソッドを利用します。

filter

filterは配列の中から条件を満たしたものを返すメソッドです。

const result = array.filter( el => { 
     return el == 1 
}
console.log(result)
//out: [1, 1]

条件を満たした要素を格納した配列を返します。

『1』と一致する要素は２つあるため、『[1, 1]』の様に配列として返します。

条件を満たすものだけをフィルタリングしてくれるメソッドです。

some

someは配列に特定の要素があるかをチェックするために用います。

const tf1 = array.some( el => el ==1)
const tf2 = array.some( el => el == 100)
console.log( tf1 ) // out: true
console.log(tf2) // out: false

要素が『１』のものが存在しているので『true』を返します。

一方で要素が『100』のものは存在していないので『false』を返します。

every

配列の全要素が条件を全て満たす場合trueを返します。

someはどれか１つ条件を満たす要素が存在すればtrueを返しました。someが部分一致であれば、everyは完全一致の場合『true』を返します。

const tf1 = array.every(el => el > 0)
 const tf2 = array.every(el => el > 2)
 console.log(tf1) // out: true
 console.log(tf2) // out: false

全ての要素が0より大きいので『tf1』には『true』が格納されます。

一方で、全ての要素が2より大きい訳では無いため『tf2』には『false』が格納されます。

map

配列の全ての要素に処理を施したい場合利用します。

const res = array.map(el => el * 2)
 console.log(res) //out:[2,4,6,8,10,2]

全ての要素に対して処理を行った結果の配列が帰ってきます。

forEach

配列を回す事ができます。返り値はありません。

array.forEach( el => {
     console.log(el)
})
// out: 1
// out: 2
// out: 3
// out: 4
// out: 5
// out: 1

次の様にmapに行った処理をしても、配列に格納された値は変化しません。

array.forEach( el => { el * 2 } ) 
console.log(array) // out: [1,2,3,4,5,1]

find

配列の中から初めに条件を満たす要素を返すメソッドです。

let ret = array.find(el => el >=2)
console.log(ret) //out: 2

配列の要素の中で２以上のものを探した結果、要素の『２』が検索されました。

もし発見できなかった場合は『undefined』を返します。

findIndex

配列の中から初めに条件を満たす要素番号を返すメソッドです。

let ret = array.findIndex(el => el ===2)
console.log(ret) //out:1

『find』では条件に一致した要素が返ってきました。しかし要素ではなく要素番号が欲しい場合もありますよね。その様な場合は『findIndex』が利用できます。

『２』という要素に一致するのは配列の先頭から２つ目の要素であり、要素番号としては『１』が返ってきます。

まとめ

JavaScriptで配列に利用するメソッドについてまとめました。

この様なメソッドって暗記する必要は無いと思います。

と都度ググればOKです。色んなメソッドを使いこなしたいですね！