JavaScript
配列

引数に無名関数を使ってコールバックする配列操作メソッド(JavaScript)

今回取り上げるのは、JavaScriptの中で、引数に無名関数を使ったコールバック(関数)を利用して配列を操作する主なメソッドです。


  • some


    • 概要 : 配列の少なくとも1つの要素が、無名関数を使ったコールバック(関数)でTRUEになるかチェック

    • 戻り値 : TRUE or FALSE(パスしたやつがある時点でTRUEを返す)

    • 構文 : array.some(callback)


      • callback: 個々の要素を判定するための関数





  • every


    • 概要 : 配列の全要素が、無名関数を使ったコールバック(関数)によるチェック

    • 戻り値 : TRUE or FALSE(パスしなかったやつがある時点でFALSEを返す)

    • 構文 : array.every(callback)


      • callback: 全要素を判定するための関数





  • find


    • 概要 : 配列の要素1つ1つを、無名関数を使ったコールバック(関数)で評価して、trueになった最初の要素の値を返す

    • 戻り値 : trueとなった要素の

    • 構文 : array.find(callback)


      • callback: 個々の要素を判定するための関数





  • forEach


    • 概要 : 配列中のそれぞれの要素に対して無名関数を使ったコールバック(関数)を実行する

    • 戻り値 : なし

    • 構文 : array.forEach(callback)


      • callback: 個々の要素を処理するための関数





  • map


    • 概要 : 上のforEachと同じく、配列の要素1つ1つに、第一引数に指定した無名関数を使ったコールバック(関数)を実行する

    • 戻り値 : 要素1つ1つ処理したあとの配列

    • 構文 : array.map(callback)


      • callback: 個々の要素を判定するための関数





  • filter


    • 概要 : 上のmapと同じく、配列の要素1つ1つに、第一引数に指定した無名関数を使ったコールバック(関数)を実行する
      (コールバック関数はboolean値を返す)

    • 戻り値 : trueとなった要素からなる配列

    • 構文 : array.filter(callback)


      • callback: 個々の要素を判定するための関数





  • reduce


    • 概要 : 配列の隣接する2つの要素を左から右に指定した関数で計算して、1つの値を返すメソッド

    • 戻り値 : 1つの値

    • 構文 : array.reduce(callback)


      • callback: 個々の要素を処理するための関数






主なメソッドの説明(簡易版)

メソッド
概要
戻り値

some
配列の少なくとも1つの要素がTRUEかチェック
Boolean

every
配列の全要素がTRUEかチェック
Boolean

forEach
配列の要素1つ1つに、第一引数に指定したコールバック関数を実行
なし

map
配列の要素1つ1つに、第一引数に指定したコールバック関数を実行
配列

filter
配列の要素1つ1つに、第一引数に指定したコールバック関数を実行
配列

find
配列の要素を一つずつ指定した関数で評価して、最初にtrueになった要素の値を返すやつ
trueとなった要素の値

reduce
配列の隣接する2つの要素を左から右に指定した関数で計算

個々の詳細を見ていきます。


some

概要 : 配列の少なくとも1つの要素が、無名関数を使ったコールバック(関数)でTRUEになるかチェック

戻り値 : TRUE or FALSE(パスしたやつがある時点でTRUEを返す)

コールバック(関数)引数 : x


書き方


someメソッド

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

const result = ary.some(x => x == 5);
console.log(result); // => true


someメソッド

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

const result = ary.some(x => x == 6);
console.log(result); // => false


every

概要 : 配列の全要素が、無名関数を使ったコールバック(関数)によるチェックを通るか

戻り値 : TRUE or FALSE(パスしなかったやつがある時点でFALSEを返す)

コールバック(関数)引数 : x


書き方


everyメソッド

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

const result = ary.every(x => x < 10);
console.log(result); // => true


everyメソッド

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

const result = ary.every(x => x == 1);
console.log(result); // => false


find

概要 : 配列の要素1つ1つを、無名関数を使ったコールバック(関数)で評価して、trueになった最初の要素の値を返す

戻り値 : trueとなった要素の

コールバック(関数)引数 : ↓の3つ


  • 第一引数 value → 要素の値

  • 第二引数 index → インデックス番号

  • 第三引数 array → 元の配列


findメソッド

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

const result = ary.find((value, index, array) => value * 2 >= 10);
console.log(result); // => 5


書き方


forEach

概要 : 配列中のそれぞれの要素に対して無名関数を使ったコールバック(関数)を実行する

戻り値 : なし

コールバック(関数)引数 : ↓の3つ


  • 第一引数 value → 要素の値

  • 第二引数 index → インデックス番号

  • 第三引数 array → 元の配列


書き方


forEachメソッド

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

ary.forEach((value, index, array) => {
console.log(`${value} : ${index} : ${array}`)
});

// "1 : 0 : 1,2,3,4,5"
// "2 : 1 : 1,2,3,4,5"
// "3 : 2 : 1,2,3,4,5"
// "4 : 3 : 1,2,3,4,5"
// "5 : 4 : 1,2,3,4,5"



map

概要 : 上のforEachと同じく、配列の要素1つ1つに、第一引数に指定した無名関数を使ったコールバック(関数)を実行する

戻り値 : 要素1つ1つ処理したあとの配列

コールバック(関数)引数 : x


書き方


mapメソッド

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

const result = ary.map( x => x * x);
console.log(result);

// console => [1, 4, 9, 16, 25]
// process => [1*1, 2*2, 3*3, 4*4, 5*5]



filter

概要 : 上のmapと同じく、配列の要素1つ1つに、第一引数に指定した無名関数を使ったコールバック(関数)を実行する(コールバック関数はboolean値を返す)

戻り値 : trueとなった要素からなる配列

コールバック(関数)引数 : x


書き方


filterメソッド

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

const result = ary.filter( x => x % 2 == 0);
console.log(result);

// [3, 4, 5]



filterメソッド

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

const result = ary.filter( x => x >= 2);
console.log(result);

// [2, 3, 4, 5]



reduce


  • 概要 : 配列の隣接する2つの要素を左から右に指定した関数で計算して、1つの値を返すメソッド

  • 戻り値 : 1つの値

    コールバック(関数)引数 : ↓の4つ


  • 第一引数 value → 処理される要素


  • 第二引数 value → 次に処理される要素


  • 第三引数 index → インデックス番号



書き方


reduceメソッド

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

const result = ary.reduce( (x,y) => x+ y );
console.log(result);

// console => 15
// process => 1 + 2 + 3 + 4 + 5



reduceメソッド

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

const result = ary.reduce( (x,y,z) => x + y + z );
console.log(result);

// console => 25
// process => 1 + 2 + 3 + 4 + 5 + 0 + 1 + 2 + 3 + 4



参考