原文： JavaScript Range – How to Create an Array of Numbers with .from() in JS ES6

.from() 方法是 JavaScript ES6 中 Array 对象的一个静态方法。它从一个类似数组或可迭代的对象（如 map 和 set）创建一个新的、浅拷贝的数组实例。

这个方法从任何具有长度属性的对象中返回一个数组。你可以用它来创建一个指定范围内的数字数组。

在这篇文章中，你将了解 .from() 静态方法是什么，它是如何工作的，以及你如何在 JavaScript 中创建一个数字范围。

如果你着急了解，这里有一个方法可以帮助你获得范围：

const arrayRange = (start, stop, step) =>
    Array.from(
    { length: (stop - start) / step + 1 },
    (value, index) => start + index * step
    );

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

你可以继续阅读这篇短文来了解它的原理。

.from() 方法如何在 JavaScript 中运行

Array.from() 方法从任何类似数组或可迭代对象中返回一个数组。该方法接收一个必选参数和另外两个可选参数：

// 语法
Array.from(arraylike, mapFunc, thisArg)
  • arraylike - 一个类数组或可迭代对象，用于转换为数组。
  • mapFunc - 这是一个可选的参数。映射函数会在每个元素上被调用。
  • thisArg - 这个值在执行 mapFunc 作为 this 的时候使用。它也是可选的。

为了看看这是如何运行的，让我们使用 Array.from() 方法从一个字符串创建一个数组：

let newArray = Array.from("freeCodeCamp");

console.log(newArray); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

在上面的例子中，Array.from() 方法返回一个字符串的数组。你也可以使用该方法从任何具有长度属性的对象中返回一个数组，该属性指定了对象中的元素数量。

let arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
let newArray = Array.from(arrayLike);

console.log(newArray); // [1,2,3]

你也可以引入映射函数，为每个元素调用。例如，如果你想操作每个数组项，也许是将每个项与一个特定的数字相乘：

let arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
let newArray = Array.from(arrayLike, x => x * 2);

console.log(newArray); // [2,4,6]

注意：.from() 是一个静态方法，这就是为什么它使用数组类的名称。你只能把它当作 Array.from() 来使用，而不是 myArray.from()，其中 myArray 是一个数组。它将返回未定义。

如何用 .from() 方法创建一个数字序列

Array.from() 方法使你有可能使用映射函数创建一个数字序列：

let newArray = Array.from({ length: 7 }, (value, index) => index);

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

上面的方法创建了一个由 7 个元素组成的数组，默认初始化为 undefined。但是使用映射函数，现在使用的是索引值而不是其实际值 undefined。

如果你使用它的实际值，你将得到一个 7 个元素的数组（基于长度），值为 undefined：

let newArray = Array.from({ length: 7 }, (value, index) => value);

console.log(newArray); 
// 返回
[undefined,undefined,undefined,undefined,undefined,undefined,undefined]

如何用 .from 方法创建一个数字范围

你现在知道如何用一个数字序列创建一个数组。但是当你创建一个范围时，你希望这些数字从一个指定的值开始，在一个指定的值结束。例如，在 4 和 8 的范围内的数字将是 4、5、6、7、8。

你还可以指定你想要一个指定范围内的奇数或偶数的数组。所有这些都可以通过 Array.from() 方法实现。

const arrayRange = (start, stop, step) =>
    Array.from(
    { length: (stop - start) / step + 1 },
    (value, index) => start + index * step
    );

在上面的代码中，类似数组的对象的长度是通过从范围内的第一个数字减去最后一个数字，然后除以步长加一来定义的。这将给出数组中元素的确切数量。

在映射函数中，起始数被添加到每个元素的索引中（记住，该值总是未定义的），并乘以步长值。这个映射函数为每个元素运行，帮助计算每个元素的值。

让我们用几个例子试试这个方法：

// 产生从范围 2 到 7 的数字
let range = arrayRange(2, 7, 1);
console.log(range); // [2,3,4,5,6,7]

// 产生从范围 2 到 7 的偶数
let evenRange = arrayRange(2, 7, 2);
console.log(evenRange); // [2,4,6]

// 产生从范围 1 到 5 的奇数
let oddRange = arrayRange(1, 5, 2);
console.log(oddRange); // [1,3,5]

总结

在这篇文章中，你学习了如何用 Array.from() 方法创建一个数字数组，你还学习了 Array.from() 方法的工作原理。

请记住，在 JavaScript 中还有其他选择来创建数字范围——我们在本教程中只关注了 .from()。

祝你编码愉快！