在 JavaScript 中创建一个包含 1 到 N 个数字的数组

作者

使用 Array.from() 创建一个包含 1 到 N 个数字的数组

Create an Array containing 1 to N numbers in JavaScript

要创建一个包含从 1 到 N 的数字的数组：

  1. 将所需的长度和函数传递给该Array.from()方法。
  2. 该Array.from()方法将返回一个包含指定数字的新数组。
索引.js
const total = 5;

const arr = Array.from(
  {length: total},
  (_, index) => index + 1
);
console.log(arr) // 👉️ [1, 2, 3, 4, 5]

我们传递给该方法的参数Array.from()是：

  1. 数组应包含多少个元素。
  2. 为数组中的每个元素调用的函数。
使用下划线_字符是为了表示我们不需要访问函数的第一个参数，即数组元素的值。

调用Array.from(3)返回一个包含 3 个元素的数组，其值为
undefined。

我们在函数中使用了数组元素的索引。Javascript 索引是从零开始的，因此我们必须添加1才能获得所需的结果。

如果您必须经常这样做，请定义一个可重用的函数。

索引.js
function generateArray(size, start) {
  return Array.from({length: size}, (_, index) => index + start);
}

console.log(generateArray(3, 1)); // [ 1, 2, 3 ]
console.log(generateArray(5, 1)); // [ 1, 2, 3, 4, 5 ]

console.log(generateArray(3, 0)); // [ 0, 1, 2 ]
console.log(generateArray(5, 3)); // [ 3, 4, 5, 6, 7 ]

该函数将所需的数组大小和起始值作为参数，并生成一个值从start到 N 的数组。

使用 keys() 创建一个从 0 到 N 的数组

如果要创建一个从0到 N 的数组，也可以使用Array()
构造函数。

索引.js
const arr = Array.from(Array(8).keys());

// [
//   0, 1, 2, 3,
//   4, 5, 6, 7
// ]
console.log(arr);

我们使用Array()构造函数创建了一个包含 8 个空元素的数组。

下一步是使用该Array.keys()方法获取数组中键（索引）的可迭代对象。

索引.js
// [ <8 empty items> ]
console.log(Array(8));

const arr = Array.from(Array(8).keys());

// [
//   0, 1, 2, 3,
//   4, 5, 6, 7
// ]
console.log(arr);

最后一步是使用该Array.from()方法将可迭代对象转换为数组。

使用扩展语法创建一个包含 1 到 N 个数字的数组 (…)

使用该Array.from()方法的另一种方法是使用扩展语法 (…)。

索引.js
const n = 5;

const array = [...Array(n + 1).keys()].slice(1);
console.log(array); // 👉️ [ 1, 2, 3, 4, 5 ]

我们使用扩展语法 (…) 将可迭代对象的元素解包到一个新数组中。

我们使用了该Array.keys()方法，因此元素从0.

要获得一个从 开始的数组1，我们必须使用slice()省略结果中的第一个元素。

或者，您可以链接对该Array.map()方法的调用。

索引.js
const arr = [...Array(8).keys()].map(index => index + 1);

// [
//   1, 2, 3, 4,
//   5, 6, 7, 8
// ]
console.log(arr);

我们传递给方法的函数Array.map()被数组的每个元素调用。

在每次迭代中，我们将索引递增1并返回结果。

如果要从 开始数组0，直接使用该Array.keys()方法。

索引.js
const arr = [...Array(8).keys()];

// [
// 0, 1, 2, 3,
// 4, 5, 6, 7
// ]
console.log(arr);

# for使用循环创建一个包含 1 到 N 个数字的数组

这是一个三步过程：

  1. 创建一个空数组来保存数字。
  2. 使用for循环迭代 N 次，从1.
  3. 在每次迭代中，将当前索引推入数组。
索引.js
const arr = [];

const total = 5;

for (let i = 1; i <= total; i++) {
  arr.push(i);
}

console.log(arr); // 👉️ [1, 2, 3, 4, 5]

我们使用for循环迭代 N 次，将i变量的值压入数组。

# 创建一个包含 1 到 N 个数字的数组，使用lodash

如果使用该lodash库，还可以使用
lodash.range方法创建从 1 到 N 的数组。

索引.js
import _ from 'lodash';

console.log(_.range(5)); // 👉️ [ 0, 1, 2, 3, 4 ]

console.log(_.range(1, 5)); // 👉️ [ 1, 2, 3, 4 ]

console.log(_.range(1, 6, 2)); // 👉️ [ 1, 3, 5 ]

如果需要安装lodash，运行以下命令。

壳
# 👇️ initialize a package.json file if you don't have one
npm init -y

npm install lodash

该lodash.range方法有 3 个参数：

  1. 范围的开始。默认为0.
  2. 范围的末端。
  3. 一个可选的递增步长值。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：