JavaScript 范围——如何在 JS ES6 中用 .from() 创建一个数字数组

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

.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() 。

祝你编码愉快！

freeCodeCamp 是捐助者支持的 501(c)(3) 条款下具有免税资格的慈善组织（税号：82-0779546）。

我们的使命：帮助人们免费学习编程。我们通过创建成千上万的视频、文章和交互式编程课程——所有内容向公众免费开放——来实现这一目标。

所有给 freeCodeCamp 的捐款都将用于我们的教育项目，购买服务器和其他服务，以及聘用员工。

你可以点击此处免税捐款。 about:blank 是什么意思打开 .dat 文件 Node 最新版本反恶意软件服务 Windows10 产品密钥 Git 切换分支 AppData 文件夹 Windows 10 屏幕亮度 JSON 注释 MongoDB Atlas 教程 Python 字符串转数字 Git 命令更新 NPM 依赖谷歌恐龙游戏 CSS 使用 SVG 图片 Python 获取时间 Git Clone 指定分支 JS 字符串反转 React 个人作品网站媒体查询范围 forEach 遍历数组撤销 Git Add OSI 七层网络 Event Loop 执行顺序 CMD 删除文件 Git 删除分支 HTML 表格代码 Nano 怎么保存退出 HTML5 模板