12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-07-09

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

今回使用した教材

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

##ES6とは
ECMAScript(標準規格)の6番目のバージョンのこと。次世代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
配列の値を2倍にする処理

var numbers = [1, 2, 3, 4, 5];
//新しい配列を用意する
var doubledNumbers = [];
//数字を2倍にした値を配列に戻す
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 }
];
//種類がフルーツ、量が1個より多く、値段が9より小さいものを配列から取り出す
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が15以上であるか?
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が15以上であるか?
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);
//0は初期値。
//=> 12
12
12
0

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
12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?