JavaScript 数组处理使用 ECMAScript 2017 中的 Array.from() 方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会涉及到数组的处理。JavaScript 数组常常是我们处理数据的首选。在这个过程中，我们有时会遇到一个问题，就是无法对 Array-like 对象使用 Array.prototype.map() 函数。这个问题一直纠结着我们。

在 ECMAScript 2017 中，提供了一个能解决这个问题的方法，就是 Array.from() 方法。

Array.from() 方法简介

Array.from() 方法是一个能将类数组对象或可迭代对象转化为数组的方法，它返回一个新的数组实例。它的基本语法如下：

Array.from(arrayLike[, mapFn[, thisArg]])

其中，arrayLike 表示需要转换的类数组对象或可迭代对象。mapFn 是可选的，表示用于操作数组中的每个元素的函数。thisArg 也是可选的，表示传递给 mapFn 函数的 this 值。

在开发过程中，我们常常会遇到类数组对象。比如：

var elements = document.querySelectorAll('.example');

这个 elements 对象看起来像一个数组，但是它的原型链上只有 NodeList 和 Object，没有 Array，而 Array.prototype.map() 函数只能用于数组，因此我们不能使用 elements.map()。

这时，我们可以使用 Array.from() 方法，将 elements 转换成数组对象：

var arr = Array.from(elements);

现在，我们就可以使用 Array.prototype.map() 函数了：

arr.map(function(element) {
  console.log(element);
});

这样就可以愉快地使用 map() 了。

除了解决类数组对象无法使用 Array.prototype.map() 函数的问题之外，Array.from() 方法还有其他应用场景。比如，我们可以用它来操作字符串，例如实现字符串反转：

var str = 'hello';
var arr = Array.from(str).reverse().join('');
console.log(arr); // 'olleh'

又比如，我们可以用它来创建数组：

var arr = Array.from({length: 5}, (v, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]

这个例子中，数组 arr 包含 0 到 4 的数字。

Array.from() 方法是 ECMAScript 2017 新增的一个方法，它能将类数组对象或可迭代对象转化为数组。这个方法能够解决数组和类数组对象

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6529f8987d4982a6ebc5887b