1.根據(jù)某個(gè)字段排序

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.根據(jù)某兩個(gè)字段排序

方法中只需要傳兩個(gè)字段

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.嵌套數(shù)組排序

需求：單擊看選項(xiàng)詳情，雙擊查看ABCD的排序

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

let TimeFn = null;_this.myChartzu.on('click', (params) => {clearTimeout(TimeFn);//執(zhí)行延時(shí)TimeFn = setTimeout(() => {//do function在此處寫(xiě)單擊事件要執(zhí)行的代碼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('已經(jīng)到最底層了，不能再點(diǎn)了！')}}, 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}})

針對(duì)vue中的dblclick事件單獨(dú)做了個(gè)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="#"> 選項(xiàng)：{{ item.area }} 得分：{{ item.order }} </a></div></li></ul> data數(shù)據(jù)：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); //首先清除計(jì)時(shí)器 在script里面定義let time = null; time = setTimeout(() => {//定時(shí)器里面處理事件console.log(item);console.log('單擊');}, 300); //大概時(shí)間300ms},sortC (q) {clearTimeout(time); //清除console.log('雙擊');let index = -2this.arr[0].items.forEach((item, idx) => {//因?yàn)閍rr下面的都是ABCD就直接取的第一個(gè)數(shù)組遍歷找出對(duì)應(yīng)的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)}},

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。