JS生成指定范围数组的技巧

在JavaScript中生成指定范围的数组，方法多样。本文深入探讨了四种常见方法：传统的循环方式、现代的Array.from、巧妙的扩展运算符配合Array.keys()以及不推荐的递归方式。循环方法虽然直观但略显冗长，Array.from简洁且可读性强，扩展运算符写法精妙但性能稍逊，而递归方式因效率和栈溢出风险不建议使用。针对特定步长和倒序数组的需求，可在Array.from的基础上灵活调整。性能测试表明，循环和Array.from表现更优。综合考虑可读性和性能，Array.from是生成指定范围数组的最佳选择，尤其适用于大多数常规场景。

循环方式通过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: xxxms

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

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

在实际应用中，根据数组范围的大小和对性能的要求，选择合适的方法。 通常来说，Array.from 在可读性和性能之间取得了较好的平衡。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~