JavaScript - 自然排序 FileList 对象

Posted 2023-05-08

【中文标题】JavaScript - 自然排序 FileList 对象

【英文标题】：JavaScript - Natural Sorting a FileList Object

【发布时间】：2017-09-27 10:04:34

【问题描述】：

我有一个包含 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) 将文件列表对象转换为数组，然后调用sort() 会导致仅按字母排序。如何使文件列表对象按文件名自然排序？

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

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

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 进行排序，同时保留文件列表对象的所有属性，因为我使用对象的索引号来显示图像。

【问题讨论】：

认为这可能会帮助你***.com/questions/2802341/…

javascript : natural sort of alphanumerical strings的可能重复

更新解释了为什么它不是自然排序的字母数字字符串的副本。

【参考方案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() 方法来显示图像。

【讨论】：

请说明您如何在数组内容上使用 URL.createObjectURL() 方法来显示图像。

【参考方案2】：

现在使用localeCompare 有一种更简单的方法：http://fuzzytolerance.info/blog/2019/07/19/The-better-way-to-do-natural-sort-in-JavaScript/

const items =  ['3rd', 'Apple', '24th', '99 in the shade', 'Dec', '10000', '101', '$1.23']
items.sort((a, b) => a.localeCompare(b, navigator.languages[0] || navigator.language, numeric: true, ignorePunctuation: true))
console.log(items)

// [ "$1.23", "3rd", "24th", "99 in the shade", "101", "10000", "Apple", "Dec" ]

此外，您可以通过declaring the collator object beforehand 加快速度。

【参考方案3】：

很长一段时间，我为德语“Umlaute”解决了这个问题，你可以适应这个......

    function fhwSort(a, b)
       function fhwSplit(fstring)
          var mapObj = 
                ä:"ae",
                ö:"oe",
            ü:"ue",
            Ä:"ÄE",
            Ö:"ÖE",
            Ü:"UE",
            ß:"ss"
            ;
          fstring = fstring.replace(/ä|ö|ü|Ä|ö|ü|ß/gi, function(matched)
                       return mapObj[matched];
                  );
          return fstring.toUpperCase().replace(/\d*/g, function (x) 
            return !x=="" ? '0'.repeat(20).substr(0,20-x.length)+x:'';);
       
       a=fhwSplit(a["name"]);    
       b=fhwSplit(b["name"]);    
       return (a>b)+(a<b)*-1;
    
    var data = [
       name : "5.1. Test 3",
       name : "5.1. Test 1",
       name : "5.2. Test 2",
       name : "5.10. Test 10",
       name : "5.12. Test 12",
       name : "Karl",
       name : "Kader",
       name : "Käse",
       name : "Kuchen"

       ];
    console.log("fhwSort");
    data.sort(fhwSort);
    for (var i = 0; i < data.length; i++)
      console.log(data[i]["name"]);
    

【讨论】：

为什么ß:"ss "中有空格？为什么有些替换为Ä:"ÄE:", 仍然是一些变音符号？