多维数组的排序顺序跨浏览器兼容并具有“自然情况”
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多维数组的排序顺序跨浏览器兼容并具有“自然情况”相关的知识，希望对你有一定的参考价值。
我需要为我的Web应用程序精确地排序一些大型数组（1000-2000个键）。我在Safari 12.0 / FF 66.0中有点工作，但chrome 74.0似乎完全做了别的事情。
我要排序的序列 - 不区分大小写，具有自然情况：
1. "scene"
2. "shot"
3. "take"
4. "name"
这些值中的每一个都可以是字符串（例如，4，4b或4-PU üöä!"）或'undefined'，并且可能看起来像：
[
{"scene": "1", "shot": "1", "take": "4", "name": "A031C006_170718_R1W0"},
{"scene": "8", "shot": "8", "take": "4", "name": "A020C004_170716_R1W0"},
{"scene": "1", "shot": "1", "take": "10", "name": "A031C013_170718_R1W0"},
{"scene": undefined, "shot": undefined, "take": undefined, "name": "A001C549_190226_R04Q"},
{"scene": "2", "shot": "2", "take": "1", "name": "A008C010_170715_R1W0"},
{"scene": "5", "shot": "5", "take": "1", "name": "A015C005_170716_R1W0"},
{"scene": "3", "shot": "3", "take": "7", "name": "A002C003_170714_R1W0"},
{"scene": "5", "shot": "5", "take": "5", "name": "A021C005_170716_R1W0"},
{"scene": "5", "shot": "5", "take": "9", "name": "A024C006_170717_R1W0"},
{"scene": "1", "shot": "1", "take": "3", "name": "A004C006_170714_R1W0"},
{"scene": "1-b", "shot": "1", "take": "3", "name": "A004C007_170718_R1W0*"},
{"scene": "5", "shot": "5PU", "take": "6", "name": "A021C005_170716_R1W0*"},
]
如果密钥scene不存在，则排序到最后并按“名称”排序。
这是vue.js项目的一部分，我希望在没有额外库的情况下完成它。
到目前为止，这是我的功能。我用localCompare()比较例如。 4a到4或4ä。我很确定这很慢，可以好多了！
sortedFiles = sortClips(files)
sortClips(clips) {
let firstBy=(function(){function e(f){f.thenBy=t;return f}function t(y,x){x=this;return e(function(a,b){return x(a,b)||y(a,b)})}return e})();
let options = {
numeric: true,
sensitivity: 'base',
ignorePunctuation: true
};
clips.sort(
firstBy(function (v1, v2) {
if (!v1.scene) {
return v1.name.localeCompare(v2.name, undefined, options);
}
return v1.scene.localeCompare(v2.scene, undefined, options);
})
.thenBy(function (v1, v2) {
if (!v1.shot) return -1;
return v1.shot.localeCompare(v2.shot, undefined, options);
})
.thenBy(function (v1, v2) {
if (!v1.take) return -1;
return v1.take.localeCompare(v2.take, undefined, options);
})
);
return clips;
},
原始数据（场景，镜头，拍摄，名称）：
1 1 4 A031C006_170718_R1W0
8 8 4 A020C004_170716_R1W0
1 1 10 A031C013_170718_R1W0
undefined undefined undefined "A001C549_190226_R04Q"
2 2 1 A008C010_170715_R1W0
5 5 1 A015C005_170716_R1W0
3 3 7 A002C003_170714_R1W0
5 5 5 A021C005_170716_R1W0
5 5 9 A024C006_170717_R1W0
1 1 3 A004C006_170714_R1W0
1-b 1 3 A004C007_170718_R1W0*
5 5PU 6 A021C005_170716_R1W0*
Firefox / safari排序：
8 8 4 A020C004_170716_R1W0
1 1 4 A031C006_170718_R1W0
1 1 10 A031C013_170718_R1W0
undefined undefined undefined A001C549_190226_R04Q
5 5 1 A015C005_170716_R1W0
5 5 9 A024C006_170717_R1W0
3 3 7 A002C003_170714_R1W0
5 5 5 A021C005_170716_R1W0
1 1 3 A004C006_170714_R1W0
2 2 1 A008C010_170715_R1W0
1-b 1 3 A004C007_170718_R1W0*
5 5PU 6 A021C005_170716_R1W0*
Chrome的排序方式不同：
5 5 1 A015C005_170716_R1W0
5 5 9 A024C006_170717_R1W0
3 3 7 A002C003_170714_R1W0
5 5 5 A021C005_170716_R1W0
1 1 3 A004C006_170714_R1W0
undefined undefined undefined "A001C549_190226_R04Q"
8 8 4 A020C004_170716_R1W0
1 1 4 A031C006_170718_R1W0
1 1 10 A031C013_170718_R1W0
2 2 1 A008C010_170715_R1W0
1-b 1 3 A004C007_170718_R1W0*
5 5PU 6 A021C005_170716_R1W0*
目标：
1 1 3 A004C006_170714_R1W0
1 1 4 A031C006_170718_R1W0
1 1 10 A031C013_170718_R1W0
1-b 1 3 A004C007_170718_R1W0*
2 2 1 A008C010_170715_R1W0
3 3 7 A002C003_170714_R1W0
5 5 1 A015C005_170716_R1W0
5 5 5 A021C005_170716_R1W0
5 5PU 6 A021C005_170716_R1W0*
5 5 9 A024C006_170717_R1W0
8 8 4 A020C004_170716_R1W0
undefined undefined undefined A001C549_190226_R04Q
我怎么能像我想要的那样排序？
更新： 我已经包括边缘案例：
- 场景“1-b”当键为“场景”时，添加的字符“-b”应在具有场景“1”的所有元素之后排序。
- 当“按键”或“拍摄”键时，应该忽略添加的字符“PU”的“5PU”。
答案
只要比较结果为零，您就可以使用一系列键进行排序并获取另一个键。
var options = { numeric: true, sensitivity: 'base', ignorePunctuation: true },
array = [{ scene: "1", shot: "1", take: "4", namw: "A031C006_170718_R1W0" }, { scene: "8", shot: "8", take: "4", name: "A020C004_170716_R1W0" }, { scene: "1", shot: "1", take: "10", name: "A031C013_170718_R1W0" }, { scene: undefined, shot: undefined, take: undefined, name: "A001C549_190226_R04Q" }, { scene: "2", shot: "2", take: "1", name: "A008C010_170715_R1W0" }, { scene: "5", shot: "5", take: "1", name: "A015C005_170716_R1W0" }, { scene: "3", shot: "3", take: "7", name: "A002C003_170714_R1W0" }, { scene: "5", shot: "5", take: "5", name: "A021C005_170716_R1W0" }, { scene: "5", shot: "5", take: "9", name: "A024C006_170717_R1W0" }, { scene: "1", shot: "1", take: "3", name: "A004C006_170714_R1W0" }, { scene: "1-b", shot: "1", take: "3", name: "A004C007_170718_R1W0*" }, { scene: "5", shot: "5PU", take: "6", name: "A021C005_170716_R1W0*" }],
keys = ["scene", "shot", "take", "name"];
array.sort((a, b) => {
var result;
keys.some(k => result = String(a[k]).localeCompare(b[k], undefined, options));
return result;
});
console.log(array);.as-console-wrapper { max-height: 100% !important; top: 0; }另一答案
您的排序功能不稳定。
if (!v1.shot) return -1;
如果v2没有“射击”的倾向怎么办？你的排序函数应该总是返回sort(a, b)和sort(b, a)的相反结果，你的不会。由于Chrome似乎使用了另一种类型，因此仅针对此浏览器失败（到目前为止，算法可能会在将来发生变化）。
另一答案
这是一个复杂的问题。首先，代码，然后解释：
const scenes = [
{"scene": "1", "shot": "1", "take": "4", "name": "A031C006_170718_R1W0"},
{"scene": "8", "shot": "8", "take": "4", "name": "A020C004_170716_R1W0"},
{"scene": "1", "shot": "1", "take": "10", "name": "A031C013_170718_R1W0"},
{"scene": undefined, "shot": undefined, "take": undefined, "name": "A001C549_190226_R04Q"},
{"scene": "2", "shot": "2", "take": "1", "name": "A008C010_170715_R1W0"},
{"scene": "5", "shot": "5", "take": "1", "name": "A015C005_170716_R1W0"},
{"scene": "3", "shot": "3", "take": "7", "name": "A002C003_170714_R1W0"},
{"scene": "5", "shot": "5", "take": "5", "name": "A021C005_170716_R1W0"},
{"scene": "5", "shot": "5", "take": "9", "name": "A024C006_170717_R1W0"},
{"scene": "1", "shot": "1", "take": "3", "name": "A004C006_170714_R1W0"},
]
const compareString = (a, b) => {
if (`${a}` !== a) return 1
if (`${b}` !== b) return -1
return a.localeCompare(b, undefined, {
numeric: true,
sensitivity: 'base',
ignorePunctuation: true
})
}
const sorts = [
'scene',
'shot',
'take',
'name',
]
const globalCompare = (a, b) =>
sorts.reduce((acc, key) => {
if (acc == 0) return compareString(a[key], b[key])
return acc
}, 0)
scenes.sort(globalCompare)
console.log(scenes)以上是关于多维数组的排序顺序跨浏览器兼容并具有“自然情况”的主要内容，如果未能解决你的问题，请参考以下文章