5 个JavaScript 中 Array.from() 的用例

前端Q

共 2536字,需浏览 6分钟

 ·

2021-12-30 11:00

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群


英文 | https://javascript.plainenglish.io/5-use-cases-for-array-from-in-javascript-a40889115267

翻译 | 杨小爱

Array.from() 是一种静态方法,它从具有长度属性和索引元素的类数组对象或 JavaScript 中的 Map 和 Set 等可迭代对象创建一个新数组。
参数是什么?
Array.from() 方法的参数是一个类似数组的对象,用于转换为数组,一个在每个项目上调用的 map 函数,以及在执行 map 函数时使用的 thisArg 值。
目的
Array.from() 方法需要它。它是一个类似数组的对象,例如具有长度属性和索引元素以转换为数组的对象。
地图功能
它是一个可选参数。你不需要每次都在你的 Array.from() 方法中使用它。但是,您可以将此参数用作映射函数来调用每个数组元素。
thisArg
它也是一个可选参数。您可以将此值用于 map 函数,它是第二个参数。
1、从类数组对象创建数组
您可以使用 Array.from() 方法从类数组对象创建数组。例如,您有一个字符串,并且您想从该字符串创建一个数组。您可以按如下方式进行。
Array.from('astring'); // [“a”, “s”, “t”, “r”, “I”, “n”, “g”]

您可以从地图创建一个新数组。此外,您可以使用 Array.from() 方法为地图的键和值构造数组。

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map)// [1, 2], [2, 4], [4, 8]Array.from(map.values());// [2, 4, 8]Array.from(map.keys());// [1, 2, 4]

您还可以编写一个将参数作为数组元素的函数。然后,返回构造的数组。

function createArray() { return Array.from(arguments);}createArray(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]

您还可以从用户定义的可迭代对象创建数组。

function* iterator() {  yield 1;  yield 2;}
console.log(Array.from(iterator())); // [1, 2]

2、初始化一个数组

有时,您可能需要用零初始化数组。使用 Array.from() 方法,您可以快速完成。

Array.from({length: 5}, x => 0); // [0, 0, 0, 0, 0]

3、克隆一个数组

JavaScript 中的 slice() 方法可以帮助您创建数组的浅拷贝。例如,您可以使用不带参数的 slice() 方法克隆一个数组。

const updatedGrades = [66, 92, 100, 58, 21, 33];midtermGrades = updatedGrades.slice();

您还可以使用 Array.from() 方法克隆一个数组。

const updatedGrades = [66, 92, 100, 58, 21, 33];const midtermGrades = Array.from(updatedGrades);

4、查找数组的唯一项

您可以使用 Array.from() 方法在数组中找到唯一项。为此,您可以将 Array.from() 方法与 Set 结合使用。

Array.from(new Set([1, 2, 2, 3, 3, 3, 4, 4, 4, 4]));// [1, 2, ,3 ,4]

5、创建范围函数

Array.from() 可以帮助您根据需要创建范围函数。对于类似数组的对象参数,您可以使用类似数组的 {length:end}

function Range(start, stop, step) {return Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));}
console.log(Range(0,5,1)) // [0, 1, 2, 3, 4, 5]console.log(Range(0,9,3)) // [0, 3, 6, 9]console.log(Range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)));// ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
总结
JavaScript 中的内置函数对于创建函数至关重要。了解内置函数的用例可以提高您的编程技能。您可以快速创建您需要的功能。
Array.from() 也是一个有用的函数。如果您知道如何使用它,将有利于解决相关问题。
综上所述,本文中 Array.from() 方法的用例如下:
  • 从类数组对象创建数组

  • 初始化数组

  • 克隆数组

  • 查找数组的唯一项

  • 创建范围函数并使用该函数创建英文字母表。



往期推荐


大厂面试过程复盘(微信/阿里/头条,附答案篇)
面试题:说说事件循环机制(满分答案来了)
专心工作只想搞钱的前端女程序员的2020



最后


  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

点个在看支持我吧
浏览 18
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报