js通过数组对象中某一属性进行排序

蔚落 2022-12-07 11:46 66阅读 0赞

通过数组对象中的name进行排序，数据如下：

tableData: [{
                            id: '12987122',
                            name: '王小虎',
                            amount1: '234',
                            amount2: '3.2',
                            amount3: 10
                        }, {
                            id: '12987124',
                            name: '张小虎',
                            amount1: '324',
                            amount2: '1.9',
                            amount3: 9
                        }, {
                            id: '12987124',
                            name: '李小虎',
                            amount1: '165',
                            amount2: '4.43',
                            amount3: 12
                        }, {
                            id: '12987125',
                            name: '何小虎',
                            amount1: '621',
                            amount2: '2.2',
                            amount3: 17
                        }, {
                            id: '12987126',
                            name: '田小虎',
                            amount1: '539',
                            amount2: '4.1',
                            amount3: 15
                        }],

未排序前：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70][]

方法如下：

sortTable: function(tableData) {
    				tableData.sort(function(a,b){
    					return a.name.localeCompare(b.name) // name 就是需要排序的属性
    				});
    				return tableData;
    			},

排序后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 1][]

sortTable方法中的name按自己的需求进行修改

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]: /images/20221123/161a909a69354f33811c9269aee199af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 1]: /images/20221123/820850abe9b34d11a36e1804d721d2ec.png