Array.from() 神奇用法，唤醒JavaScript的灵魂

2023-03-11 12:09:28

掌握 Array.from() 方法：轻松创建、操作和转换数组

在 JavaScript 浩瀚的工具箱中，Array.from() 方法脱颖而出，以其创建、操作和转换数组的强大功能而著称。了解 Array.from() 的使用方法将为您的 JavaScript 开发注入无穷的便利和效率。

Array.from() 基本介绍

Array.from() 方法，顾名思义，从一个类数组对象或可迭代对象中生成一个全新的数组实例。类数组对象指的是那些拥有 length 属性，且属性键为连续非负整数的对象；而可迭代对象则可以被 for...of 循环遍历。

用法示例：

// 从类数组对象创建数组
const numbers = Array.from({0: 1, 1: 2, 2: 3});
console.log(numbers); // [1, 2, 3]

// 从字符串创建数组
const string = "Hello World";
const stringArray = Array.from(string);
console.log(stringArray); // ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

Array.from() 的妙用

除了基本用法，Array.from() 还能施展诸多妙用。让我们探索一下它的神奇之处：

将 NodeList 转换为数组：
NodeList 是一个类数组对象，代表 HTML 文档中的一组元素。Array.from() 可轻松将其转换为数组，方便后续处理。
```
const nodeList = document.querySelectorAll("li");
const liArray = Array.from(nodeList);
console.log(liArray); // [<li>...</li>, <li>...</li>, ...]
```

将 Map 转换为数组：
Map 是一个保存键值对的集合。Array.from() 可以将 Map 转换为一个包含键值对数组的数组。

const map = new Map([["name", "John Doe"], ["age", 30]]);
const mapArray = Array.from(map);
console.log(mapArray); // [["name", "John Doe"], ["age", 30]]

将 Set 转换为数组：
Set 类似于集合，但不允许重复元素。Array.from() 可将 Set 转换为包含其元素的数组。
```
const set = new Set([1, 2, 3, 4]);
const setArray = Array.from(set);
console.log(setArray); // [1, 2, 3, 4]
```