JavaScriptの便利な関数(filter, map, reduce, every, some)を使ってみた
2020年9月4日
システム開発でよく使うJavaScriptの関数をおさらい!
どうも、テック備忘LOGのYuki（@tech_bibo_log）です！！
今回はJavaScriptの便利な関数をいくつか紹介したいと思います。
JavaScriptはWebサイトの構築に必ずと言っていいほどよく使います。
特にWebシステムを開発する際にはデータベースから取得した値や、APIで取得した値をフロントサイドで処理する際に、
意外とゴリゴリとプログラミングを書くことが多々あります。
これまでは他にも書き方があることを知りながらも、特に何も考えずにfor文やforEachを使ってきましたが、日々のスキルアップと、きいなプログラムを書くことで作業効率のアップにもつながるとの思いから
改めてちゃんと勉強してみることにしました！！
ということで今回は絶対知っておきたいjavascriptの関数（filter, map, reduce, every, some）を紹介していきます！
便利な関数は随時追記していきたいと思います！！（2020/09/04現在）
▽▽▽ 独自関数を紹介しています ▽▽▽
ではみていきましょう！！
[ 目次 (開く) ]
filter関数
コールバック関数で指定した条件ですべての要素を判定し、trueを返した要素のみの新しい配列を生成します。
新しく生成される配列の長さは可変で、もとの配列の長さは関係しません。
配列の中から条件に一致するやつだけ欲しい！ってときに使えます。
forEachとの違いは新しい配列を生成する点です。
Yuki
1.基礎編： 配列の中から23未満の数字のみを配列で取得
var numbers = [10, 15, 18, 19, 20, 25, 30];
function getLessThan23(value) {
return (value >= 23); // trueになるもののみ
}
var filterNum = numbers.filter(getLessThan23);
console.log(filterNum); // [25, 30]
// 次のようにも書けます。 var numbers = [10, 15, 18, 19, 20, 25, 30]; var filterNum = numbers.filter(value => (value >= 23)); console.log(filterNum); // [25, 30]
2.基礎編： 配列の中から文字列が一致するものだけを配列で返す
また次のようにfilter()内にfunction(){}を入れて書くことも可能です。
var fruits = ["apple", "orange", "melon", "orange"];
var filterItems = fruits.filter(function(value) {
return value === "orange"; // trueになるもののみ
});
console.log(filterItems); // ["orange", "orange"]
// 次のようにも書けます var fruits = ["apple", "orange", "melon", "orange"]; var filterItems = fruits.filter(value => value === "orange"); // trueになるもののみ console.log(filterItems);
2.応用編： 配列の中から文字列が部分/完全一致するものだけを配列で返す
他の方法でも実現できますがindexOf()を使用することで、部分一致にも対応できますね。
var cities = ["北海道札幌市", "大阪府大阪市", "大阪府寝屋川市", "北海道旭川市"];
var filterItems = cities.filter(function(value) {
if(value.indexOf("北海道") != -1){
return value;
}
});
console.log(filterItems); // ["北海道札幌市", "北海道旭川市"]
map関数
各要素に対して決まった繰り返し処理をして、新しい配列を生成します。
実行対象となる配列の数(before)と、新たに生成された配列の数(after)は変わらないところが注意点です。
1.基礎編： 配列の中の数値に10%を加算した値を新しい配列で取得
arrayは元の配列。index, arrayは省略可能。
var price = [100, 500, 1250, 7890, 8900];
price = price.map(function(value, index, array) {
return value * 1.1;
});
console.log(price); // [110.00000000000001, 550, 1375, 8679, 9790]
// 次のようにも書ける。
var price = [100, 500, 1250, 7890, 8900];
function tax (value) {
return value * 1.1;
}
var price = price.map(tax);
console.log(price) [110.00000000000001, 550, 1375, 8679, 9790]
// また、次のようにも書ける。 var price = [100, 500, 1250, 7890, 8900]; var price = price.map(value => value * 1.1); console.log(price) // [110.00000000000001, 550, 1375, 8679, 9790]
※注意点： 新たに生成された配列の数は変わりません!!
今回の場合だと、配列の1つ目[100]の時は処理をしないようにしていますが、配列の数は変わらないためundefinedを返していますね。
var price = [100, 500, 1250, 7890, 8900];
function tax (value) {
if (value != 100) {
return value * 1.1;
}
}
var price = price.map(tax);
console.log(price) // [undefined, 550, 1375, 8679, 9790]
reduce, reduceRight関数
各要素に対して決まった繰り返し処理をして、最終的に単一的な値を生成します。
reduceRightという関数もありますが、こちらは右(最後)から処理していきます。
※reduce関数はbreakができないので注意
1.基礎編： 配列の中の数値の合算値を取得
今回の例では、配列の中の数値を全て足した合算値を取得しています。
arrayは元の配列。index, arrayは省略可能。
var total = [0, 1, 2, 3].reduce(function(prevTotal, currentValue, index, array) {
return prevTotal + currentValue;
});
console.log(total); // 6
every関数, some関数
何となく関数名からニュアンスは伝わってきますが、それぞれの関数について簡単に紹介します。
1.every関数：
every関数は配列の中のすべての値が条件に一致した場合はtrueを返します。
結果はboolean。
arrayは元の配列。index, arrayは省略可能。
var passed = [12, 54, 18, 130, 44].every(function(val, index, array) {
return (val >= 10);
});
console.log(passed); // true
var passed = [130, 44, 9, 55].every(function(val, index, array) {
return (val >= 10);
});
console.log(passed); // false
2.some関数：
some関数は配列の中から条件に一致した値が見つかった場合はtrueを返します。
結果はboolean。
arrayは元の配列。index, arrayは省略可能。
passed = [2, 5, 8, 1, 4].some(function(val, index, array) {
return (val >= 10);
});
console.log(passed); // false
passed = [2, 5, 10, 8].some(function(val, index, array) {
return (val >= 10);
});
console.log(passed); // true
要するに、everyは条件を全ての値が満たすか、
またsomeは条件を満たすものがあるかの判定します。
Yuki
some関数の違う使い方！
配列を扱う際にforEachを使いますが、この関数はreturn;とすることでcontinueと同じことはできますがbreakは出来ません。
そのため条件に一致した際にbreak;をしたい！といった場面ではsome関数を使うことで実現可能になります。
1.some関数でcontinueをする
var a=[1,2,3,4,5]
a.some(function(val,index){
if(index==2) return false;
console.log(index);
});
//結果 0,1,3,4が表示される
2.some関数でbreakをする
var a=[1,2,3,4,5]
a.some(function(val,index){
if(index==2) return true;
console.log(index);
});
//結果 0,1が表示される
まとめ
以上で、JavaScriptの便利な関数(filter, map, reduce, every, some)の紹介は終わりです。
正直どれを使っても同じような処理は書けちゃうと思います。
ちゃんと理解していない場合、どれを使うのがいいのか考えるのも面倒で最終的にfor文で冗長な書き方になってしまう方が多いんじゃないかと思います。
ですがここまでの説明で少しは違いが明確になったんじゃないでしょうか！
ここでもう一度、簡単に復習してみましょう。
Yuki
【filter, map, reduce, every, some】の使い分け方について
- filter関数： 条件に一致する要素だけを、新しい配列で取得します
- map関数 ： 配列内の全ての要素に処理をして、同じ長さの配列で返します
- reduce関数： 配列内の全ての要素に処理をして、最終的に単一的な値を生成します
- every関数 ： 条件を全ての値が満たすか判定します
- filter関数： 条件を満たすものがあるか判定します
ぜひ、今後のプログラミングに積極的に取り入れていきましょう！
一緒に、きれいで読みやすく、分かりやすい書き方をマスターしていきましょう。
それでは、ありがとうございました！！！
