js 如何使用range生成指定范围的数组-js教程-PHP中文网

js 如何使用range生成指定范围的数组

幻夢星雲

发布： 2025-08-18 11:16:01

原创

546人浏览过

循环方式通过for循环逐个添加元素，代码直观但冗长；2. array.from结合长度和映射函数生成数组，现代且可读性强；3. 扩展运算符配合array.keys()利用索引映射生成数组，写法巧妙但性能略低；4. 递归方式不推荐，因效率低且有栈溢出风险；对于步长和倒序需求，可在array.from基础上调整计算逻辑；性能方面，循环和array.from较优，扩展运算符次之，递归最差；综合可读性与性能，array.from是最佳选择，适用于大多数场景。

js 如何使用range生成指定范围的数组

简单来说，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

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

如何生成包含特定步长的数组？

如果需要生成的数组不是连续的，而是具有特定的步长，比如生成

[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: xxxms

console.time('from');
rangeFrom(1, 100000);
console.timeEnd('from'); // 输出: from: xxxms

console.time('keys');
rangeKeys(1, 100000);
console.timeEnd('keys'); // 输出: keys: xxxms

登录后复制

在实际应用中，根据数组范围的大小和对性能的要求，选择合适的方法。通常来说，