JavaScript tips - Number に map メソッドを追加して様々な配列を楽に作る方法

phi phi on javascript

前回書いた『JavaScript tips - Number に times メソッドを追加して Ruby ライクに使えるようにしよう | phiary』の発展です.

Array.prototype.map 的な機能を Number.prototype に追加して, 様々な配列を楽に作る方法について紹介します.

d3.js でグラフ作る際に, ダミーとなるランダムなデータを作る時とかに便利ですよ♪

map とは

Array.prototype.map とは EcmaScript5 から追加されたメソッドです. 与えられた関数をすべての要素に対して実行し, その結果からなる配列を生成する便利なメソッドです.

使い方はこんな感じ.

var a = [0, 1, 2, 3, 4];  
var b = a.map(function(d) {  
  return d*2;
});
console.log(b); // 0, 2, 4, 6, 8  

今回は, これと同じような感じで使えるメソッドを Number.prototype に 追加する方法を紹介します.

Runstant Demo

とりあえずデモです.

シンプルなコードで, 様々な配列を作っているのがわかるかと思います.

Define

前回 と同じく Object.defineProperty で Number.prototype に対して map メソッドを追加しています.

Object.defineProperty(Number.prototype, 'map', {  
  value: function(fn, self) {
    var arr = [];
    self = self || this;
    for (var i=0; i<this; ++i) {
      var v = fn.call(self, i);
      arr.push(v);
    }
    return arr;
  }
});

やっているのは渡された関数を自身の数値回ループして実行し, すべての結果を配列として返しているだけです.

Usage

使い方の例です.

0~n の配列を作る

var arr = (5).map(function(i) {  
  return i;
});
console.log(arr); // 0,1,2,3,4  

i*2 の配列を作る

var arr = (5).map(function(i) {  
  return i*2;
});
console.log(arr); // 0,2,4,6,8  

ランダムな数値が入った配列を作る

var arr = (5).map(function() {  
  return (Math.random()*5)|0;
});
console.log(arr); // random