//stackoverflow.com/a/49577331/8784402
With Delta
For javascript
smallest and one-liner
[...Array[N]].map[[v, i] => from + i * step];
Examples and other alternatives
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]
Range Function
const range = [from, to, step] =>
[...Array[Math.floor[[to - from] / step] + 1]].map[[_, i] => from + i * step];
range[0, 9, 2];
//=> [0, 2, 4, 6, 8]
// can also assign range function as static method in Array class [but not recommended ]
Array.range = [from, to, step] =>
[...Array[Math.floor[[to - from] / step] + 1]].map[[_, i] => from + i * 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]
As Iterators
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
As Generators Only
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
// Lazy loaded way
const number0toInf = Range[Infinity];
number0toInf.next[].value;
//=> 0
number0toInf.next[].value;
//=> 1
// ...
From-To with steps/delta
using iterators
class Range2 {
constructor[to = 0, step = 1, from = 0] {
this[Symbol.iterator] = function* [] {
let i = 0,
length = Math.floor[[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]
using Generators
const Range2 = function* [to = 0, step = 1, from = 0] {
let i = 0,
length = Math.floor[[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
For Typescript
class _Array extends Array {
static range[from: number, to: number, step: number]: number[] {
return Array.from[Array[Math.floor[[to - from] / step] + 1]].map[
[v, k] => from + k * step
];
}
}
_Array.range[0, 9, 1];
The Array.from[]
static method creates a new, shallow-copied Array
instance from an iterable or array-like object.Try it
Syntax
// Arrow function
Array.from[arrayLike, [element] => { /* … */ } ]
Array.from[arrayLike, [element, index] => { /* … */ } ]
// Mapping function
Array.from[arrayLike, mapFn]
Array.from[arrayLike, mapFn, thisArg]
// Inline mapping function
Array.from[arrayLike, function mapFn[element] { /* … */ }]
Array.from[arrayLike, function mapFn[element, index] { /* … */ }]
Array.from[arrayLike, function mapFn[element] { /* … */ }, thisArg]
Array.from[arrayLike, function mapFn[element, index] { /* … */ }, thisArg]
Parameters
arrayLike
An iterable or array-like object to convert to an array.
mapFn
OptionalMap function to call on every element of the array.
thisArg
OptionalValue to use as this
when executing mapFn
.
Return value
A new Array
instance.
Description
Array.from[]
lets you create Array
s from:
- iterable objects [objects such as
Map
andSet
]; or, if the object is not iterable, - array-like objects [objects with a
length
property and indexed elements].
Array.from[]
never creates a sparse array. If the arrayLike
object is missing some index properties, they become
undefined
in the new array.
Array.from[]
has an optional parameter mapFn
, which allows you to execute a map[]
function on each element of the array being created.
More clearly, Array.from[obj, mapFn, thisArg]
has the same result as Array.from[obj].map[mapFn, thisArg]
, except that it does not create an intermediate array, and mapFn only receives two arguments [element,
index] without the whole array, because the array is still under construction.
Note: This is especially important for certain array subclasses, like typed arrays, since the intermediate array would necessarily have values truncated to fit into the appropriate type.
The length
property of the from[]
method is 1
.
The
class syntax allows sub-classing of both built-in and user-defined classes. As a result, static methods such as Array.from[]
are "inherited" by subclasses of Array
, and create new instances of the subclass, not Array
. The Array.from[]
method is also defined generically and can be defined on any constructor that accepts a single number argument.
Examples
Array from a String
Array.from['foo'];
// [ "f", "o", "o" ]
Array from a Set
const set = new Set[['foo', 'bar', 'baz', 'foo']];
Array.from[set];
// [ "foo", "bar", "baz" ]
Array from a Map
const map = new Map[[[1, 2], [2, 4], [4, 8]]];
Array.from[map];
// [[1, 2], [2, 4], [4, 8]]
const mapper = new Map[[['1', 'a'], ['2', 'b']]];
Array.from[mapper.values[]];
// ['a', 'b'];
Array.from[mapper.keys[]];
// ['1', '2'];
Array from a NodeList
// Create an array based on a property of DOM Elements
const images = document.querySelectorAll['img'];
const sources = Array.from[images, [image] => image.src];
const insecureSources = sources.filter[[link] => link.startsWith['//']];
Array from an Array-like object [arguments]
function f[] {
return Array.from[arguments];
}
f[1, 2, 3];
// [ 1, 2, 3 ]
Using arrow functions and Array.from[]
// Using an arrow function as the map function to
// manipulate the elements
Array.from[[1, 2, 3], [x] => x + x];
// [2, 4, 6]
// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from[{length: 5}, [v, i] => i];
// [0, 1, 2, 3, 4]
Sequence generator [range]
// Sequence generator function [commonly referred to as "range", e.g. Clojure, PHP, etc.]
const range = [start, stop, step] => Array.from[{ length: [stop - start] / step + 1}, [_, i] => start + [i * step]];
// Generate numbers range 0..4
range[0, 4, 1];
// [0, 1, 2, 3, 4]
// Generate numbers range 1..10 with step of 2
range[1, 10, 2];
// [1, 3, 5, 7, 9]
// Generate the alphabet using Array.from making use of it being ordered as a sequence
range['A'.charCodeAt[0], 'Z'.charCodeAt[0], 1].map[[x] => String.fromCharCode[x]];
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
Specifications
ECMAScript Language Specification # sec-array.from |
Browser compatibility
BCD tables only load in the browser