|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 方法的应用场景非常广泛,作为浅谈,我们点到为止。
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|