ES6の便利メソッド（forEach, map, filter, find, some, every, reduce）

配列の便利メソッド

forEach
map
filter
find
some
every
reduce

配列をいじる時に、for文で書いた場合と便利メソッドで書いた場合で、上記のメソッド達がどれだけ便利で、綺麗になるのか。
実際にコードにしてみる。

forEach

use case →配列の中身の合計を求めたい時

for文を使った場合

const numbers = [1, 24, 3, 45, 23];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

forEachを使った場合

const numbers = [1, 24, 3, 45, 23];
let sum = 0;

numbers.forEach(function(number){
  sum += number;
});

map

use case → 別の配列を生成したいとき

例→fruitsという配列から名前だけを取り出した配列を生成する。

for文を使った場合

const fruits = [
  {name: 'apple', price: 100},
  {name: 'banana', price: 200}
];
const names = [];

for (let i = 0; i < fruits.length; i++) {
  names.push(fruits[i].name);
}

mapを使った場合

const fruits = [
  {name: 'apple', price: 100},
  {name: 'banana', price: 200}
];

const names = fruits.map(function(fruit){
  return fruit.name;
});

filter

use case → 配列から特定のものだけ取り出して新たに配列を生成したいとき。

例→fruitsという配列からpriceが100以下のものだけを取り出す。

for文を使った場合

const fruits = [
  {name: 'apple', price: 100},
  {name: 'banana', price: 200}, 
  {name: 'orange', price: 99}, 
  {name: 'cherry', price: 120}
];
const cheapFruits = [];

for (let i = 0; i < fruits.length; i++) {
  if (fruits[i].price <= 100) {cheapFruits.push(fruits[i]);}
}

filterを使った場合

const fruits = [
  {name: 'apple', price: 100},
  {name: 'banana', price: 200}, 
  {name: 'orange', price: 99},
  {name: 'cherry', price: 120}
];

const cheapFruits = fruits.filter(function(fruit){
  return fruit.price <= 100;
});

find

use case → 配列から特定の値を見つけたい時。

例→fruitsという配列からnameがorangeかつpriceが100以下の値を取り出したい。

for文を使った場合

const fruits = [
  {name: 'orange', price: 130},
  {name: 'banana', price: 80},
  {name: 'orange', price: 99},
  {name: 'cherry', price: 120}
];
let target;

for (let i = 0; i < fruits.length; i++) {
  if (fruits[i].name === 'orange' && fruits[i].price <= 100) {
    target = fruits[i];
    break;
  }
}

findを使った場合

const fruits = [
  {name: 'orange', price: 130},
  {name: 'banana', price: 80},
  {name: 'orange', price: 99},
  {name: 'cherry', price: 120}
];

let target = fruits.find(function(fruit){
  return fruit.name === 'orange' && fruit.price <= 100;
}); 

some

use case → 条件を一つ一つ検証していき、一つでも当てはまるかどうか知りたい時。（論理和）

例→一つでも30点以下の教科があるかどうかを知りたい。

for文を使った場合

const results = [
  {subject: 'japanese', score: 40},
  {subject: 'history', score: 70},
  {subject: 'math', score: 25},
  {subject: 'english', score: 80}
];
let failed = false;

for (let i = 0; i < results.length; i++) {
  if (results[i].score <= 30) {
    failed = true;
    break;
  }
}

someを使った場合

const results = [
  {subject: 'japanese', score: 40},
  {subject: 'history', score: 70},
  {subject: 'math', score: 25},
  {subject: 'english', score: 80}
];

const failed = results.some(function(result){
  return result.score <= 30;
});

every

use case → 条件を一つ一つ検証していき全て条件が当てはまるかどうか知りたい時（論理積）

例→全ての教科が50点を超えているかを知りたい。

for文を使った場合

const results = [
  {subject: 'japanese', score: 40},
  {subject: 'history', score: 70},
  {subject: 'math', score: 25},
  {subject: 'english', score: 80}
];
let pass = true;

for (let i = 0; i < results.length; i++) {
  if (results[i].score < 50) {
    pass = false;
    break;
  }
}

every文を使った場合

const results = [
  {subject: 'japanese', score: 40},
  {subject: 'history', score: 70},
  {subject: 'math', score: 25},
  {subject: 'english', score: 80}
];
const pass = results.every(function(result){
  return result.score >= 50;
});

reduce

use case →配列の中身の合計を求めたい時

for文を使った場合

const numbers = [1, 24, 3, 45, 23];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

forEachを使った場合

const numbers = [1, 24, 3, 45, 23];

var sum = numbers.reduce(function (accumulator, number) {
  return accumulator + number;
},0);
//0は初期値。

これらのメソッドを使ってみて、良いと思った点

・メソッド名をみただけで何をしようとしているのかが分かる。(for文だと中身の処理をみなければわからない)
・for(let i = 0; array.length < i; i++) ←こいつを書かなくて済む
・for文に比べコード量が少ない
・なんかスタイリッシュでかっこいい

これらのメソッドを使う際に覚えておくこと

・forEach以外のメソッドは必ずreturnを書かなければいけない。
　→意外と忘れがち。想定通りに動かない時は、まずはここを疑う。

・コールバック関数の引数の名前は、配列名の単数形にする。
　→マストではないが意識してみるといいのかも？