微信小程序js数组对象根据某个字段排序

一、排序栗子

注: 属性字段需要进行转换,如String类型或者Number类型

java 复制代码
//升序排序  首元素(element1)在前   降序则(element1)元素在后
data = data.sort((element1, element2) =>
      element1.属性 - element2.属性
);

二、代码

html 复制代码
Page({

  /**
   * 页面的初始数据
   */
  data: {
    user: [
      {'id': 1,"age": 10,"name": "黑大帅"},
      {'id': 3,"age": 5,"name": "懒洋洋"},
      {'id': 2,"age": 7,"name": "小灰灰"},
    ],
    location: [
      {'id': 3334,'km': '142.14KM','address': '上海市-黄埔区-打浦路1号'},
      {'id': 3399,'km': '145.73KM','address': '上海市-黄浦区-中山东二路'},
      {'id': 5865,'km': '142.98KM','address': '上海市黄浦区徐家汇268号luOne凯德晶萃广场'},
    ]
  },

  sortArray() {
    console.log("位置信息:");
    console.log(this.data.location);
    console.log("用户信息:");
    console.log(this.data.user);

    console.log("排序后数据===============================");

    console.log("位置信息:");
    //根据距离从小到大排序
    let locationSort = []
    locationSort = this.data.location.sort((el1, el2) =>
      el1.km.split("KM")[0] - el2.km.split("KM")[0]
    );
    console.log(locationSort);
    
    console.log("用户信息:");
    // 根据年龄从大到小排序
    let userSort = []
    userSort = this.data.user.sort((item1, item2) =>
      item2.age-item1.age
    );
    console.log(userSort);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    that.sortArray()
  },

})
  • 排序前数据(乱序输出)
  • 排序后数据(
  • 用户根据年龄从大到小输出,
  • 位置根据km从小到大输出)
相关推荐
用户47949283569151 分钟前
用|运算符写管道?Symbol.toPrimitive让JavaScript提前用上|>语法
前端·javascript
流水线上的指令侠18 分钟前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio
知识分享小能手19 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_916008892 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
晴殇i2 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
码农刚子2 小时前
ASP.NET Core Blazor简介和快速入门 二(组件基础)
javascript·后端
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
不如喫茶去3 小时前
VUE查询-历史记录功能
前端·javascript·vue.js
一枚前端小能手3 小时前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
Tech_Lin3 小时前
JavaScript Date时间对象的常用操作方法总结
前端·javascript