ES6之Array.from()方法详解

最新推荐文章于 2025-06-30 17:07:26 发布

吴冬雪~

最新推荐文章于 2025-06-30 17:07:26 发布

阅读量561

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_37548296/article/details/105820315

本文深入探讨了Array.from()方法的功能与用法，详细解释了如何从类似数组或可迭代对象创建数组实例，以及如何使用mapFn进行元素转换。通过具体示例展示了其在DOM操作和对象转换中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Array.from(obj,mapFn,thisArg) 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

接收三个参数，后两个参数不是必选项。

obj:想要转换成数组的伪数组对象或可迭代对象。

mapFn:如果指定了该参数，新数组中的每个元素会执行该回调函数。回调函数接收两个参数，第一个value:数组值，index数组下标。如果mapFn定义的是箭头函数，不是普通函数，这样第三个参数绑定this的话是不能绑定的。

thisArg:执行回调函数 mapFn 时 this 对象。（针对普通函数，箭头函数不适用）

例1：

let Div = document.getElementsByTagName("div");
let arr = Array.from(Div)
console.log(arr) //转数组的时候比扩展运算符...arr更强大

例2：

let obj = { // 对象里面键值是数组的结构一样可以转，如果属性不是数值那么转出来会是undefined
    "0":1,
    "1":2,
    "2":3,
    length:3 // 不写length,是空数组，一定要写，决定数组之后的长度，大于的时候undefined填充
  }
  console.log(Array.from(obj,(value,index) => value+2)) // [3, 4, 5]