[Javascript] 配列(オブジェクト)データを作る時にはじめに値を埋め込んでおく方法。

2020/04/22

Javascript テクノロジー プログラミング

t f B! P L
eyecatch 配列操作が、javascriptとphpでごっちゃになりかけている、ユゲタです。 「データ配列」とかけまして、 「Amazonの倉庫」と、ときます。 そのココロは・・・ ハコがたくさんあるイメージです。

配列機能のニーズは突然やってくる

javascript操作をしていて、グラフ機能を作る時に、適当な連想配列を用意していたのでは、すぐにエラーがでてしまいます。 こうしたデータは、エクセルでcsvを出力したような、明確な表組みになっているのがトラブル回避のセオリーです。 そんなわけで、任意配列が3つで、その合計値を足し込んでいくという場合の案件があり、 毎回以下のような配列作成を行っていました。 # 10個のデータに[0,0,0]という3つの基礎値を埋め込んでいく。 var arrData = []; for(var i=0; i<10; i++){ arrData.push([0,0,0]); } console.log(arrData); > 0: (3) [0, 0, 0] > 1: (3) [0, 0, 0] > 2: (3) [0, 0, 0] > 3: (3) [0, 0, 0] > 4: (3) [0, 0, 0] > 5: (3) [0, 0, 0] > 6: (3) [0, 0, 0] > 7: (3) [0, 0, 0] > 8: (3) [0, 0, 0] > 9: (3) [0, 0, 0] まあ、見た感じなんの問題もないんですが、この「初期が3つの値」というのが、増えた場合や、別のデータを元に行う場合にはどうだろう?

参照データを元に処理する方法

var baseNum = 0; var lists = [10,20,30,40,50]; var arrData = []; for(var i=0; i<10; i++){ arrData[i] = []; for(var j=0; j<lists.length; j++){ arrData[i].push(beseNum); } } console.log(arrData); > 0: (3) [0, 0, 0, 0, 0] > 1: (3) [0, 0, 0, 0, 0] > 2: (3) [0, 0, 0, 0, 0] > 3: (3) [0, 0, 0, 0, 0] > 4: (3) [0, 0, 0, 0, 0] > 5: (3) [0, 0, 0, 0, 0] > 6: (3) [0, 0, 0, 0, 0] > 7: (3) [0, 0, 0, 0, 0] > 8: (3) [0, 0, 0, 0, 0] > 9: (3) [0, 0, 0, 0, 0] 基本値"baseNum"と、配列データサンプルを元に、基本配列を作成しますが、多重ループになってあまりきれいなプログラムではないですね。 そして、エンジニアであれば、こう考えるはず、「もっと簡単に書けないものか???」 javascriptを見くびってはいけません、ちゃんとこんな時のための命令は大昔からすでに実装されています。

Arrayとfillをうまく使うと簡潔に書ける

var baseNum = 0; var lists = [10,20,30,40,50]; var arrData = new Array(10).fill(new Array(lists.length).fill(baseNum)); console.log(arrData); > 0: (3) [0, 0, 0, 0, 0] > 1: (3) [0, 0, 0, 0, 0] > 2: (3) [0, 0, 0, 0, 0] > 3: (3) [0, 0, 0, 0, 0] > 4: (3) [0, 0, 0, 0, 0] > 5: (3) [0, 0, 0, 0, 0] > 6: (3) [0, 0, 0, 0, 0] > 7: (3) [0, 0, 0, 0, 0] > 8: (3) [0, 0, 0, 0, 0] > 9: (3) [0, 0, 0, 0, 0] "new Array(*)"で、1次元配列を作成して、".fill(*)"でその内部のデフォルト値を設定します。 今回は、多次元になっているので、Array関数の中でさらに同じ処理を行っているんですね。 これならfor文を書かないので、膨大なデータの場合でも、結構なスピードが担保できると思いますよ。 お試しあれ!

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