ES2015のみで0からnまでの数値の範囲を生成する方法は?


122

rangePythonなどで使用できるので、JavaScriptに欠けている関数を常に見つけましたか?ES2015で範囲の数値を生成する簡潔な方法はありますか?

編集:私の質問はECMASCRIPT-5ではなくES2015に固有であるため、前述の重複とは異なります。また、範囲は0から始まり、特定の開始番号ではないことが必要です(それがそこにあればいいでしょうが)


答えはES5とES6で同じです。
loganfsmyth

1
ただし、ES2015では、ジェネレータや新しい配列メソッドなどの新しい概念をいつでも使用できます。これにより、タスクを実行するための追加のツールセットが提供されます
Aditya Singh

7
私は@Delapouiteがでこれに対する完璧な答えを持っていると思う重複質問への答えにコメント[...Array(n).keys()]
ジブ


2
[...Array(5)].map((_,i) => i+1)
ニックインディーサンス

回答:


243

新しく作成された配列のキーに対して、spread演算子を使用できます。

[...Array(n).keys()]

または

Array.from(Array(n).keys())

Array.from()活字体で作業している場合、構文が必要です


38
スウィート:function range (start, end) { return [...Array(1+end-start).keys()].map(v => start+v) }
2016年

2
これはtypescriptでは機能しません。keys()が配列ではなく配列反復子を返すためです。より普遍的なアプローチについては、aditya-singhの回答をご覧ください。
David Domingo

3
……またはArray.from(Array(n).keys())
КонстантинВан

2
@DavidGonzalezShannon Typescriptで[...Array(n).keys()]動作しない理由を知っていますか?他のJS実装からの意図的な逸脱ですか?
Stu Cox

ね@ @StuCoxなぜだかわからないが、それはそれを変換しArray(5).keys().slice()、スライスは配列反復子の方法ではない。typescriptlang.org/play/…
David Domingo

97

私はまた、次を使用してもう1つの直感的な方法を見つけましたArray.from

const range = n => Array.from({length: n}, (value, key) => key)

このrange関数は、0からn-1までのすべての数値を返します。

サポートする範囲の修正版startendなります。

const range = (start, end) => Array.from({length: (end - start)}, (v, k) => k + start);

編集 @ marco6で提案されているように、ユースケースに適している場合、これを静的メソッドとして配置できます

Array.range = (start, end) => Array.from({length: (end - start)}, (v, k) => k + start);

そしてそれを

Array.range(3, 9)

1
良いですね!Array静的インターフェイスを拡張してみませんか?typescriptは次の場合にうまく機能します:interface ArrayConstructor { range(n: number): number[]; } Array.range = n => Array.from({length: n}, (value, key) => key); そして、どこでもArray.range(x)...
marco6

[ts] Property 'range' does not exist on type 'ArrayConstructor'。どっち?
kuncevic.dev 2018年

組み込みをオーバーライドすることは、現在JavaScriptでは悪い習慣と見なされています。
jhohlfeld

16

デルタあり

JavaScriptの場合

