快速构建数组

马黑黑 · 发表于 2022-7-19 13:14

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

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

x

在JS里，很多时候需要构建数组。一个很常见的应用场景是，用数组来装载多张图片信息。我们通常这样写数组：

let picAr = [
'https://www.mahei.cn/pic/1.jpg',
'https://www.mahei.cn/pic/2.jpg',
'https://www.mahei.cn/pic/3.jpg',
'https://www.mahei.cn/pic/4.jpg'
];

这方法很不错。但仔细分析，发现这些图片地址是有规律的，我们可以用更精妙的方法来创建这个 picAr 数组：

let picAr = Array.from({length:4}, (_, x) => 'https://www.mahei.cn/pic/' + (x+1) + '.jpg');

就一行代码，高效而优雅。

Array.from 可以将一个可以迭代的对象转换成数组，{length:4} 就是构造了这么一个可迭代对象的基础，告诉 Array.from 数组的长度是 4，(_, x) 是一个表达式，_ 代表数组元素，其值将由 => 后面的具体描述去构建；x 就是数组的 key，即数组下标。然后开始构建数组元素的内容，先是一个前面图片共同部分的网址字串（其实就是目录指向部分），接着通过 x 获得文件名前缀，x+1 将分别得到数组长度范围内的从 1 到长度单位4 的数字，最后加上后缀名 .jpg，图片地址的数组 picAr 就创建完毕。

当然，快速构建数组方法很多，我个人特喜欢 Array.from，它除了高效、优雅之外，还有很灵活的操作空间。