1.根據某個字段排序

var arr = [{name:'張三',age:15},{name:'李四',age:18},{name:'王五',age:28} ];function compare(property){return function(a,b){var value1 = a[property];var value2 = b[property];return value1 - value2; //降序只需要 return value2- value1} } console.log(arr.sort(compare('age')))

2.根據某兩個字段排序

方法中只需要傳兩個字段

var arr = [{name:'張三',age:15,num:13},{name:'李四',age:15,num:16},{name:'王五',age:28,num:18},{name:'木子李',age:18,num:18} ];compare (property, p2) {return function (a, b) {var value1 = a[property];var value2 = b[property];if (value1 != value2) {return value1 - value2;} else {return a[p2] - b[p2];}}}console.log(arr.sort(compare('age','num')))

3.嵌套數組排序

需求：單擊看選項詳情，雙擊查看ABCD的排序

tips:在vue中是提供了雙擊事件 dblclick的，所以我們可以在同一元素上可以綁定單擊和雙擊，在我之前的項目需求是：點擊eachart餅圖扇是展示詳情，雙擊是按選項排序，實現核心代碼：

let TimeFn = null;_this.myChartzu.on('click', (params) => {clearTimeout(TimeFn);//執行延時TimeFn = setTimeout(() => {//do function在此處寫單擊事件要執行的代碼let objCode = {dialogVisible: true,unitCode: params.seriesId,cureentQnTitleCode: _this.cureentQnTitleCode,queryMethods: 'byUnitCode',// qnCode:this.tableData.qnCode}if (this.unitTypeCode <= 7000) {_this.$emit('emitShowDialogTwo', objCode)} else {this.$message.info('已經到最底層了，不能再點了！')}}, 200);});//雙擊排序_this.myChartzu.on('dblclick', (params) => {clearTimeout(TimeFn);let currentName = params.namelet index = -1this.tableData[0].items.forEach((item, idx) => {if (currentName == item.content) {index = idx}})

針對vue中的dblclick事件單獨做了個demo

html<ul class="ul"><li v-for="qn in arr" :key="qn.code"><h2>{{ qn.name }}</h2><divclass="items"v-for="item in qn.items":key="item.area"@click.stop="click(item)"@dblclick.stop="sortC(item)"><a href="#"> 選項：{{ item.area }} 得分：{{ item.order }} </a></div></li></ul> data數據：arr: [{"code": "10001","name": '1.足球',"items": [{"area": "A","order": 8},{"area": "B","order": 9},{"area": "C","order": 10}, {"area": "D","order": 11},]},{"code": "10003","name": '2.籃球',"items": [{"area": "A","order": 15},{"area": "B","order": 13},{"area": "C","order": 18}, {"area": "D","order": 6},]},{"code": "10002","name": '3.乒乓球',"items": [{"area": "A","order": 23},{"area": "B","order": 20},{"area": "C","order": 19}, {"area": "D","order": 21},]}] 方法：methodsclick (item) {clearTimeout(time); //首先清除計時器 在script里面定義let time = null; time = setTimeout(() => {//定時器里面處理事件console.log(item);console.log('單擊');}, 300); //大概時間300ms},sortC (q) {clearTimeout(time); //清除console.log('雙擊');let index = -2this.arr[0].items.forEach((item, idx) => {//因為arr下面的都是ABCD就直接取的第一個數組遍歷找出對應的idxconsole.log(item);if (q.area == item.area) {index = idx}})console.log(index);if (index != -2) {this.arr = this.arr.sort((a, b) => b.items[index].order - a.items[index].order)}},

總結

以上是生活随笔為你收集整理的js数组、数组嵌套根据某个字段排序（eachart图标双击事件、vue双击）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。