javascript-跨浏览器兼容的多维数组的排序顺序以及“自然情况”

我需要对Web应用程序进行一些复杂的排序(1000-2000个键).我在Safari 12.0 / FF 66.0中可以正常工作,但是chrome 74.0似乎可以完全完成其他工作.

我要排序的顺序-不区分大小写,自然大小写：

1. "scene"  
2. "shot"  
3. "take"  
4. "name"

这些值中的每一个都可以是字符串(例如4、4b或4-PUüöä！“)或“未定义”,可能类似于：

[
  {"scene": "1","shot": "1","take": "4","name": "A031C006_170718_R1W0"},{"scene": "8","shot": "8","name": "A020C004_170716_R1W0"},{"scene": "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","name": "A015C005_170716_R1W0"},{"scene": "3","shot": "3","take": "7","name": "A002C003_170714_R1W0"},"take": "5","name": "A021C005_170716_R1W0"},"take": "9","name": "A024C006_170717_R1W0"},"take": "3","name": "A004C006_170714_R1W0"},{"scene": "1-b","name": "A004C007_170718_R1W0*"},"shot": "5PU","take": "6","name": "A021C005_170716_R1W0*"},]

如果不存在关键场景,则排序到末尾并按“名称”排序.

这是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,options);
    })
      .thenBy(function (v1,v2) {
        if (!v1.shot) return -1;
        return v1.shot.localeCompare(v2.shot,options);
      })
      .thenBy(function (v1,v2) {
        if (!v1.take) return -1;
        return v1.take.localeCompare(v2.take,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”的元素之后.
>击“ 5PU”键是“击”或“接”键时,应忽略添加的字符“ PU”.

最佳答案

只要比较结果为零,就可以采用一组键进行排序,也可以采用另一个键.

var options = { numeric: true,ignorePunctuation: true },array = [{ scene: "1",shot: "1",take: "4",namw: "A031C006_170718_R1W0" },{ scene: "8",shot: "8",name: "A020C004_170716_R1W0" },{ scene: "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",name: "A015C005_170716_R1W0" },{ scene: "3",shot: "3",take: "7",name: "A002C003_170714_R1W0" },take: "5",name: "A021C005_170716_R1W0" },take: "9",name: "A024C006_170717_R1W0" },take: "3",name: "A004C006_170714_R1W0" },{ scene: "1-b",name: "A004C007_170718_R1W0*" },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],options));
    return result;
});
console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

javascript-跨浏览器兼容的多维数组的排序顺序以及“自然情况”

相关推荐