前端开发必看：Array.from用法及实战解析，5个场景案例带你上手

此外，Array.from 的 mapFn 参数允许在转换时对每个元素进行变换，减少后续的遍历开销，从而提升代码的可读性和性能。

实战示例

下面的代码演示如何将 NodeList 转换为数组，并在同一操作中提取每个节点的文本内容。一次性完成转换与变换，避免了额外的循环。

// 场景一：NodeList 转 Array，提取文本内容
const nodes = document.querySelectorAll('p.note');
const texts = Array.from(nodes, node => node.textContent.trim());
console.log(texts);

通过上述方式，文本提取变得直观，后续的排序或过滤也可以直接对 texts 数组进行处理。

如果你的目标环境需要广泛兼容，注意 IE 不支持 Array.from，此时可以使用 Array.prototype.slice.call 的降级写法或引入 polyfill。

进阶要点

你也可以把 mapping 逻辑交给 mapFn，在转换的同时完成数据结构的格式化，比如把 DOM 节点的某个属性值直接映射成所需的对象字段。

要点回顾

核心在于：Array.from 将可迭代对象转换为数组，并且可选地应用 mapFn，从而实现“转换+映射”的一体化。

场景二：将类数组对象（如 arguments）转换为数组，便于调用数组方法

场景背景

arguments 对象以及某些自定义的类数组对象无法直接使用数组的方法。使用 Array.from 将它们转为真实的 Array，即可解放出 map、filter、slice 等方法。

示例代码

下面的示例展示了在一个函数内部，将 arguments 转换为数组，并对参数执行二倍运算。

// 场景二：arguments 转 Array
function multiplyArgs() {const args = Array.from(arguments);return args.map(x => x * 2);
}
console.log(multiplyArgs(1, 2, 3)); // [2, 4, 6]

通过这种方式，arguments 可以像普通数组一样被处理，极大地提升了函数参数处理的灵活性和可读性。

替代方案与注意点

如果你处在极端的浏览器环境中，请留意 Array.from 的兼容性，并准备好降级处理，例如使用 Array.prototype.slice.call(arguments) 或引入 polyfill。

场景三：将可迭代对象转为数组，并结合 mapFn 进行数据变换

可迭代对象的应用场景

Map、Set、字符串、Generator 等 都是可迭代对象，Array.from 可以把它们转换成数组，便于后续数组方法的使用；同时，mapFn 还能在转换的同时完成初步的结构化或格式化。

示例：Map、Set 的转换与映射

该示例展示如何把 Map 及 Set 转换为数组，以及如何通过 mapFn 进行自定义转换。

// 场景三：Map、Set 等可迭代对象转数组
const mp = new Map([['a', 1], ['b', 2]]);
const arrFromMap = Array.from(mp); // [['a', 1], ['b', 2]]const st = new Set([1, 2, 3]);
const arrFromSet = Array.from(st); // [1, 2, 3]// 使用 mapFn 直接变换元素
const upperKeys = Array.from(mp, ([k, v]) => k.toUpperCase() + ':' + v);
console.log(arrFromMap);
console.log(arrFromSet);
console.log(upperKeys);

通过将 可迭代对象 直接转换为数组并结合 mapFn，你可以把数据结构的转换与变换统一在一个步骤中完成，减少临时变量的使用。

场景四：把字符串转为数组，按字符或按自定义规则分割

基础用法

字符串本质是一个可迭代对象，Array.from 可以把字符串直接分解成一个字符数组，方便后续的逐字符处理、统计或排序。

示例：按字符转换与变换

你可以直接把字符串分解为字符数组，也可以在转换时对字符进行统一变形。

// 场景四：字符串转数组
const s = "hello";
const chars = Array.from(s); // ['h','e','l','l','o']
const upper = Array.from(s, c => c.toUpperCase()); // ['H','E','L','L','O']

这种写法适用于需要对文本进行逐字处理、统计分布、或基于字符的自定义编码转换等场景。

场景五：结合 Set、Map 进行去重、排序，以及完整性校验的场景

去重与有序数组

使用 Set 可以实现简单的去重，而 Array.from 让去重后的集合变成一个 有序数组，从而方便后续排序或切片等操作。

// 场景五：去重与排序
const items = [1, 2, 2, 3, 3, 4];
const unique = Array.from(new Set(items)); // [1, 2, 3, 4]

Map 的排序与结构化转换

对于需要保持键值对结构的场景，Array.from 将 Map 转换为数组后，可以方便地进行排序、筛选以及对象化处理。

// 场景五: Map 转数组并排序
const m = new Map([[3, 'c'], [1, 'a'], [2, 'b']]);
const sorted = Array.from(m).sort((a, b) => a[0] - b[0]); // [[1,'a'], [2,'b'], [3,'c']]
console.log(sorted);

通过这两种方式，你可以在不改变原始数据结构的前提下，获得适合 UI 展示和数据处理的数组形式。