JavaScript中生成指定范围序列的方法

技术背景

在JavaScript里，标准库并没有像PHP的range()那样直接生成指定范围序列的内置函数。不过，我们可以借助多种方式实现类似功能，满足在不同场景下生成数字或字符序列的需求。

实现步骤

生成数字序列

利用Array.keys()和扩展运算符

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

使用Array.from()

Array.from({ length: 20 }, (x, i) => i);
// 或者
Array.from(Array(20).keys());
// 或者
[...Array(20).keys()];

自定义range函数

function range(start, stop, step = 1) {
    return Array.from({ length: Math.ceil((stop - start) / step) }, (_, i) => start + i * step);
}

生成字符序列

字符迭代示例

String.fromCharCode(...[...Array('D'.charCodeAt(0) - 'A'.charCodeAt(0) + 1).keys()].map(i => i + 'A'.charCodeAt(0)));
// => "ABCD"

自定义characterRange函数

function characterRange(startChar, endChar) {
    return String.fromCharCode(...range(endChar.charCodeAt(0) - startChar.charCodeAt(0) + 1, startChar.charCodeAt(0)));
}

核心代码

生成数字序列的通用函数

const range = (start, stop, step = 1) => {
    return Array.from({ length: Math.ceil((stop - start) / step) }, (_, i) => start + i * step);
};

生成字符序列的通用函数

const charList = (a, z, d = 1) => {
    a = a.charCodeAt(0);
    z = z.charCodeAt(0);
    return [...Array(Math.floor((z - a) / d) + 1)].map((_, i) => String.fromCharCode(a + i * d));
};

最佳实践

使用第三方库

lodash库提供了_.range()函数，使用起来非常方便：

const _ = require('lodash');
_.range(10);
// => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

利用生成器节省内存

function* range(start = 0, end = null, step = 1) {
    if (end == null) {
        end = start;
        start = 0;
    }
    for (let i = start; i < end; i += step) {
        yield i;
    }
}

for (let i of range(1, 1000000)) {
    console.log(i);
}

常见问题

Visual Studio Code报错

在Visual Studio Code中使用扩展运算符...处理迭代器时，可能会遇到错误：Type 'IterableIterator' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.。解决办法是使用Array.from()替代扩展运算符：

Array.from(Array(3).keys());

处理大数字范围

当处理非常大的数字范围时，使用数组存储所有值可能会耗尽内存。此时，建议使用生成器函数，它可以逐个生成值，避免一次性生成整个数组。