前端JS必用工具【js-tool-big-box】学习,根据属性对数组对象进行排序

news2024/11/17 15:55:34

我们时常遇到这样的场景,服务端给返回的一些数据呢,是json对象是无序的,或者说返回了一个数组,但里面的数据,前端需要根据一些业务需求做排序。

这一小节呢,我们就说一下,利用 js-tool-big-box 工具库,根据一些属性对数据排序的方法。意思就是啊,我们一个json对象中,可能有年龄,有姓名,有时间等,我们根据这些属性,对数据从新排序。

1 安装js-tool-big-box工具库

 执行安装命令

npm install js-tool-big-box

引入 dataBox 对象,根据属性排序的方法被放到了这个对象下面

import { dataBox } from 'js-tool-big-box';

2 方法使用

我们预先准备一个数组数据:

const users = [
      {"name": "小张伟", "age": 19, "dateTime": '2021-03-03 15:33:10'},
      {"name": "张三", "age": 22, "dateTime": '2023-03-03 10:10:10'},
      {"name": "李四", "age": 30, "dateTime": '2024-04-03 10:10:10'},
      {"name": "阿斌", "age": 50, "dateTime": '2021-03-03 10:10:10'},
      {"name": "曹小操", "age": 1300, "dateTime": '1021-05-08 10:10:10'},
];

数据中有name,有age,有dateTime三个属性。 

2.1 根据数值型属性排序

从小到大的排序:

const ageResult1 = dataBox.sortByNumber(users, 'age');
console.log('age是数值型,从小到大,排序后的值为:', ageResult1);

展示效果:

 当然,你也可以让他从大到小的排列:

const ageResult2 = dataBox.sortByNumber(users, 'age', 1);
console.log('age是数值型,从大到小,排序后的值为:', ageResult2);

2.2 数值型属性排序 - 方法总结

方法名返回值入参

sortByNumber

返回根据第二个入参排序后的数组

第一个参数必填,表示需要被排序的json型数组;

第二个参数必填,表示需要用哪个属性排序,最好传入的属性的属性值为数值型;

第三个参数非必填,表示是否需要倒序排序

2.3 中文按字母顺序排序

从A到Z的排序:

const nameResult1 = dataBox.sortByletter(users, 'name');
console.log('比如name,我们按照字母顺序排序后为:', nameResult1);

从Z到A的排序: 

const nameResult2 = dataBox.sortByletter(users, 'name', 1);
console.log('比如name,我们按照字母顺序倒序排序后为:', nameResult2);

2.4 中文按字母顺序排序 - 方法总结 

方法名返回值入参

sortByletter

返回根据第二个入参排序后的数组

第一个入参必填,表示需要被排序的数组;

第二个入参必填,表示需要用哪个属性排序,这个你需要提前甄别,你传入的属性值是否为中文;

第三个参数非必填,表示是否需要倒序排序

2.5 按时间排序 

从早到晚的排序:

const timeResult1 = dataBox.sortByTime(users, 'dateTime');
console.log('以时间从早到晚排序后的值为:', timeResult1);

从晚到早的排序:

const timeResult2 = dataBox.sortByTime(users, 'dateTime', 1);
console.log('以时间从晚到早排序后的值为:', timeResult2);

2.6 按时间排序 - 方法总结 

方法名返回值入参

sortByTime

返回根据第二个入参排序后的数组

第一个入参必填,表示需要被排序的数组;

第二个入参必填,表示需要用哪个属性排序,传入的属性的属性值最好是时间类型;

第三个参数非必填,表示是否需要倒序排序

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

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

相关文章

Flask之表单

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 目录 一、HTML表单 二、使用Flask-WTF处理表单 2.1、定义WTForms表单类 2.2、输出HTML代码 2.3、在模板中渲染表单 三、处理表单数据 3.1、提…

武汉星起航:亚马逊全球化布局助力企业拓展国际市场

在当今全球化经济的大背景下,企业如何突破地域限制,将产品推向更广阔的市场,成为了摆在众多企业家面前的重要课题。武汉星起航相信,亚马逊,作为全球最大的在线零售平台之一,以其独特的全球化布局和强大的服…

nuget 包修改默认存放路径

平时使用 nuget packages 时,都是下载包文件到本地。 默认是在C盘,时间一久容量会高达几十个G,这样会拖慢系统运行效率。 这时需要修改包的下载位置。 打开nuget 包配置文件:Nuget.config 路径在 C:\Users\{UserName}\AppData…

一年Java|16K|同程艺龙面经

面经哥只做互联网社招面试经历分享,关注我,每日推送精选面经,面试前,先找面经哥 背景 公司:同程艺龙成都BU,现场部门老大面 之前的同程艺龙电话一面过了,然后通知到同程艺龙成都办公地点现场进行部门老大…

RK3588 Android13 TvSetting 中性能浮窗RAM显示bug

前言 电视产品,客户发现在设备偏好设置->高级设置->性能浮窗菜单里显示的 RAM 大小是错误的, 要求改成正确的,并且屏幕密度修改后,这个浮窗显示不全,也需要一起处理。 效果图 TvSetting 部分修改文件清单 bug 原因在于 Formatter.formatFileSize 这个 API,我们…

