JavaScript ES6 【forEach/map/filter/find/every/some/reduce】

ES6を勉強したので自分のためにメモする

UdemyでES6を結構しっかり学んだけど、関数系がごっちゃになりがちなので自分用にメモします。
全部便利そうなので今後しっかり使っていきたい！

forEach

オブジェクトに繰り返し処理を行いたいときに使用する。

let images = [
  { height: 10, width: 20 },
  { height: 20, width: 30 },
  { height: 30, width: 40 },
];

let areas = [];
images.forEach(function(image) {
  areas.push(image.height*image.width);
});

areas;

----- result ------
[200,600,1200]

// アロー関数使用バージョン
images.forEach(image => areas.push(image.height*image.width));

map

オブジェクトから特定のキーオブジェクトを抜き出したいときに使用する。

let colors = [
  { jp: '赤', eng: 'red' },
  { jp: '青', eng: 'blue' },
  { jp: '黄', eng: 'yellow' },
];

let engColor = colors.map(function(color) {
	return color.eng;
});

engColor;

----- result ------
["red","blue","yellow"]

// アロー関数使用バージョン
let engColor = colors.map(color => color.eng);

filter

条件に合致するものだけ抜き出したいときに使用する。

let includeCaffeine = [
  { name: 'コーヒー', caffeine: true },
  { name: '麦茶', caffeine: false },
  { name: '緑茶', caffeine: true },
];

includeCaffeine.filter(function(drink) {
  return drink.caffeine;
});

----- result ------
[{"name":"コーヒー","caffeine":true},{"name":"緑茶","caffeine":true}]

// アロー関数使用バージョン
includeCaffeine.filter(drink => drink.caffeine);

find

条件に合致する一番最初の要素を見つけたいときに使う。

let dogsOkCafe = [
  { name: 'CafeA', dogsOK: false },
  { name: 'CafeB', dogsOK: true },
  { name: 'CafeC', dogsOK: true },
];

dogsOkCafe.find(function(cafe) {
	return cafe.dogsOK;
});

----- result ------
{"name":"CafeB","dogsOK":true}
// ↑最初のひとつだけなので、CafeCははいらない

// アロー関数使用バージョン
dogsOkCafe.find(cafe => cafe.dogsOK);

every

すべてのオブジェクトが条件に合致しているかどうか判定するときに使用する

let places = [
  { name: '北海道', visited: true },
  { name: '沖縄', visited: true },
  { name: '群馬', visited: true },
];

places.every(function(place) {
  return place.visited;
});

----- result ------
True

// アロー関数使用バージョン
places.every(place => place.visited);

some

ひとつでも条件に合致しているものがあるか判定するときに使用する

let places = [
  { name: '北海道', visited: true },
  { name: '沖縄', visited: false },
  { name: '群馬', visited: false },
];

places.some(function(place) {
  return place.visited;
});

----- result ------
True

// アロー関数使用バージョン
places.some(place => place.visited);

reduce

オブジェクトを違う型にしたりするときに使用する

var fruits = [
  { type: 'Apple' },
  { type: 'Strawberry' },
  { type: 'Strawberry' },
  { type: 'Strawberry' },
  { type: 'Apple' }
];

fruits.reduce(function(prev, fruit) {
    if (fruit.type === 'Apple') { prev.apple += 1; return prev; }
    if (fruit.type === 'Strawberry') { prev.strawberry += 1; return prev; }
}, { apple: 0, strawberry: 0 });

----- result ------
{"apple":2,"strawberry":3}

// アロー関数使用バージョン
fruits.reduce((prev, fruit) => {
    if (fruit.type === 'Apple') { prev.apple += 1; return prev; }
    if (fruit.type === 'Strawberry') { prev.strawberry += 1; return prev; }
}, { apple: 0, strawberry: 0 });