javascript 便利メソッド[forEach,map,filter,find,every,some,reduce] 使い方について
14058 ワード
記事を書こうと思った経緯
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
Author And Source
この問題について(javascript 便利メソッド[forEach,map,filter,find,every,some,reduce] 使い方について), 我々は、より多くの情報をここで見つけました https://qiita.com/_Jean_/items/f7ae25ff0fe1db6fb30f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .