我有一个包含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()
将filelist对象转换为数组只会按字母顺序排序。如何使文件列表对象自然地按文件名排序?
我可以把它变成一个数组,只要我能够在数组元素上使用URL.createObjectURL()
显示图像文件。
自然排序的字母数字字符串不是我想要的,尽管我在filelist对象中的文件名是字母数字字符串。 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
进行排序,同时保留filelist对象的所有属性,因为我使用对象的索引号来显示图像。
答案 0 :(得分:0)
我首先使用$scope.search = function () {
var myform = angular.copy($scope.form);
myform.product = myform.product.id;
AppService.searchProduct(myform).then(function(response){
$scope.listProduct = response;
});
};
将我的filelist对象转换为数组。
Array.from()
然后,我使用了Lauri Rooden编写的myArray = Array.from(myFileListObject);
函数。这是GitHub link。
然后我按如下方式调用了我的数组上的naturalCompare()
函数:
naturalCompare()
我的阵列现在是#34;当然"正确排序。它仍然保留了filelist对象的所有属性,因此我仍然可以在其内容上使用myArray.sort(function(a,b) {
return String.naturalCompare(a.name, b.name)
});
方法来显示图像。
答案 1 :(得分:0)
很长一段时间,我为德国人解决了这个问题" 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"]);
}
答案 2 :(得分:0)
现在有一种使用https://otherdomain.com
的简便方法:http://fuzzytolerance.info/blog/2019/07/19/The-better-way-to-do-natural-sort-in-JavaScript/
localeCompare
此外,您可以通过declaring the collator object beforehand加快速度。