Loading [MathJax]/extensions/tex2jax.js

2018年12月16日日曜日

JavaScriptでPythonのrange関数っぽいものを作る

JavaScriptで連続した適当な配列を作りたい場合

const arr = [1, 2, 3, 4, 5];
でもいいですがPythonの様なrange関数でささっと作りたい場合があります。
Rangeオブジェクトは存在しますが、DOM用のオブジェクトでありPythonのものとは用途が違います。
underscore.jsで同じようなものが提供されているのでライブラリを使用するならそれがいいでしょう。

Pythonのrange関数

Pythonのrange関数はリスト(JavaScriptで言う配列)を容易に作れる関数です。
Pythonを使う方ならお馴染みでしょう。

主な仕様は、

range(0からの終了数)
range(開始数, 終了数)
range(開始数, 終了数, STEP数)

となります。引数の数によって動作が違います。


[ソース]

#! /usr/bin/env python

# -*- coding: utf-8 -*-

print("[range]")

for i in range(10):
    print(i, end=", ")
print()

for i in range(5, 10):
    print(i, end=", ")
print()

for i in range(0, 10, 2):
    print(i, end=", ")



[結果]

[range]
0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
5, 6, 7, 8, 9,
0, 2, 4, 6, 8,

このような動作となります。
JavaScriptで同じような動作の関数を作ってみましょう。

ここあたり
https://dev.to/ycmjason/how-to-create-range-in-javascript-539i
を見ると、同じような考えでrange関数を作っている人がいます。

主な仕様は2番目のrange(開始数, 終了数)のようです。
Array.from() や Array.prototype.fill()を使った方法などがあるみたいです。
例にあるようなものに加え、STEP数まで加味出来る仕様にしましょう。


  1.   function range(/* 開始数, 終了数, STEP数 */) {  
  2.     const len = arguments.length;  
  3.     const arr = [];  
  4.     let min = 0;  
  5.     let max = 0;  
  6.     let step = 1;  
  7.   
  8. //引数の数により開始数と終了数を変える  
  9.     switch(len) {  
  10.       case 1:  
  11.         max = arguments[0];  
  12.       break;  
  13.       case 2:  
  14.         min = arguments[0];  
  15.         max = arguments[1];  
  16.       break;  
  17.       case 3:  
  18.         min = arguments[0];  
  19.         max = arguments[1];  
  20.         step = arguments[2];  
  21.       break;  
  22.     };  
  23.   
  24.     for(let i = min; i < max; i++) {  
  25. // 第三引数があればSTEP数として処理をする  
  26.       if(step != 1) {  
  27.         if(i % step == 0) {  
  28.           arr.push(i);  
  29.         }  
  30.       }else {  
  31.         arr.push(i);  
  32.       }  
  33.     }  
  34.   
  35.     return arr;  
  36.    }  
  37.   
  38.   
  39. //①  
  40.    const a1 = range(10);  
  41.    console.log(a1);  
  42.   
  43.   
  44. //②  
  45.    const a2 = range(5, 10);  
  46.    console.log(a2);  
  47.   
  48.   
  49. //③  
  50.    const a3 = range(1, 10, 2);  
  51.    console.log(a3);  
  52.   
  53. //④  
  54.    for(let i of range2(5, 10)) {  
  55.       console.log(i);  
  56.    }  


[結果]

[0,1,2,3,4,5,6,7,8,9]
[5,6,7,8,9]
[2,4,6,8]
5
6
7
8
9

レガシーな書き方ですが、こんな感じでしょうか?
④はPythonのrangeの様な使い方です。

Pythonで地図空間データを扱う⑤

ベースの地図が出来た所で、他のデータを被せてみます。 国土地理院の  500mメッシュ別将来推計人口データ  を使用します。 同じく神奈川県のデータ  500m_mesh_suikei_2018_shape_14.zip をダウンロードします。 ベースの地図データと同じ場所に展開...