LoginSignup
3
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-02-10

今回取り上げるのは、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

参考

3
5
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5