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

快速构建数组

在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，它除了高效、优雅之外，还有很灵活的操作空间。

加林森 发表于 2022-7-19 13:27

这个办法好。{:4_199:}

红影 发表于 2022-7-19 15:48

但是很多地方上传的图图的地址并不是这样有规律的{:4_173:}

樵歌 发表于 2022-7-19 16:47

等着学生交作业了{:4_174:}

马黑黑 发表于 2022-7-19 18:14

樵歌 发表于 2022-7-19 16:47
等着学生交作业了

你帮监督

马黑黑 发表于 2022-7-19 21:29

红影 发表于 2022-7-19 15:48
但是很多地方上传的图图的地址并不是这样有规律的

这里只是举例。数组又不一定非得用来存储图片地址。

樵歌 发表于 2022-7-19 22:06

马黑黑 发表于 2022-7-19 18:14
你帮监督

围观{:4_189:}

马黑黑 发表于 2022-7-19 22:08

樵歌 发表于 2022-7-19 22:06
围观

嗯嗯，做个吃瓜群众也挺好

红影 发表于 2022-7-20 10:27

马黑黑 发表于 2022-7-19 21:29
这里只是举例。数组又不一定非得用来存储图片地址。

嗯嗯，明白了，非常简洁的调用方式{:4_204:}

马黑黑 发表于 2022-7-20 12:08

红影 发表于 2022-7-20 10:27
嗯嗯，明白了，非常简洁的调用方式

主要是构造方式简洁

红影 发表于 2022-7-20 20:43

马黑黑 发表于 2022-7-20 12:08
主要是构造方式简洁

记得你特别喜欢用这个{:4_173:}

马黑黑 发表于 2022-7-20 20:44

红影 发表于 2022-7-20 20:43
记得你特别喜欢用这个

嗯，各人有各人的喜好

红影 发表于 2022-7-20 22:49

马黑黑 发表于 2022-7-20 20:44
嗯，各人有各人的喜好

这样的简洁。

马黑黑 发表于 2022-7-20 22:55

红影 发表于 2022-7-20 22:49
这样的简洁。

是的，简洁而好用

红影 发表于 2022-7-21 21:20

马黑黑 发表于 2022-7-20 22:55
是的，简洁而好用

很赞{:4_187:}

马黑黑 发表于 2022-7-21 21:44

红影 发表于 2022-7-21 21:20
很赞

谢谢
页: [1]
查看完整版本: 快速构建数组