值得一看
双11 12
广告
广告

JS中的Array.from有什么用?怎么用?

array.from 是 javascript 中用于将类数组对象或可迭代对象转换为真正数组的方法。它适用于处理如 arguments 对象、nodelist 等类数组对象,以及 set、map、字符串等可迭代对象,例如 array.from(‘hello’) 会将其拆分为字符数组。其完整语法为 array.from(arraylike, mapfn, thisarg),其中 arraylike 是必须参数,mapfn 是可选的映射函数,thisarg 是执行 mapfn 时的 this 值。常见用法包括:1. 将 arguments 转换为数组;2. 将字符串拆分为字符数组;3. 将 set 或 map 转换为数组;4. 配合 map 函数进行元素转换。与展开运算符相比,array.from 的优势在于支持直接传入映射函数,并且在某些需要兼容旧浏览器的场景中可通过 polyfill 实现支持。

JS中的Array.from有什么用?怎么用?

Array.from 是 JavaScript 中一个非常实用的方法,用来把类数组对象或者可迭代对象转换成真正的数组。简单来说,它能帮你快速从一些“像数组但不是数组”的东西里生成数组,方便后续操作。

什么情况下会用到 Array.from?

最常见的场景就是处理类数组对象(array-like objects)。比如函数内部的 arguments 对象、DOM 操作中获取的 NodeList 等,它们看起来像数组,有 length 属性,也能通过索引访问元素,但并不是真正的数组,因此不能直接使用 map、filter 这些数组方法。

这时候,Array.from 就派上用场了。例如:

function example() {
console.log(Array.isArray(arguments)); // false
const args = Array.from(arguments);
console.log(Array.isArray(args)); // true
}
example(1, 2, 3);

除了类数组对象,它还能处理 Set、Map、字符串等可迭代对象。

怎么用?基本语法和常见用法

Array.from 的完整语法是这样的:

Array.from(arrayLike, mapFn, thisArg)
  • arrayLike:必须,要转换成数组的对象。
  • mapFn:可选,在新数组元素上执行的映射函数。
  • thisArg:可选,执行 mapFn 函数时使用的 this 值。

常见的几种用法如下:

  • 把 arguments 转为数组
  • 把字符串拆成字符数组
  • 把 Set 或 Map 转换为数组
  • 配合 map 函数进行转换处理

举个例子:

Array.from('hello'); // ['h', 'e', 'n', 'l', 'o']
Array.from(new Set([1, 2, 3])); // [1, 2, 3]

和展开运算符的区别?

你可能会问,那我为什么不直接用 […arrayLike]?确实,展开运算符在很多情况下可以替代 Array.from。比如:

const arr1 = [...'hello']; // ['h', 'e', 'l', 'l', 'o']
const arr2 = Array.from('hello'); // 效果一样

两者都能实现同样的结果。区别在于 Array.from 提供了第二个参数,可以在生成数组的同时对每个元素做处理,有点像 map:

Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

而展开运算符没有这个功能,只能配合 map 单独再调用一次。

另外,对于某些浏览器兼容性要求较高的项目,Array.from 可以搭配 polyfill 使用,而展开运算符在老旧浏览器中可能完全不支持。

基本上就这些。

温馨提示: 本文最后更新于2025-06-06 22:42:48,某些文章具有时效性,若有错误或已失效,请在下方留言或联系易赚网
文章版权声明 1 本网站名称: 创客网
2 本站永久网址:https://new.ie310.com
1 本文采用非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
2 本站所有内容仅供参考,分享出来是为了可以给大家提供新的思路。
3 互联网转载资源会有一些其他联系方式,请大家不要盲目相信,被骗本站概不负责!
4 本网站只做项目揭秘,无法一对一教学指导,每篇文章内都含项目全套的教程讲解,请仔细阅读。
5 本站分享的所有平台仅供展示,本站不对平台真实性负责,站长建议大家自己根据项目关键词自己选择平台。
6 因为文章发布时间和您阅读文章时间存在时间差,所以有些项目红利期可能已经过了,能不能赚钱需要自己判断。
7 本网站仅做资源分享,不做任何收益保障,创业公司上收费几百上千的项目我免费分享出来的,希望大家可以认真学习。
8 本站所有资料均来自互联网公开分享,并不代表本站立场,如不慎侵犯到您的版权利益,请联系79283999@qq.com删除。

本站资料仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
THE END
喜欢就支持一下吧
点赞13赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容