如何在JavaScript中使用‘from’关键字？

JavaScript中的from用法主要涉及到将其他数据类型转换为数组，这通常通过使用Array.from()方法实现，它可以接受一个类数组对象（array-like object）或可迭代对象（iterable object），并将其转换为一个真正的数组。

Array.from()基础用法

参数说明

arrayLike: 一个类数组对象或可迭代对象。

mapFn（可选）: 如果指定了该参数，新数组的每个元素会是回调函数调用后的值。

thisArg（可选）: 当执行回调函数时，用作this 的值。

示例代码

// 将类数组对象转换为数组
const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b', 'c']
// 使用映射函数
const arrWithMap = Array.from([1, 2, 3], x => x * 2);
console.log(arrWithMap); // [2, 4, 6]

将字符串转换为字符数组

使用Array.from()可以轻松地将字符串转换为字符数组，这对于处理字符串中的每个字符非常有用。

示例代码

const str = "hello";
const charArray = Array.from(str);
console.log(charArray); // ['h', 'e', 'l', 'l', 'o']

将NodeList转换为数组

在操作DOM时，经常需要将NodeList转换为数组以利用数组的方法。

示例代码

const listItems = document.querySelectorAll('li');
const nodeListArray = Array.from(listItems);
console.log(nodeListArray); // NodeList转数组

4. 使用thisArg作为回调函数的上下文

可以通过thisArg参数来指定回调函数中的this值。

示例代码

const obj = {a: 1, b: 2};
const entries = Object.entries(obj);
const mappedEntries = Array.from(entries, function(entry) {
    return this[entry[0]];
}, obj);
console.log(mappedEntries); // [1, 2]

结合生成器函数使用

Array.from()也可以与生成器函数一起使用，以创建新的数组实例。

示例代码

function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = generatorFunction();
const generatedArray = Array.from(gen);
console.log(generatedArray); // [1, 2, 3]

相关问题与解答

问题1:Array.from()和扩展运算符(...)有什么区别？

解答:Array.from()主要用于将类数组对象或可迭代对象转换为数组，而扩展运算符(...)用于展开数组或可迭代对象，两者都可以用于合并数组，但Array.from()还可以接受第二个参数作为映射函数，这是扩展运算符做不到的。

问题2: 如何将一个Set转换为数组？

解答: 可以使用Array.from()方法将Set转换为数组。

const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet);
console.log(myArray); // [1, 2, 3]

以上内容就是解答有关“from用法js”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。