JavaScript中Array.from()的超全用法详解

什么是Array.from()

Array.from()是ECMAScript6中新增的一个方法，可以将类数组对象和可迭代对象（如Set、Map）转换成真正的数组，方便对数据进行操作。

Array.from()的语法结构

Array.from(iterable[, mapFn[, thisArg]])，其中参数说明如下：

• iterable：需要转换成数组的数组类对象或可迭代对象。
• mapFn：（可选）用来对每个元素进行处理的函数。
• thisArg：（可选）执行mapFn函数时的this对象。

使用Array.from()将类数组对象转为数组

示例：

function foo() {
  const args = Array.from(arguments) // 转换arguments为真正的数组
  console.log(args)
}

foo(1, 2) // 输出 [1, 2]

这里将arguments对象转换为真正的数组，便于对其进行操作。

再看一个更加直观的示例：

const divList = document.querySelectorAll('div')
const divArray = Array.from(divList)

使用document.querySelectorAll会返回一个类数组对象，使用Array.from()可以将其转换为数组。

使用Array.from()将可迭代对象转为数组

示例：

const set = new Set(['a', 'b', 'c'])
const arrSet = Array.from(set)
console.log(arrSet) // 输出 ['a', 'b', 'c']

这里将Set对象转换为了数组arrSet。

使用Array.from()的第二个参数

第二个参数mapFn是一个函数，用于对数组中每个元素进行处理，可以很方便地对数据进行转换。

示例：

const arr = [1, 2, 3]
const newArr = Array.from(arr, x => x * 2)
console.log(newArr) // 输出 [2, 4, 6]

这里将arr中的每个元素都乘以2，然后返回了新的数组newArr。

使用Array.from()的第三个参数

第三个参数thisArg是用于指定函数中的this指向的对象，这个在复杂场景中非常适用。

示例：

const arr = [1, 2, 3]
const obj = {
  factor: 2,
  double(value) {
    return value * this.factor
  },
}
const newArr = Array.from(arr, obj.double, obj)
console.log(newArr) // 输出 [2, 4, 6]

在这里，Array.from()调用obj.double()方法作为遍历函数，指定obj对象作为this值。

总结

• Array.from()方法是将类数组对象和可迭代对象（如Set、Map）转换成真正的数组。
• Array.from()方法的语法结构非常简单，可以通过第二个参数和第三个参数进行更灵活的操作。
• 使用Array.from()可以更加方便地对数据进行操作。

以上就是JavaScript中Array.from()的超全用法详解，希望对你们有所帮助。