ATA-7025高压放大器的优势如何

高压放大器是一类在电子领域中具有重要作用的设备,其主要功能是将输入信号的电压放大到更高的水平。在许多应用中,高压放大器展现出独特的优势,下面将介绍高压放大器的优势以及它们在不同领域的应用。 高压放大器的优势 1.信号驱动能力强 高压…

探索AI世界系列:俗说AI智能体

AI agent,翻译为中文就是AI智能体。 什么是AI智能体呢? 一,GPT对AI智能体的定义 AI智能体,即人工智能体(Artificial Intelligence Agent),是具有自主性、学习能力和推理能力的计算机程序。 …

常用的企业级快速传输大文件平台

在当今企业运营中,数据管理成了一项不可或缺的任务。企业每日需处理庞大的数据量,这包括高清视频、大量数据集和复杂的设计图纸等大型文件。然而,传统的文件传输手段,比如通过电子邮件发送附件或使用FTP服务,已经难以满…

【C++】关于虚函数的理解

深入探索C虚函数:原理、应用与实例分析 一、虚函数的原理二、虚函数的应用三、代码实例分析四、总结 在C面向对象编程的世界里,虚函数(Virtual Function)扮演着至关重要的角色。它不仅实现了多态性这一核心特性,还使得…

充电宝怎么选合适?买充电宝必看选购攻略!好用充电宝推荐

在这个科技飞速发展的时代,手机、平板等电子设备已经成为我们生活中不可或缺的一部分。然而,电池续航问题却常常困扰着我们,特别是在外出旅行、出差或者日常通勤中。这时候,一个靠谱的充电宝就显得尤为重要。但是,面对…

MySQL学习(3):SQL语句之DDL

1.SQL通用语法与分类 (1)通用语法 (2)分类 2.DDL 2.1数据库操作 show DATABASES; #查询所有数据库select DATABASE(); #查询当前数据库create DATABASE 数据库名称 [default charest 字符集] [collate 排列规则]; #default cha…

gMLP(NeurIPS 2021)原理与代码解析

paper:Pay Attention to MLPs third-party implementation:https://github.com/huggingface/pytorch-image-models/blob/main/timm/models/mlp_mixer.py 方法介绍 gMLP和MLP-Mixer以及ResMLP都是基于MLP的网络结构,非常简单,关…

太阳初升:born 诞生

在《long long ago》中,我们分析出了首字母l的形象,就是长长的脐带的形象,ong就是脐带冗余蔓连于婴儿肚子上的形象,整个场景为婴儿呱呱坠地脐带尚未剪掉时的情景,而且on通汉字“旦”,通“one”,…

红酒品鉴秘籍:一键解锁味觉宇宙,开启你的味觉探险新纪元

红酒,这种优雅的液体,蕴藏着丰富的口感和层次,每一次的品鉴都是一次味觉的探险。今天,就让我们一起探索红酒品鉴的奥秘,解锁味觉的新世界,而在这个过程中,雷盛红酒将成为我们的向导,…

GraphQL:简介

GraphQL 图片来源: 我们将探索GraphQL 的基础知识,并学习如何使用Apollo将其与 React 和 React Native 等前端框架连接起来。这将帮助您了解如何使用 GraphQL、React、React Native 和 Apollo 构建现代、高效的应用程序。 什么是 GraphQL?…

[深度学习] 生成对抗网络GAN

生成对抗网络(Generative Adversarial Networks,GANs)是一种由 Ian Goodfellow 等人在2014年提出的深度学习模型Generative Adversarial Networks。GANs的基本思想是通过两个神经网络(生成器和判别器)的对抗过程&#…

Nodejs使用mqtt库连接阿里云服务器

建项目 命令行输入: npm init 输入项目名,自动化生成项目列表。 6.3 编写代码 新建mqtt_demo_aliyun.js,代码如下: // mqtt_demo_aliyun.jsconst mqtt require("mqtt"); const connectUrl "ws://post-cn-nw**…

展厅设计中需要人性化的地方

1、预留参观空间 展厅空间的布局设计必须尽可能的宽敞,以避免参观人数较多时可能会发生的拥堵,重点展品需要预留较大的展示空间或四面通畅的中心位置,更方便观众从不同角度与方位参观。因为是展厅,不仅代表着企业形象,…

安科瑞光伏并网电表ADL400N-CT双向计量防逆流自带互感器电表-安科瑞 蒋静

1 概述 ADL 系列导轨式多功能电能表,是主要针对于光伏并网系统、微逆系统、储能系统、交流耦合系统等新能源发电系统而设计的一款智能仪表,产品具有精度高、体积小、响应速度快、安装方便等特点。具有对电力参数进行采样计量和监测,逆变器或…

flask与vue实现通过websocket通信

在一些情况下,我们需要实现前后端之间的时刻监听,本文是一篇工具文档,用于解决前后端之间使用websocket交互。 一. Flask的相关配置 1. 下载相关依赖库 如果还没有配置flask的话,需要先安装flask,同时为解决跨域问题&#xff0…