如何从文件元数据数组中筛选出所有后缀为.png的文件

核心思路 #

• 利用字符串endsWith()方法精准匹配.png后缀，避免正则误匹配文件名中间包含png的异常情况
• 先筛选符合条件的元数据对象，再提取对应name字段值即可得到目标结果

完整可运行代码 #

// 1. 补全为合法的元数据数组
const fileMetadata = [
  { bytes: 4531, md5: "DLKvNDSl0Q3y0tlFGNol_A", name: "game/objects/rock_2.png" },
  { bytes: 4208, md5: "z1v6RXDu0F6WXFyyBGsBKg", name: "game/objects/rock_2.webp" },
  { bytes: 741, md5: "DlK9Ugd6e5L-99V-ryGoiA", name: "game/objects/rock_2_shadow.png" },
  { bytes: 448, md5: "e68ha5bvslyYsG_8Kr1dtQ", name: "game/objects/rock_2_shadow.webp" },
  { bytes: 3125, md5: "t3eBjoR_9QzrRMgJzlgWCA", name: "game/objects/rock_3.png" },
  { bytes: 2670, md5: "z_w1xtubTBXfp0DHun_pHQ", name: "game/objects/rock_3.webp" },
  { bytes: 618, md5: "c-l97Wj4nZySEnf2XBAt1Q", name: "game/objects/rock_3_shadow.png" },
  { bytes: 358, md5: "SJ49Ew6HkE_p02XywWjScA", name: "game/objects/rock_3_shadow.webp" },
  { bytes: 4746, md5: "OSK4VYwv_rAdto2dRIgQzg", name: "game/objects/rock_4.png" },
  { bytes: 4254, md5: "XkG3_lsGLNIbldhgYQzvkQ", name: "game/objects/rock_4.webp" },
  { bytes: 737, md5: "zu4RoYT2e32KZ5IBi1zFwg", name: "game/objects/rock_4_shadow.png" },
  { bytes: 444, md5: "S5lQ1bd3RhP4oubg-Zgzfw", name: "game/objects/rock_4_shadow.webp" },
  { bytes: 8121, md5: "CabdI9rn-lvkEiEDDUw1XQ", name: "game/objects/stump.png" },
  { bytes: 7848, md5: "NerEGkPWl7aGm5vExwUf5g", name: "game/objects/stump.webp" },
  { bytes: 980, md5: "ipcG0uMYI9BG8FM8fK6k_Q", name: "game/objects/stump_shadow.png" },
  { bytes: 666, md5: "fkLA18GD8gItBTbOVJnPog", name: "game/objects/stump_shadow.webp" },
  { bytes: 13840, md5: "v6Nxnc6mADteI8cxC_GPiA", name: "game/objects/table.png" },
  { bytes: 13144, md5: "xiMMaXe48fR5QLQ0DCD2qw", name: "game/objects/table.webp" },
  { bytes: 1556, md5: "FVUAV5dhR4uwaCNkfgkQJg", name: "game/objects/table_shadow.png" },
  { bytes: 1092, md5: "XLhQsppcDFFPlADxuhATEw", name: "game/objects/table_shadow.webp" },
  { name: "game/objects/tv.png" }
]

// 2. 筛选并提取png文件路径
const pngFiles = fileMetadata
  .filter(item => item.name?.endsWith('.png')) // 可选链避免无name字段报错
  .map(item => item.name)

// 3. 输出结果
console.log(pngFiles)

输出结果示例 #

运行后得到的png文件路径列表如下：

game/objects/rock_2.png
game/objects/rock_2_shadow.png
game/objects/rock_3.png
game/objects/rock_3_shadow.png
game/objects/rock_4.png
game/objects/rock_4_shadow.png
game/objects/stump.png
game/objects/stump_shadow.png
game/objects/table.png
game/objects/table_shadow.png
game/objects/tv.png

如果需要用顿号拼接成字符串，直接加join('、')即可：

const pngFileStr = pngFiles.join('、')

内容的提问来源于stack exchange，提问作者Elsa James