パソコンのスペックが高くなってくると同時に、ブラウザが高機能になってきて、HTML5もほぼスタンダードになってきているので、もはやブラウザアプリって最強じゃね？って考える様になってきました。
そして今日もWEBサービス構築の仕事をしている時に、まあまあ数の多い任意の数字の集まりの配列の中から最大値、最小値を抜き出すという作業があったので、ブログで残しておきます。
事の発端は、とあるシステムでグラフ表示を行う際に、特殊なグラフだったので、SVGで自作をしようと奮闘していたところ、グラフの数値を表示するために、その値群の中の最大値と最小値を読み出して、グラフ表示しなければいけません。
これって結構めんどくさいんで、できればライブラリ使ってさっくり終わりたかったんですが・・・
まあ、for文使って都度やればいいかと思ったが、せっかくMath関数があるので、使ってみたくなり少しハマりポイントがあったので、備忘録とします。
Math.maxとMath.min
Math.max、Math.minは、想像通りの動きをします。
Math.max(1,2,3,4);
> 4
Math.min(1,2,3,4);
> 1
でも、配列を当てはめるとエラーが出ます。
var arr = [1,2,3,4];
Math.max(arr);
> NaN
なんと悲しい事でしょう。
他のページにも書かれていたのですぐに解決できたんですが、"apply"プロパティを使うとすんなりできるらしいです。
var arr = [1,2,3,4];
Math.max.apply(arr);
> -Infinity
あれ？？？？？？？？
よく調べてみると、配列は第二引数に当てはめるらしいです。
そして第一引数には、謎のnull・・・
var arr = [1,2,3,4];
Math.max.apply(null,arr);
> 4
Math.min.apply(null,arr);
> 1
まあ、あまり利用頻度は高くないけど覚えておくと便利ではあるし、無駄にloop処理を回さなくて良いので、悪く無し！
多重配列でも使えるのか？
ここで研究者としての血が騒いできて、通常のシンプル配列以外ではどうかを試してみたくなりました。
var arr = [[1,2,3,4],[5,6,7,8],[9,10,11,12]];
Math.max.apply(null,arr);
> NaN
多重配列はNGでしたね。
とりあえず、reduceを使って多重配列をシンプル配列に変換する事で対応できそうです。
※ちょっとくどいかな・・・
var arr = [[1,2,3,4],[5,6,7,8],[9,10,11,12]];
var arr2 = arr.reduce((pre,current) => {pre.push(...current);return pre},[]);
Math.max.apply(null,arr2);
> NaN
もちろん、多重配列がダメなので、連想配列もダメ・・・
var arr = {a:1,b:2,c:3,d:4};
Math.max.apply(null,arr);
> -Infinity
とりあえず、数の集合体１群からの最大値、最小値を抜き出すという事を覚えておこう。
こんな場面で使える
1. グラフを表示する時の最小値、最大値をデータ一覧から求める。
今回の作業をする事になった事象ですが、ビジネス系のWEBサービスでは、グラフ表示系はかなりのウェイトを占めるので、覚えておいて損は無し。
2. ECサイトなどで最大売上額や商品一覧での最小金額
ECサイトや、数値を主に扱うような場合に、集計系の処理で使う場面があるかもね〜〜〜。
3. エクセルデータをcsv取り込みして、その中の数値の最大値、最小値を求める場合
これもグラフにするケースが多いのですが、tableマトリクス表などの際も、最大値や最小値に色付けすると、表が使いやすくなる場合がありますからね。
ちなみに、数値配列の平均値を求めたい場合は、loop文をぶん回すしかなさそうです。
でも、reduce使うと、かなり短文で作れますね。
var arr = [1, 2, 3 , 4];
var total = arr.reduce(function(p, c) {return p + c;});
var avarage = total / arr.length;
console.log(avarage);
> 2.5
合計値出して、要素数で割るだけなんで、色々な書き方できそうですが、Math関数もこういう所に対応してもらいたいなあ。
0 件のコメント:
コメントを投稿