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

news2024/9/21 8:03:37

一、排序栗子

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

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

二、代码 

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从小到大输出) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1304246.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Axure RP 9 入门教程

1. Axure简介 Axure 是一个交互式原型设计工具,可以帮助用户创建复杂的交互式应用程序和网站。Axure 能够让用户快速构建出具有高度可交互性的原型,可以在团队中进行协作、分享和测试。 使用 Axure 可以设计出各种不同类型的原型,包括网站、移…

windows下安装git中文版客户端

下载git Windows客户端 git客户端下载地址:Git - Downloads 我这里下载的是Git-2.14.0-64-bit.exe版本 下载TortoiseGit TortoiseGit客户端下载地址:Download – TortoiseGit – Windows Shell Interface to Git TortoiseGit客户端要下载两个&#…

C++学习笔记(十一)------has_a和use_a关系

文章目录 前言 一、has_a关系 1.1 has_a概念 1.2 has_a中构造和析构的顺序 1.3 has_a对象的内存情况 二、use_a关系(友元关系) 1.友元函数: 2.友元类 3 使用多文件编程的方式重新编辑上述代码 总结 前言 随着技术的革新,出现各种各…

三种方法:教你选择腾讯云服务器配置及报价

腾讯云服务器购买流程直接在官方秒杀活动上购买比较划算,在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵,但是自定义购买云服务器CPU内存带宽配置选择范围广,活动上购买只能选择固定的活动机,选择范围窄,但是…

MQ-Det: Multi-modal Queried Object Detection in the Wild

首个支持视觉和文本查询的开放集目标检测方法 NeurIPS2023 文章:https://arxiv.org/abs/2305.18980 代码:https://github.com/YifanXu74/MQ-Det 主框图 摘要 这篇文章提出了MQ-Det,一种高效的架构和预训练策略,它利用文本描述的…

IDEA调整内存大小

一、IDEA开启内存显示 双击shift,搜索show memory indicator 打开后重启,右下角显示IDEA内存占用情况 开启后右下角会显示 二、调整内存 双击shift,搜索vmoption 修改-Xms和-Xmx参数,如下: -Xms:最小内存 -Xmx:最大内存 设置完成后&…

HTTP协议在Linux上进行数据库访问代码示例

在Linux上使用HTTP协议进行数据库访问通常涉及到使用库如requests来进行HTTP请求,以及使用json或类似的库来处理返回的数据。下面是一个使用Python的简单示例,展示如何通过HTTP协议在Linux上访问数据库。 首先,你需要确保你的Linux系统上已经…

【flink番外篇】3、fflink的source(内置、mysql、kafka、redis、clickhouse)介绍及示例(2)- 自定义、mysql

Flink 系列文章 一、Flink 专栏 Flink 专栏系统介绍某一知识点,并辅以具体的示例进行说明。 1、Flink 部署系列 本部分介绍Flink的部署、配置相关基础内容。 2、Flink基础系列 本部分介绍Flink 的基础部分,比如术语、架构、编程模型、编程指南、基本的…

图解Redis,谈谈Redis的持久化,RDB快照与AOF日志

目录 专栏导读一、RDB持久化1、自动触发2、手动触发3、设置保存条件4、加解密5、RDB持久化优缺点6、哪些情况会触发RDB持久化?二、AOF持久化1、AOF持久化过程2、appendfsync的选项值3、AOF持久化优缺点4、数据恢复顺序和加载流程三、Redis事务</

Leetcode—2962.统计最大元素出现至少 K 次的子数组【中等】

2023每日刷题&#xff08;五十六&#xff09; Leetcode—2962.统计最大元素出现至少 K 次的子数组 滑动窗口算法思想 参考的灵神思路 实现代码 class Solution { public:long long countSubarrays(vector<int>& nums, int k) {int n nums.size();long long ans…

深度学习 Day12——P1实现mnist手写数字识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言1 我的环境2 代码实现与执行结果2.1 前期准备2.1.1 引入库2.1.2 设置GPU&#xff08;如果设备上支持GPU就使用GPU,否则使用C…

【计算机网络】URL概念及组成

目录 一、什么是URL 二、URL格式 示例&#xff1a; 1. Scheme&#xff08;协议&#xff09;&#xff1a; 2. Host&#xff08;主机&#xff09;&#xff1a; 3. Port&#xff08;端口&#xff09;&#xff1a; 4. Path&#xff08;路径&#xff09;&#xff1a; 5. Quer…

容器化升级对服务有哪些影响?

容器技术是近几年计算机领域的热门技术&#xff0c;特别是随着各种云服务的发展&#xff0c;越来越多的服务运行在以 Docker 为代表的容器之内。 本文我们就来分享一下容器化技术相关的知识。 容器化技术简介 相比传统虚拟化技术&#xff0c;容器技术是一种更加轻量级的操作…

如何使用玻璃材质制作3D钻石模型

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…

Python数值类型(整形、浮点型和复数)及其用法

数值类型是计算机程序最常用的一种类型&#xff0c;既可用于记录各种游戏的分数、游戏角色的生命值、伤害值等&#xff0c;也可记录各种物品的价格、数量等&#xff0c;Python 提供了对各种数值类型的支持&#xff0c;如支持整型、浮点型和复数。 Python整型 Python 3 的整型…

Python入门第6篇(FastApi、uvicorn)

前言 FastApi用来开发webapi&#xff0c;可以定义路由、定义get、post方法等 但是要让浏览器可以访问webapi&#xff0c;还需要用到uvicorn&#xff0c;即web服务器&#xff0c;类似Tomcat、iis这种的 pip安装相关包 FastApi uvicorn 注意&#xff1a;可能一次安装不成功…

二叉树--基础OJ

1.对称二叉树 题目链接&#xff1a;101. 对称二叉树 - 力扣&#xff08;LeetCode&#xff09; 题解&#xff1a; 我们可以用递归的方法去做&#xff1a; 如果两个树互为镜像&#xff08;1.根节点的值相同&#xff0c;2.左子树的值与右子树的值对称&#xff09;则为对称二叉树&a…

win中查看MD5、Linux中查看MD5

win中的MD5计算 1、用GitBash Git Bash Here md5sum.exe 我记得-孙燕姿.mp32、win自带命令 certutil -hashfile 我记得-孙燕姿.mp3 MD5Linux中MD5计算 md5sum 我记得-孙燕姿.mp3

使用paddleocr识别图片文本的一种方案

pdf文本分为两种&#xff0c;一种是标准的pdf格式的文本&#xff0c;这种无需利用ocr识别&#xff0c;另外一种就是图片文本&#xff0c;这种需要进行ocr的识别。 OCR 识别文本和文本区域 ppstructure是paddleocr里面的一个子库&#xff0c;可以识别文档的页眉页脚、正文、标…

多线程 - 学习笔记

前置知识 什么是线程和进程? 进程: 是程序的一次执行,一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间&#xff0c;一个进程可以有多个线程&#xff0c;比如在Windows系统中&#xff0c;一个运行的xx.exe就是一个进程。 线程: 进程中的一个执行流&#xff0…