ES6 中 Array.from 利器在实际开发中的使用
在 JavaScript 中，数组是我们最常见和重要的数据类型之一，而在 ES6 中，我们有一个非常强大的工具——Array.from 方法。该方法可以将类数组对象和可迭代对象转换为真正的数组，为开发提供了很多便利。接下来，我们将深入探讨这个方法在实际开发中的使用。
使用 Array.from 将类数组对象转换为数组
先来看一个例子，假设我们有一个类数组对象，它包含了一组 DOM 元素，我们希望将这些元素封装到一个真正的数组中进行处理。我们可以使用 Array.from 方法来实现：
let nodeList = document.querySelectorAll('div');
let arr = Array.from(nodeList);通过上述代码，我们将得到一个包含所有 div 元素的数组 arr。而在这个示例中，nodeList 本身是一个类数组对象，它并没有数组的 push、map、filter 方法等，但是通过 Array.from，我们可以将其转换为真正的数组，从而方便地应用数组的方法。
使用 Array.from 将可迭代对象转换为数组
除了将类数组对象转换为数组，Array.from 方法还可以将可迭代对象转换为数组。所谓可迭代对象，就是具有 Symbol.iterator 属性的对象。这类对象都有一个 next() 方法，它可以迭代对象中的每一个元素，例如 ES6 中新增的集合类型 Set 和 Map：
let set = new Set(['foo', 'bar', 'baz']); let arr = Array.from(set);
上述代码中，我们将 set 集合转换为数组。在实际开发中，经常需要对这些集合类型及其迭代器进行操作，通过 Array.from 方法转换为数组，将更加方便的执行常规数组操作，如遍历、过滤等。
Array.from 方法更高级的使用
除了基本的转换功能，Array.from 方法还可以接受一个类似于 map 的回调函数作为第二个参数，这个回调函数接收三个参数：被处理的数组项、索引和目标数组。使用这种方式可以实现更高级的转换和处理：
let arr = Array.from([1, 2, 3], x => x * x); console.log(arr); // [1, 4, 9]
上述代码中，我们将 [1, 2, 3] 数组中的每一项平方，得到了一个新的数组 [1, 4, 9]。这种方式在实际开发中也有很多用途，例如将字符串中的每一个字符转换为 Unicode 码点。这里给出一个示例代码：
let str = 'hello'; let arr = Array.from(str, x => x.codePointAt(0)); console.log(arr); // [104, 101, 108, 108, 111]
通过上述代码，我们将字符串 'hello' 中的每一个字符转换为 Unicode 码点，得到了一个新的数组 [104, 101, 108, 108, 111]。同时，我们也可以使用这个数组按顺序输出字符串中的每一个字符。
总结
通过以上的例子，我们可以看到 Array.from 方法在实际开发中的强大之处。它可以将类数组对象和可迭代对象都简单的转换为真正的数组，进而使我们方便地使用对数组的方法。同时，我们还看到了 Array.from 方法更高级的使用方式，这些功能在实际开发中也会发挥很大的作用。
因此，我们应该在实际开发中，广泛地应用 Array.from 方法，牢记其用法与原理，以充分发挥其功效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f4a7badd4f0e0ff7f57e7