Array.from：数组变形金刚，让数据“七十二变”
各位看官，今天咱不聊那些高大上的框架，也不谈深奥的算法，咱们就来唠唠 JavaScript 里一个不起眼，但却异常实用的家伙：Array.from。
这家伙啊，就像数组界的“变形金刚”，能把各种奇奇怪怪的东西，Duang 的一下，变成一个正儿八经的数组。你可能会想，数组不就 [] 这样吗？直接赋值不就完事儿了吗？为啥还要这么个“变形金刚”出来折腾？
别急，且听我慢慢道来。
故事的开始：那些“长得像数组”的家伙们
在 JavaScript 的世界里，有很多东西，看着像数组，用起来却不是那么回事。比如说：
- 字符串： 你可以用
str[0]访问字符串的第一个字符，但它不是数组，没办法直接用push、pop这些数组方法。 - arguments 对象： 在函数内部，你可以用
arguments拿到所有传入的参数，但它也不是数组，而是一个“类数组对象”。 - DOM 节点列表 (NodeList)： 通过
document.querySelectorAll获取的元素列表，看着像数组，但也是个“类数组对象”。 - Set 和 Map： 这哥俩是 ES6 引入的新数据结构，可以迭代，但它们也不是数组。
这些“类数组对象”，它们都有一个共同的特点：有 length 属性，可以用索引访问，但缺少数组的那些内置方法。这就导致我们在处理这些数据的时候，会遇到一些麻烦。
比如说，你想把一个字符串里的每个字符都变成大写，然后放到一个新的数组里。如果直接用字符串，你得这么写：
const str = "hello";
const newArray = [];
for (let i = 0; i < str.length; i++) {
newArray.push(str[i].toUpperCase());
}
console.log(newArray); // ["H", "E", "L", "L", "O"]代码不少啊，看着就头疼。但是，有了 Array.from，事情就变得简单多了：
const str = "hello";
const newArray = Array.from(str, char => char.toUpperCase());
console.log(newArray); // ["H", "E", "L", "L", "O"]是不是简洁多了？就像变魔术一样，Array.from 把字符串变成了数组，还顺手把每个字符都变成了大写。
Array.from 的魔法：化腐朽为神奇
Array.from 的基本语法是这样的：
Array.from(arrayLike, mapFn, thisArg);arrayLike：你想转换成数组的“类数组对象”或者可迭代对象。mapFn(可选)：一个映射函数，类似于数组的map方法，可以对每个元素进行处理。thisArg(可选)：执行mapFn时，this指向的对象。
1. 把字符串变成数组：
这个例子前面已经说过了，这里再强调一下，Array.from 可以轻松地把字符串拆分成字符数组，方便你对字符串进行各种操作。
2. 把 arguments 对象变成数组：
在函数内部，arguments 对象可以拿到所有传入的参数，但它不是数组。有了 Array.from，你可以轻松地把它变成数组，然后就可以使用数组的各种方法了。
function sum() {
const args = Array.from(arguments);
return args.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 153. 把 DOM 节点列表变成数组：
document.querySelectorAll 返回的是一个 NodeList，它不是数组。如果你想对 NodeList 进行一些数组操作，比如 forEach、map 等，就需要先把它转换成数组。
const elements = document.querySelectorAll("p");
const elementArray = Array.from(elements);
elementArray.forEach(element => {
element.style.color = "red";
});4. 从 Set 和 Map 创建数组：
Set 和 Map 是 ES6 引入的新数据结构，它们可以迭代，但不是数组。Array.from 可以把它们转换成数组，方便你进行处理。
const mySet = new Set([1, 2, 3, 4, 5]);
const myArray = Array.from(mySet);
console.log(myArray); // [1, 2, 3, 4, 5]
const myMap = new Map([["a", 1], ["b", 2], ["c", 3]]);
const myArrayFromMap = Array.from(myMap);
console.log(myArrayFromMap); // [["a", 1], ["b", 2], ["c", 3]]5. 创建指定长度的数组：
Array.from 还可以用来创建指定长度的数组，并填充默认值。
const newArray = Array.from({ length: 5 }, () => 0);
console.log(newArray); // [0, 0, 0, 0, 0]这个例子中，我们创建了一个长度为 5 的数组，并用 0 填充了每个元素。
6. 生成连续数字的数组：
结合 mapFn，Array.from 还可以用来生成一个包含连续数字的数组。
const numbers = Array.from({ length: 10 }, (_, i) => i + 1);
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]这个例子中，我们创建了一个长度为 10 的数组，并用 i + 1 填充了每个元素，其中 i 是元素的索引。
Array.from 的优势：简洁、高效、灵活
相比于传统的循环遍历，Array.from 有以下几个优势：
- 简洁： 代码更简洁，可读性更高。
- 高效： 内部实现进行了优化，性能更好。
- 灵活： 可以结合
mapFn进行各种数据转换。
Array.from 的出现，让数组的创建和转换变得更加方便，提高了开发效率。
Array.from 的注意事项：
Array.from只能转换“类数组对象”或者可迭代对象。如果传入的是普通对象，会返回一个空数组。mapFn是可选的，如果不传，Array.from会直接把“类数组对象”或者可迭代对象转换成数组。thisArg也是可选的，如果不传，this指向undefined。
总结：Array.from，你的数组好帮手
Array.from 是 JavaScript 里一个非常实用的工具函数，它可以把各种“类数组对象”或者可迭代对象转换成数组，方便你进行各种数据操作。它的优点是简洁、高效、灵活，可以大大提高你的开发效率。
下次当你遇到需要把“类数组对象”转换成数组的时候，不妨试试 Array.from，相信它会给你带来惊喜。
希望这篇文章能让你对 Array.from 有更深入的了解，也希望它能成为你编程路上的好帮手。记住，掌握好这些小工具，你的代码才能更加优雅、高效！
那么，今天的分享就到这里，下次再见！