浅谈Array.from

马黑黑 · 发表于 2022-5-8 08:59

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-5-8 09:03 编辑

我最初接触JavaScript时，关于数组，还没有 Array.from 方法，它是 ECMAScript 6 新推出的内容。ES6推出 Array.from 方法是聪明的做法，它使得我们对数组、类数组和可迭代对象等JavaScript集合进行有用的转换。

从字面看，Array.from 很容易理解，Array本意是数组，此处做动词用，构建数组或数组化之意，from是来自、从的意思，此处指欲处理对象的来源，指向JS集合对象，可以是数组、类数组或伪数组、可迭代的任何对象。

我们先来看一个实例，此例将将字符串分解为以单字（或字母）为单位的数组。若搁到ES6出现之前，通常的做法是用 split 方法拆分字串，现在我们有了另一个方法，Array.from：

let strAr = Array.from('梅花香自苦寒来');

这将使得变量 strAr 成为一个地地道道的数组，我们用 strAr[strAr.length - 1] 读取最后一个数组元素，将得到 “来” 字。这里，Array.from 从可迭代对象的字符串 "梅花香自苦寒来" 中以迭代方式遍历所有单字（字母）并以字串的最小单位（单字或字母）将字串数组化。借此，简单解释一下“可迭代”的意思：可以以一定规律对对象进行重复性动作的遍历，本例中，Array.from 方法之所以能将字串进行有规律拆分，是因为字串由单字（字母）组成，它是有规律的，我们是可以对之进行可迭代遍历而后拆分的。

利用 Array.from 这一 ES6 新增的数组处理方法，我们可以很容易进行线性方式的运算：

let numAr = [1,4,7];
let numArNew = Array.from(numAr, x => x+2);

此例，Array.from 方法对数组 numAr 进行处理，先是接收这个 numAr 数组，然后，用 x => x+2，这个式子进行数组转换，x 代表 numAr 的内部元素，箭头 => 表达一个函数，函数的意思是 x+2，即内部元素每一个都加上2，最后所得结果赋值给新的数组变量 numArNew，新变量的数组将是 [3,6,9] 。这就是简单的线性运算：将一个外来值分别运算到内部的每一个元素中。

我在RGB配色器中，JS代码量之所以少到极限，原因之一就是用了 Array.from 方法来处理 input 滑竿元素，四个input滑竿本应编写四个 onchange 事件，有了 Array.from 方法的加持，现在只需要一个。

Array.from 方法的应用场景非常广泛，作为浅谈，我们点到为止。