vue数组对象快速获取最大值和最小值(linq插件各种常用好用方法),提高开发效率

news2024/11/24 20:30:41

需求:因后端传入的数据过多,前端需要在数组中某一值的的最大值和最小值计算,平常用的最多的不就是遍历之后再比对吗,或者用sort方法等实现,同事交了我一招,一句话就可以获取到数组对象中最大值和最小值,那就是用linq插件,确实好用,用法也很简单,故而分享给大家~

1.求数组对象的某一属性的最大值和最小值

方法一,使用linq插件

1.1先下载
npm install linq -S
1.2导入,可以局部或者全局,根据自己的需求来
import Enumerable from 'linq';
1.3使用
   const items: [
                { id: 0, value: -5 },
                { id: 1, value: 10 },
                { id: 2, value: -15 },
                { id: 3, value: 44 },
                { id: 4, value: 44 },
                { id: 5, value: -5 }
            ],
 // 筛选最大值和最小值
           const min = Enumerable.from(this.items).min(item => item.value);
           const max = Enumerable.from(this.items).max(item => item.value);

方法二,使用math实现,这个方法没上个好,要进行筛选

     let arr=[2,4,56,5,7,33];
        var obj=Math.max.apply(null,arr);
        var min=Math.min.apply(null,arr);
        console.log(obj,'最大值')
        console.log(min,'最大值')

 2.根据条件筛选所需值

 // 条件筛选出偶数,得到的值一定是满足where中条件的
            const arr = [1, 2, 3, 4, 5];
            this.result = Enumerable.from(arr)
                .where(x => x % 2 === 0)
                .toArray();
            console.log(this.result); // [2, 4]

3.数组对象去重

 
const items= [
                { id: 0, value: -5 },
                { id: 1, value: 10 },
                { id: 2, value: -15 },
                { id: 3, value: 44 },
                { id: 4, value: 44 },
                { id: 5, value: -5 }

                // { id: 3, value: "-220" }
            ],
 // linq的去重
            this.quchong = Enumerable.from(this.items)
                .distinct(item => item.value)
                .toArray();

 4.筛选查询特定的值,就是filter的功能

 // 筛选查询特定的值
            this.select = Enumerable.from(this.items)
                .select(item => item.value)
                .toArray();

 5.升序降序功能

var myList = [
                { Name: 'Jim', Age: 20 },
                { Name: 'Kate', Age: 21 },
                { Name: 'Lilei', Age: 18 },
                { Name: 'John', Age: 14 },
                { Name: 'LinTao', Age: 25 }
            ];
            this.orderByup = Enumerable.from(this.items)
                .orderBy(x => x.value)
                .toArray(); //升序
            this.orderBydown = Enumerable.from(myList)
                .orderByDescending(x => x.Age)
                .toArray(); //降序

 6.完整例子代码

<template>
    <div class="content-box">
        <div class="container">
            <span>原数组{{ items }}</span>
            <br />
            <span>最小值:{{ min }},最大值:{{ max }}</span>
            <br />
            <span>筛选后的值{{ result }}</span>
            <br />
            <span>去重后的数组{{ quchong }}</span>
            <br />
            <span>只要value的值{{ select }}</span>
            <br />
            <span>升序:{{ orderByup }}</span>
            <br />
            降序:{{ orderBydown }}
        </div>
    </div>
</template>

<script>
import Enumerable from 'linq';
export default {
    data() {
        return {
            items: [
                { id: 0, value: -5 },
                { id: 1, value: 10 },
                { id: 2, value: -15 },
                { id: 3, value: 44 },
                { id: 4, value: 44 },
                { id: 5, value: -5 }

                // { id: 3, value: "-220" }
            ],
            min: 0,
            max: 0,
            result: [],
            quchong: [],
            select: [],
            groupBy: [],
            orderByup: [],
            orderBydown: []
        };
    },
    mounted() {
        this.query();
    },
    methods: {
        query() {
            // 筛选最大值和最小值
            this.min = Enumerable.from(this.items).min(item => item.value);
            this.max = Enumerable.from(this.items).max(item => item.value);
            // 条件筛选出偶数,得到的值一定是满足where中条件的
            const arr = [1, 2, 3, 4, 5];
            this.result = Enumerable.from(arr)
                .where(x => x % 2 === 0)
                .toArray();
            console.log(this.result); // [2, 4]

            // linq的去重
            this.quchong = Enumerable.from(this.items)
                .distinct(item => item.value)
                .toArray();

            // 筛选查询特定的值
            this.select = Enumerable.from(this.items)
                .select(item => item.value)
                .toArray();
            // 分组
            var myList = [
                { Name: 'Jim', Age: 20 },
                { Name: 'Kate', Age: 21 },
                { Name: 'Lilei', Age: 18 },
                { Name: 'John', Age: 14 },
                { Name: 'LinTao', Age: 25 }
            ];
            this.orderByup = Enumerable.from(this.items)
                .orderBy(x => x.value)
                .toArray(); //升序
            this.orderBydown = Enumerable.from(myList)
                .orderByDescending(x => x.Age)
                .toArray(); //降序

            var array1 = [1, 412, 5, 3, 5, 412, 7];
            var array2 = [20, 12, 5, 5, 7, 310];
            const except = Enumerable.from(array1).except(array2).toArray(); //结果3,412,1
            console.log(except, '取差集,差集就是俩个数组中不相同的值');

            var array1 = [1, 412, 5, 3, 5, 412, 7];
            var array2 = [20, 12, 5, 5, 7, 310];
            const intersect = Enumerable.from(array1).intersect(array2).toArray();
            //结果5,7
            console.log(intersect, '取交集,交集就是俩个数组相同的值');
        }
    }
};
</script>

