JavaScript - 对 FileList 对象进行自然排序

Question

我有一个文件列表对象，其中包含 1000 多个图像文件。我希望对象按文件名(字母数字)排序。换句话说，我想做一个自然排序。文件名如下:

d_1_ct.png
d_2_ct.png
d_3_ct.png
d_4_ct.png

通过执行 [].slice.call(filelist_object) 或 Array.from(filelist_object) 将 filelist 对象转换为数组，然后调用 sort( ) 仅导致按字母顺序排序。如何使文件列表对象自然地按文件名排序？

只要我能够在数组元素上使用 URL.createObjectURL() 显示图像文件，我就可以将其转换为数组。

自然排序的字母数字字符串不是我想要的，尽管文件列表对象中的文件名是字母数字字符串。文件列表对象包含以下属性:

0: File
lastModified: 1493435514308
lastModifiedDate: Sat Apr 29 2017 08:41:54 GMT+0530 (India Standard Time)
name: "d_1_ct.png"
size: 5307
type: "image/png"
webkitRelativePath: "img/d_1_ct.png"
__proto__:File

我想按 name 或 webkitRelativePath 进行排序，同时保留文件列表对象的所有属性，因为我使用对象的索引号来显示图片。

Answer 1

我首先使用 Array.from() 将文件列表对象转换为数组。

myArray = Array.from(myFileListObject);

然后，我使用了 Lauri Rooden 编写的 naturalCompare() 函数。这是GitHub link .

然后，我在数组上调用了 naturalCompare() 函数，如下所示:

myArray.sort(function(a,b) {
    return String.naturalCompare(a.name, b.name)
});

我的数组现在“自然”地正确排序了。它仍然保留 filelist 对象的所有属性，因此我仍然可以在其内容上使用 URL.createObjectURL() 方法来显示图像。