javascript 便利メソッド[forEach,map,filter,find,every,some,reduce] 使い方について

記事を書こうと思った経緯

javascriptのスキルはwebのライブラリやフレームワークを扱う上で必須のスキルのため。
以前にjavascriptを学んだが、だいぶ時間がたってしまったので、最初から学びたいと思いました。

今回使用した教材

Udemy JavaScriptエンジニアのためのES６完全ガイド　講師　Ken Fukuyamaさん

ES6とは

ECMAScript(標準規格)の６番目のバージョンのこと。次世代javascript。ES6とES2015は同じもの。
注意事項
EC6は全てのブラウザで動くわけではないので、そのままでは動かないブラウザも多い。エラーになる場合も多い。そのため、Babelというツールを使ってES5のコードに変換してあげる必要がある。

配列メソッド

配列の便利メソッド一覧
forEach
map
filter
find
every
some
reduce

forEach

forEach.js

//数字の配列
var numbers = [1, 2, 3, 4, 5];
//合計を保持する変数
var sum = 0;
//配列の数字を合計に一つずつ足していく
numbers.forEach(function(number){
 sum += number;
});
sum;
//=> 15

map (配列のある値を指定したい場合に使用する)

map.js

配列の値を２倍にする処理

var numbers = [1, 2, 3, 4, 5];
//新しい配列を用意する
var doubledNumbers = [];
//数字を２倍にした値を配列に戻す
var doubled = numbers.map(function(number) {
 return bumber * 2;
});
doubled;
//=>[2,4,6,8,10]
//returnは必ずつける

filter (データの一覧から必要な情報を選択して絞り込みたい場合に使用する)

filter.js

var products = [
{ name: 'トマト', type: '野菜', quantity: 0, price: 6 },
{ name: 'りんご', type: 'フルーツ', quantity: 10, price: 16 },
{ name: 'なす', type: '野菜', quantity: 20, price: 6 },
{ name: 'レモン', type: 'フルーツ', quantity: 3, price: 6 }
];
//種類がフルーツ、量が１個より多く、値段が９より小さいものを配列から取り出す
products.filter(function(product){
  return product.type === 'フルーツ'
  && product.quantity > 1
  && product.price < 9;
});

//=>[{"name":"レモン","type":"フルーツ","quantity":3,"price":6}]

find(特定のデータを取り出す場合に使用する)

find.js

var users = [
  { name: '鈴木' },
  { name: '佐藤' },
  { name: '田中' }
  ];

var users;
//配列からuser.nameが田中を見つけて取り出す
users.find(function(user) {
           return user.name === '田中';
           });

//=>{"name":"田中"}
//findでは最初に見つけた要素を取り出す

every(条件を全て検証し全て条件があてはまるとき。　論理積)

every.js

var computers = [
  { name: 'ASUS', ram: 25 },
  { name: 'TOSHIBA', ram: 14 },
  { name: 'mac', ram: 5 }
  ];
//全てのramが１５以上であるか？
computers.every(function(computer) {
  return computer.ram>= 15;
});

//=>False

some(条件を全て検証して、どれか一つでも条件が当てはまる場合。　論理和)

some.js

var computers = [
  { name: 'ASUS', ram: 25 },
  { name: 'TOSHIBA', ram: 14 },
  { name: 'mac', ram: 5 }
  ];
//一つでもramが１５以上であるか？
computers.some(function(computer) {
  return computer.ram>= 15;
});

//=>True

reduce(プロパティの集約)

redue.js

var numbers = [ 3, 5, 4 ];
var sum = 0;

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