<style lang="scss" scoped></style>

常用的差不多就这些了,还有一些其他方法可以自行探索~文章到此结束,希望对你有所帮助~

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

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

相关文章

【Docker】Docker基本概念

Docker基本概念 1.Docker概述1.1 Docker是什么&#xff1f;1.2 Docker的宗旨1.3 容器的优点1.4 Docker与虚拟机的区别1.5 容器在内核中支持的两种技术1.6 namespace的六大类型 2.Docker核心概念2.1 镜像2.2 容器2.3 仓库 3. 知识点总结3.1 Docker是什么&#xff1f;3.2 容器和虚…

Fortinet Accelerate 2023·中国区巡展收官丨让安全成就未来

7月18日&#xff0c;2023 Fortinet Accelerate Summit在上海成功举办&#xff01;这亦象征着“Fortinet Accelerate2023中国区巡展”圆满收官。Fortinet携手来自多个典型行业的百余位代表客户&#xff0c;以及亚马逊云科技、Telstra - PBS 太平洋电信、Tenable等多家生态合作伙…

RT-Thread 学习-Env开发环境搭建(一)

Env是什么 Env 是 RT-Thread 推出的开发辅助工具&#xff0c;针对基于 RT-Thread 操作系统的项目工程&#xff0c;提供编译构建环境、图形化系统配置及软件包管理功能。 其内置的 menuconfig 提供了简单易用的配置剪裁工具&#xff0c;可对内核、组件和软件包进行自由裁剪&…

PROFIBUS-DP主站转ETHERNET/IP网关ethernet有哪些协议

远创智控YC-DPM-EIP是自主研发的一款PROFIBUS-DP主站功能的通讯网关。该产品主要功能是将各种PROFIBUS-DP从站接入到ETHERNET/IP网络中。 1, 本网关连接到PROFIBUS总线中作为主站使用&#xff0c;连接到ETHERNET/IP总线中作为从站使用。 1.2 产品特点 ◆ PROFIBUS-DP/V0 协议…

AtcoderABC243场

A - Shampoo A - Shampoo ] 题目大意 高桥家有三个人&#xff1a;高桥、他的父亲和他的母亲。每个人每晚都在浴室洗头发。他们按照顺序使用AA、BB和CC毫升的洗发水。 问&#xff0c;今天早上瓶子里有VV毫升的洗发水。在不重新装满的情况下&#xff0c;谁会第一个用完洗发水洗头…

【Maven四】——maven聚合和继承

系列文章目录 Maven之POM介绍 maven命令上传jar包到nexus 【Maven二】——maven仓库 【Maven三】——maven生命周期和插件 聚合和继承 系列文章目录前言一、什么是maven的聚合和继承&why二、聚合三、继承1.可继承的POM元素2.依赖管理3.插件管理 四、聚合与继承的关系五、约…

java电子病历系统源码

电子病历系统采取结构化与自由式录入的新模式&#xff0c;自由书写&#xff0c;轻松录入。化实现病人医疗记录&#xff08;包含有首页、病程记录、检查检验结果、医嘱、手术记录、护理记录等等。&#xff09;的保存、管理、传输和重现&#xff0c;取代手写纸张病历。不仅实现了…

【Docker】Docker安装与操作

docker的安装与命令 一、安装 docker1. 安装依赖包2. 信息查看 二、Docker 镜像操作1. 搜索镜像2. 获取镜像3. 镜像加速下载4. 查看镜像相关信息5. 删除镜像6. 上传镜像7. 存出和载入镜像 三、Docker 容器操作1. 创建容器2. 查看容器3. 启动容器4. 停止容器5. 进入容器6. 容器与…

四、DML-4.小结

一、数据记录操作 1、添加数据 给指定字段添加数据 insert into employee(id, workno, name, gender, age, idcard,entrydate) values (1, 001,Itcast, 男, 18, 123456789012345678, 2023-12-12); INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); 给全部…

