JavaScriptでは配列を便利に操作するmapやfilterといったメソッドが多数用意されています。こうした配列を操作するメソッドを勉強することで、データの扱いが上手くなり、コードを簡潔に書くこともできるようになります。なお、同じ配列でも連想配列(オブジェクトリテラル)はObject型のオブジェクトで今回紹介するいくつかのメソッドは全て用意されていないので注意してください。しっかりと本記事で勉強しましょう。

mapメソッド

mapメソッドの基本

mapメソッドはArray型のオブジェクトに用意されているメソッドで、全ての配列で使用することができます。mapメソッドは配列の各要素を自分で定義した関数によって加工することができます。加工された要素は新しい配列に格納されて返り値としてその新しい配列が返されます。例えば次のようなコードでmapメソッドを使用することができます。

let num = ["2","7","8","9","3"]
let map1 = num.map(function(value,index,array){
   return parseInt(value);
});
console.log(map1);//結果：[2,7,8,9,3]

mapメソッドの引数には施したい処理を行う関数を渡します。関数の第一引数のvalueは配列numの要素の値を、第二引数のindexは配列numのindex番号を、第三引数のarrayは元の配列であるnum自身を示します。このように引数を渡すことで、元の配列の情報を関数に引き渡すことができます。今回はString(文字列)型の要素が格納されている配列の各要素の型をNumber型に変更する関数を定義しました。

return parseInt(value);

parseIntメソッドはString型の値をNumber型の値に変更するメソッドです。mapメソッドでは返り値を返すために必ずreturn文を記述してください。

filterメソッド

filterメソッドの基本

filterメソッドは定義した関数によって配列の各要素を判定して、条件にあう要素だけを取り出すメソッドです。filterメソッドの引数に渡した関数がtrueを返した要素のみ含めた新しい配列を作成します。次のようなコードでfilterメソッドを使用することができます。

let num1 = [2,7,2,8,45,67,23,56,78,34]
let filter1 = num1.filter(function(value,index,array){
   return value % 2 === 0;
})
console.log(filter1);//結果：[2, 2, 8, 56, 78, 34]

今回は配列の中の数字のうち、偶数のみを取り出す条件を定義しました。filterメソッドもmapメソッドと同様に元の配列のindex番号や値を引数を渡すことによって、定義した関数で処理することができます。filterメソッドは定義した関数からtrueが返されたときにのみ、その要素を新しい配列に含めます。

return value % 2 === 0;

%演算子は除算した値のあまりを返します。偶数の場合、２で割ったあまりは０なので、２の倍数の要素の場合はtrueが返されます。

 filterメソッドによる素数の判定

配列の中の複雑な素数の判定もif文とfilterメソッドを使って実現し、素数のみを取り出すこともできます。次のようなコードとなります。

let num2 = [3,7,8,11,14,17,23,54,13]
let filter2 = num2.filter(function(value,index,array) {
   if (value === 2){
       return true;
   }else{
       for (let i = 2; i < value; i++) {
           if (value % i === 0){
               return false;
           } else{
               return true;
           }
         }  
   }
});
console.log(filter2);//結果：[3, 7, 11, 17, 23, 13]

素数は１とその数以外で割ることができない数です。原則として２は素数なので、最初の条件分岐で要素が２であるときはtrueを返します。そうでなかった場合は２以上かつその数より小さい値で割れるかどうかをfor文を使って判定します。

for (let i = 2; i < value; i++) {
  if (value % i === 0){
    return false;
  }else{
    return true;
  }
}

割る数iを２から１づつ増加させていき、割ることができればfalse、割ることができなければtureを返します。このように、filterメソッドの中にfor文を書くことでさらに複雑な条件で値を絞り込むことができます。

reduceメソッド

reduceメソッドを使うと配列の要素を順に処理して、結果を一つの値にまとめることができます。次のように記述します。

console.log(Array.reduce(function(result,value,index,array){
  //繰り返す処理
},init));

今までのメソッドとはちがって、第一引数には前の処理の結果であるresultを引き受けます。resultの初期値はinitで設定できますが、省略すると初期値は配列の最初の要素となります。実際のコードは次のようになります。

let arr = [1,2,3,4,5]
console.log(arr.reduce(function(result,value,index,array){
  return result * value;
}))//結果：120

reduceメソッドの引数に設定された関数では直前の処理の結果と要素の値を掛け合わせる処理を定義しています。初期値は設定されていないので、最初の処理では配列の最初の要素である「１」がresultに設定されます。最終的に配列arrの要素全てを掛け合わせた結果を返すことができます。

everyメソッド

everyメソッドは指定した配列の要素全てが定義した条件に合致するか判定するメソッドです。返り値として真偽値を返します。配列num1の要素が全て５０以下か判定したいときは次のように書きます。

let num1 = [2,7,2,8,45,67,23,56,78,34]
console.log(num1.every(function(value){
   return (value < 50)
}));//結果:false

一つでも条件に合致しない場合、everyメソッドはfalseを返します。

someメソッド

someメソッドはeveryメソッドと違って、定義した条件に最低一つ以上の要素が合致すれば、trueを返します。先ほどのコードをeveryメソッドの部分のみsomeメソッドに変更すると違いがわかります。

let num1 = [2,7,2,8,45,67,23,56,78,34]
console.log(num1.some(function(value){
   return (value < 50)
}));//結果:true

一つ以上の要素が定義した条件に合致するのでtrueが返されます。

この記事のまとめ

本記事ではJavaScriptの配列に用意されているメソッドの扱い方について学びました。JavaScriptの配列の操作に慣れて、プログラミング力の基礎をしっかりと固めましょう！！最後に今回学んだことをまとめます

• mapメソッドは定義した処理によって、元の配列を変更して新しい配列を作ることができる
• filterメソッドによって定義した条件にあう要素のみを配列から取り出すことができる。
• reducetメソッドで配列の値全てに処理を施し、１つの値にすることができる。
• everyメソッドによって配列の要素全てが定義した条件に合うかどうか知ることができる。
• someメソッドによって配列の要素が一つでも定義した条件に合うかどうか知ることができる。

ぜひ、配列の操作を利用して、JavaScriptをさらに便利に使用しましょう！！