Array.from(Array(10).keys()).map(i => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

[...Array(10).keys()].map(i => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

Array(10).fill(0).map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

Array(10).fill().map((v, i) => 4 + i * -2);
//=> [4, 2, 0, -2, -4, -6, -8, -10, -12, -14]

[...Array(10)].map((v, i) => 4 + i * 2);
//=> [4, 6, 8, 10, 12, 14, 16, 18, 20, 22]

const range = (from, to, step) =>
  Array(~~((to - from) / step) + 1) // '~~' is Alternative for Math.floor()
  .fill().map((v, i) => from + i * step);

range(0, 9, 2);
//=> [0, 2, 4, 6, 8]

Array.range = (from, to, step) => Array.from({
    length: ~~((to - from) / step) + 1
  },
  (v, k) => from + k * step
);

Array.range = (from, to, step) => [...Array(~~((to - from) / step) + 1)].map(
  (v, k) => from + k * step
)
Array.range(2, 10, 2);
//=> [2, 4, 6, 8, 10]

Array.range(0, 10, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.range(2, 10, -1);
//=> []

Array.range(3, 0, -1);
//=> [3, 2, 1, 0]


class Range {
  constructor(total = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function*() {
      for (let i = 0; i < total; yield from + i++ * step) {}
    };
  }
}

[...new Range(5)]; // Five Elements
//=> [0, 1, 2, 3, 4]
[...new Range(5, 2)]; // Five Elements With Step 2
//=> [0, 2, 4, 6, 8]
[...new Range(5, -2, 10)]; // Five Elements With Step -2 From 10
//=>[10, 8, 6, 4, 2]
[...new Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of new Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

// Or
const Range = function*(total = 0, step = 1, from = 0){
  for (let i = 0; i < total; yield from + i++ * step) {}
};

Array.from(Range(5, -2, -10));
//=> [-10, -12, -14, -16, -18]
[...Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

class Range2 {
  constructor(to = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function*() {
      let i = 0,
        length = ~~((to - from) / step) + 1;
      while (i < length) yield from + i++ * step;
    };
  }
}
[...new Range2(5)]; // First 5 Whole Numbers
//=> [0, 1, 2, 3, 4, 5]

[...new Range2(5, 2)]; // From 0 to 5 with step 2
//=> [0, 2, 4]

[...new Range2(5, -2, 10)]; // From 10 to 5 with step -2
//=> [10, 8, 6]

// Or 
const Range2 = function*(to = 0, step = 1, from = 0) {
    let i = 0, length = ~~((to - from) / step) + 1;
    while (i < length) yield from + i++ * step;
};


[...Range2(5, -2, 10)]; // From 10 to 5 with step -2
//=> [10, 8, 6]

let even4to10 = Range2(10, 2, 4);
even4to10.next().value
//=> 4
even4to10.next().value
//=> 6
even4to10.next().value
//=> 8
even4to10.next().value
//=> 10
even4to10.next().value
//=> undefined

Typescriptの場合

interface _Iterable extends Iterable < {} > {
  length: number;
}

class _Array < T > extends Array < T > {
  static range(from: number, to: number, step: number): number[] {
    return Array.from(
      ( < _Iterable > { length: Math.floor((to - from) / step) + 1 }),
      (v, k) => from + k * step
    );
  }
}
_Array.range(0, 9, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

更新

class _Array<T> extends Array<T> {
    static range(from: number, to: number, step: number): number[] {
        return [...Array(~~((to - from) / step) + 1)].map(
            (v, k) => from + k * step
        );
    }
}
_Array.range(0, 9, 1);

編集する

class _Array<T> extends Array<T> {
    static range(from: number, to: number, step: number): number[] {
        return Array.from(Array(~~((to - from) / step) + 1)).map(
            (v, k) => from + k * step
        );
    }
}
_Array.range(0, 9, 1);

更新されたTypeScriptバージョンが機能しません。指定されたサイズの空の配列を作成します。TypeScriptでArray.keysとともにArray.fromを使用する必要があります。Array.from(Array(~~((to - from) / step) + 1).keys())
デビッドドミンゴ

13

0から5までの数字

[...Array(5).keys()];
=> [0, 1, 2, 3, 4]

10

これらのソリューションの多くは、実際のArrayオブジェクトのインスタンス化に基づいて構築されています。これにより、多くのケースで作業を完了できますが、などのケースをサポートできませんrange(Infinity)。単純なジェネレータを使用して、これらの問題を回避し、無限シーケンスをサポートできます。

function* range( start, end, step = 1 ){
  if( end === undefined ) [end, start] = [start, 0];
  for( let n = start; n < end; n += step ) yield n;
}

例:

Array.from(range(10));     // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Array.from(range(10, 20)); // [ 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ]

i = range(10, Infinity);
i.next(); // { value: 10, done: false }
i.next(); // { value: 11, done: false }
i.next(); // { value: 12, done: false }
i.next(); // { value: 13, done: false }
i.next(); // { value: 14, done: false }

8

したがって、この場合は、Numberオブジェクトが配列演算子を使用してArrayオブジェクトのように動作するのが良いでしょう。

たとえば、spreadオペレーターで使用されるArrayオブジェクト:

let foo = [0,1,2,3];
console.log(...foo) // returns 0 1 2 3

Arrayオブジェクトには組み込みのイテレータがあるため、このように機能します。
この例では、同様の機能を実現するためにNumberオブジェクトが必要です。

[...3] //should return [0,1,2,3]

そのためには、その目的のためにNumberイテレータを作成するだけです。

Number.prototype[Symbol.iterator] = function *() {
   for(let i = 0; i <= this; i++)
       yield i;
}

これで、spreadオペレーターを使用して0からNまでの範囲を作成できます。

[... N] // 0 ... N配列を返すようになりました

http://jsfiddle.net/01e4xdv5/4/

乾杯。


3

ジェネレータ関数を使用できます。これは、必要な場合にのみ遅延範囲を作成します。

function* range(x, y) {
  while (true) {
    if (x <= y)
      yield x++;

    else
      return null;
  }
}

const infiniteRange = x =>
  range(x, Infinity);
  
console.log(
  Array.from(range(1, 10)) // [1,2,3,4,5,6,7,8,9,10]
);

console.log(
  infiniteRange(1000000).next()
);

より高次のジェネレーター関数を使用して、rangeジェネレーターをマッピングできます。

function* range(x, y) {
  while (true) {
    if (x <= y)
      yield x++;

    else
      return null;
  }
}

const genMap = f => gx => function* (...args) {
  for (const x of gx(...args))
    yield f(x);
};

const dbl = n => n * 2;

console.log(
  Array.from(
    genMap(dbl) (range) (1, 10)) // [2,4,6,8,10,12,14,16,18,20]
);

恐れを知らない場合は、ジェネレータのアプローチを一般化して、はるかに広い範囲(意図的なしゃれ)に対処することもできます。

const rangeBy = (p, f) => function* rangeBy(x) {
  while (true) {
    if (p(x)) {
      yield x;
      x = f(x);
    }

    else
      return null;
  }
};

const lte = y => x => x <= y;

const inc = n => n + 1;

const dbl = n => n * 2;

console.log(
  Array.from(rangeBy(lte(10), inc) (1)) // [1,2,3,4,5,6,7,8,9,10]
);

console.log(
  Array.from(rangeBy(lte(256), dbl) (2)) // [2,4,8,16,32,64,128,256]
);

ジェネレータ/イテレータは本質的にステートフルであること、つまりの呼び出しごとに暗黙的な状態変化があることに注意してくださいnext。状態は混合した祝福です。


3

ステップES6の範囲。これはpythonと同様に機能しますlist(range(start, stop[, step]))

const range = (start, stop, step = 1) => {
  return [...Array(stop - start).keys()]
    .filter(i => !(i % Math.round(step)))
    .map(v => start + v)
}

例:

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

1
質問に追加してください。これは、Angular 8 html * ngForループテンプレートでよりクリーンなコードを取得するのに役立ちました。
Sam

2

デルタをサポートするには

const range = (start, end, delta) => {
  return Array.from(
    {length: (end - start) / delta}, (v, k) => (k * delta) + start
  )
};

1

次のようなステップサポート付きの1ライナーで行うこともできます。

((from, to, step) => ((add, arr, v) => add(arr, v, add))((arr, v, add) => v < to ? add(arr.concat([v]), v + step, add) : arr, [], from))(0, 10, 1)

結果は[0, 1, 2, 3, 4, 5, 6 ,7 ,8 ,9]です。


2
これはYコンビネーターですか?
TheChetan 2017

1
Y-combinatorの考え方に従います。
MarcinKról2017

1

この関数は整数シーケンスを返します。

const integerRange = (start, end, n = start, arr = []) =>
  (n === end) ? [...arr, n]
    : integerRange(start, end, start < end ? n + 1 : n - 1, [...arr, n]);

$> integerRange(1, 1)
<- Array [ 1 ]

$> integerRange(1, 3)
<- Array(3) [ 1, 2, 3 ]

$> integerRange(3, -3)
<- Array(7) [ 3, 2, 1, 0, -1, -2, -3 ]

0
const keys = Array(n).keys();
[...Array.from(keys)].forEach(callback);

Typescriptで


両方を使用Array.fromして構文を広げる理由はありません。そして、それは既存の答えとまったく同じです。
ベルギ2017

[...Array(n).keys()]Typescriptでは機能しないことを指摘したいだけです。
PeiSong 2017

3
次にを使用しますArray.from(Array(n).keys())。私はそれがうまくいくはずだと確信していますが、拡散構文を持つリテラルは何にトランスパイルしますか?
ベルギ

0

を使用しない別のバリエーションを次に示しますArray

let range = (n, l=[], delta=1) => {
  if (n < 0) { 
    return l 
  }
  else {
    l.unshift(n)
    return range(n - delta, l) 
  }
}

0

ジェネレーターを使用すると、数値シーケンスを遅延して生成し、広い範囲で使用するメモリを少なくすることができます。

質問は特にES2015について述べていますが、多くのTypescriptユーザーがここに行き着き、ESへの変換は簡単です...

function range(end: number): IterableIterator<number>;
// tslint:disable-next-line:unified-signatures
function range(begin: number, end: number): IterableIterator<number>;

function *range(begin: number, end: number = NaN): IterableIterator<number> {
    let num = 0;
    if (isNaN(end)) {
        end = begin;
    } else {
        num = begin;
    }
    while (num < end) {
        yield num++;
    }
}

最初の2つの関数宣言は、IDEでより有益な補完提案を提供するためのものです。


Aaaaandあなたは私が投稿する前に既存のすべての答えを読んでいないと言うことができます:-/
Dave

0

マッピングだけではどうでしょう...

Array(n).map((value、index)....)はその方法の80%です。しかし、奇妙な理由でそれは機能しません。しかし、回避策があります。

Array(n).map((v,i) => i) // does not work
Array(n).fill().map((v,i) => i) // does dork

範囲について

Array(end-start+1).fill().map((v,i) => i + start) // gives you a range

奇数は、これら2回の反復子が同じ結果を返しますArray(end-start+1).entries()し、Array(end-start+1).fill().entries()

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.