Linux--使用者管理(job control)

Linux–使用者管理(job control) 文章目录 Linux--使用者管理(job control)前言一、任务管理(job control)二、&三、 将目前的任务丢到后台中暂停 -- ctrlz四、jobs -- 查看目前的后台任务状态五、fg -- 将后台任务拿到前台来处理六、bg -- 让任务在后台下的状态变为运行中…

LeetCode 1493. 删掉一个元素以后全为 1 的最长子数组 - 二分 + 滑动窗口

删掉一个元素以后全为 1 的最长子数组 提示 中等 90 相关企业 给你一个二进制数组 nums &#xff0c;你需要从中删掉一个元素。 请你在删掉元素的结果数组中&#xff0c;返回最长的且只包含 1 的非空子数组的长度。 如果不存在这样的子数组&#xff0c;请返回 0 。 提示 1&a…

2023-07-18力扣今日二题-太难了吧

链接&#xff1a; LCP 75. 传送卷轴 题意&#xff1a; 给一个正方形迷宫&#xff0c;主角是A&#xff0c;每次可以上下左右走一格子&#xff0c;有四种类型的格子&#xff1a;墙、初始位置、魔法水晶、空地 另一个人B&#xff0c;可以传送一次A&#xff0c;只能在空地传送&…

Twisted Circuit

题目描述 输入格式 The input consists of four lines, each line containing a single digit 0 or 1. 输出格式 Output a single digit, 0 or 1. 题意翻译 读入四个整数 00 或者 11&#xff0c;作为如图所示的电路图的输入。请输出按照电路图运算后的结果。 感谢PC_DOS …

算法与数据结构-排序

文章目录 一、如何分析一个排序算法1.1 排序算法的执行效率1.1.1 最好情况、最坏情况、平均情况时间复杂度1.1.1.1 最好、最坏情况分析1.1.1.2 平均情况分析 1.1.2 时间复杂度的系数、常数 、低阶1.1.3 比较次数和交换&#xff08;或移动&#xff09;次数 1.2 排序算法的内存消…

第六届字节跳动青训营报录比(宣传大使)

统计 前端基础卷&#xff1a;105 前端基础班&#xff1a;120-22(笔试不过基础班&#xff0c;宣传大使奖励进入&#xff09;98 前端进阶卷&#xff1a;77 前端进阶班&#xff1a;18-216 后端基础卷&#xff1a;151 后端基础班&#xff1a;220 后端进阶卷&#xff1a;133 后端进…

【论文笔记】KDD2019 | KGAT: Knowledge Graph Attention Network for Recommendation

Abstract 为了更好的推荐&#xff0c;不仅要对user-item交互进行建模&#xff0c;还要将关系信息考虑进来 传统方法因子分解机将每个交互都当作一个独立的实例&#xff0c;但是忽略了item之间的关系&#xff08;eg&#xff1a;一部电影的导演也是另一部电影的演员&#xff09…

133、仿真-基于51单片机太阳能热水器水温水位智能监控仪报警设计(Proteus仿真+程序+配套资料等)

方案选择 单片机的选择 方案一&#xff1a;STM32系列单片机控制&#xff0c;该型号单片机为LQFP44封装&#xff0c;内部资源足够用于本次设计。STM32F103系列芯片最高工作频率可达72MHZ&#xff0c;在存储器的01等等待周期仿真时可达到1.25Mip/MHZ(Dhrystone2.1)。内部128k字节…

【QT】元对象系统学习笔记(二)

QT元对象系统 01、属性系统1.1、 属性基础1.2、 QVariant类1.3、 使用QObject类存取属性值与动态属性1.4、 使用反射机制获取属性信息 02、信号与槽2.1、 信号与槽原理2.2、 创建信号与槽2.3、 信号与槽的连接2.4、 断开信号与槽2.5、 关键字原型 03、对象树与生命期3.1、组合模…

【TiDB理论知识 03】TiKV-持久化与数据读取

目录 一 TiKV架构和作用 二 数据持久化 1 RocksDB&#xff1a;写入 写入过程 第一步 &#xff1a;WAL 写日志 &#xff08;磁盘日志&#xff09; 第二步&#xff1a;写MemTable (内存中) 第三步 &#xff1a; 转存为immutable MemTable&#xff08;内存中&#xff09; …

JAVA集成国密SM4

JAVA集成国密SM4加解密 一、pom配置二、代码集成2.1、目录结构2.2、源码2.3、测试 三、遇到的坑3.1、秘钥长度3.2、转码问题 四、相关链接 国密算法概述&#xff1a;https://blog.csdn.net/qq_38254635/article/details/131801527 SM4对称算法 SM4 无线局域网标准的分组数据算…