循环方式通过for循环逐个添加元素，代码直观但冗长；2. array.from结合长度和映射函数生成数组，现代且可读性强；3. 扩展运算符配合array.keys()利用索引映射生成数组，写法巧妙但性能略低；4. 递归方式不推荐，因效率低且有栈溢出风险；对于步长和倒序需求，可在array.from基础上调整计算逻辑；性能方面，循环和array.from较优，扩展运算符次之，递归最差；综合可读性与性能，array.from是最佳选择，适用于大多数场景。
简单来说，JavaScript中生成指定范围的数组，你可以用循环，也可以用更简洁的Array.from或者扩展运算符配合Array。具体选哪个，看你对代码可读性和性能哪个更看重。
解决方案
生成指定范围数组的方法有很多，这里提供几种常见的：
1. 循环方式：
这是最基础的方式，易于理解，但代码稍显冗长。
function rangeLoop(start, end) { const arr = []; for (let i = start; i <= end; i++) { arr.push(i); } return arr;}console.log(rangeLoop(1, 5)); // 输出: [1, 2, 3, 4, 5]
2. Array.from 方法：
Array.from 可以从一个类数组对象或者可迭代对象创建一个新的数组实例。 结合
length
属性和映射函数，可以很方便地生成指定范围的数组。
function rangeFrom(start, end) { return Array.from({ length: end - start + 1 }, (_, i) => start + i);}console.log(rangeFrom(1, 5)); // 输出: [1, 2, 3, 4, 5]// 稍微解释下：// { length: end - start + 1 } 创建了一个具有指定长度的类数组对象// (_, i) => start + i 这个映射函数，_ 表示当前元素的值（这里我们不需要），i 表示当前元素的索引// 每次迭代，都将 start + i 的结果放入新数组中
3. 扩展运算符 + Array.keys()：
这种方式稍微巧妙一些，利用了Array.keys()返回一个包含数组中每个索引键的迭代器。
function rangeKeys(start, end) { return [...Array(end - start + 1).keys()].map(i => start + i);}console.log(rangeKeys(1, 5)); // 输出: [1, 2, 3, 4, 5]// 解释：// Array(end - start + 1) 创建一个指定长度的空数组// .keys() 返回一个包含数组索引的迭代器// ... 扩展运算符将迭代器转换为数组// .map(i => start + i) 映射函数将索引转换为指定范围内的数值
4. 递归方式 (不推荐，仅作了解):
递归方式虽然可以实现，但效率较低，且容易导致栈溢出，所以不推荐在实际项目中使用。
function rangeRecursive(start, end) { if (start > end) { return []; } else { return [start, ...rangeRecursive(start + 1, end)]; }}console.log(rangeRecursive(1, 5)); // 输出: [1, 2, 3, 4, 5]
哪种方式最好？ 实际上，
Array.from
通常被认为是更现代和更具可读性的选择。
副标题1
如何生成包含特定步长的数组？
如果需要生成的数组不是连续的，而是具有特定的步长，比如生成
[1, 3, 5, 7, 9]
这样的数组，可以在上面的方法基础上稍作修改。 以
Array.from
为例：
function rangeWithStep(start, end, step) { const length = Math.floor((end - start) / step) + 1; // 计算数组长度 return Array.from({ length }, (_, i) => start + i * step);}console.log(rangeWithStep(1, 9, 2)); // 输出: [1, 3, 5, 7, 9]
关键在于计算数组的长度，以及在映射函数中乘以步长。
副标题2
如何生成倒序的数组？
有时候我们需要生成一个倒序的数组，比如
[5, 4, 3, 2, 1]
。 同样，可以在前面的基础上进行修改。
function rangeReverse(start, end) { return Array.from({ length: end - start + 1 }, (_, i) => end - i);}console.log(rangeReverse(1, 5)); // 输出: [5, 4, 3, 2, 1]
只需要在映射函数中将
start + i
改为
end - i
即可。
副标题3
性能考量：哪种方法效率更高？
对于小范围的数组，各种方法的性能差异可以忽略不计。 但当范围很大时，性能差异就会显现出来。
一般来说，循环方式和
Array.from
的性能相对较好，而扩展运算符的方式可能会稍微慢一些，因为涉及到额外的数组展开操作。 递归方式最慢，应该避免。
可以使用
console.time
和
console.timeEnd
来测试不同方法的性能：
console.time('loop');rangeLoop(1, 100000);console.timeEnd('loop'); // 输出: loop: xxxmsconsole.time('from');rangeFrom(1, 100000);console.timeEnd('from'); // 输出: from: xxxmsconsole.time('keys');rangeKeys(1, 100000);console.timeEnd('keys'); // 输出: keys: xxxms
在实际应用中，根据数组范围的大小和对性能的要求，选择合适的方法。 通常来说，
Array.from
在可读性和性能之间取得了较好的平衡。
以上就是js 如何使用range生成指定范围的数组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515971.html
微信扫一扫 
支付宝扫一扫 
