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

这篇具有很好参考价值的文章主要介绍了vue数组对象快速获取最大值和最小值(linq插件各种常用好用方法),提高开发效率。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:因后端传入的数据过多,前端需要在数组中某一值的的最大值和最小值计算,平常用的最多的不就是遍历之后再比对吗,或者用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);

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

方法二,使用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();

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

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

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

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

 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(); //降序

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

 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>

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

常用的差不多就这些了,还有一些其他方法可以自行探索~文章到此结束,希望对你有所帮助~文章来源地址https://www.toymoban.com/news/detail-600001.html

到了这里,关于vue数组对象快速获取最大值和最小值(linq插件各种常用好用方法),提高开发效率的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python获取二维数组(矩阵)第二列值与最大值

    对于二维数组(矩阵)的应用有多广与多重要,怎么研究都不为过,突然想获取其中最大的一组值,发现max返回的是第一列最大值的这组数,如何获得第二列最大的这组数呢? 比如: A=[[1, 2], [12, 22], [22, 5], [22, 50], [122, 50], [330, 3], [4, 400], [34, 56], [3, 44]] 如果max(A),返回的是[330, 3

    2024年02月06日
    浏览(51)
  • C++-map:获取map中value最大值、最小值对应的键值对

    简述:通过调用 max_element 函数,给定其特定的比较方式,将会获得在给定比较方式下得结果.上述代码中,给定的比较方式是根据 value 值进行比较, 相当于重构了 号.将返回最大值 . 使用匿名函数重构: 打印结果: C++获取map中value最大最小值对应的键值对_普通网友的博客-CSDN博客

    2024年02月16日
    浏览(45)
  • Java中对于List<Map>对象中的相关操作(排序、最大值、最小值、和、平均数)

    一、对List Map 中指定键对应的值进行排序 注意: (1)、升序和降序的主要区别就是方法中调用compareTo方法的对象不同,其余没有变化 (2)、Map集合的getOrDefault方法是为了防止出现空指针异常(如果你的数据都不为空则可以直接用get方法进行取值) 二、获取List Map 中的指定键对应的

    2024年02月16日
    浏览(40)
  • 如何使用Python的pandas库获取DataFrame数据的最小值、最大值以及自定义分位数?

    Pandas是一个非常流行的Python数据处理库,它提供了大量的方法和工具来处理和分析数据。在本文中,我将向您展示如何使用Pandas获取dataframe格式数据的最小值、最大值和自定义分位数。 1、 获取最小值和最大值 获取dataframe的最小值和最大值非常简单。可以使用Pandas的min()和

    2024年02月02日
    浏览(83)
  • 利用OpenCV的函数minMaxLoc()获取图像中像素的最小值、最大值以及对应的坐标值

    函数minMaxLoc()的原型如下: C++原型: Python原型: 参数意义很简单,官方文档原文如下: src—input single-channel array. minVal—pointer to the returned minimum value; NULL is used if not required. maxVal—pointer to the returned maximum value; NULL is used if not required. minLoc—pointer to the returned minimum location (in

    2024年02月03日
    浏览(51)
  • C语言深度剖析,关于查找一个数组里面的最大值(max)、最小值(min)的通俗算法,简单易懂。采用比较法进行查找。

    这里采用了一个假设 假设第一个数为最大值,其他数与第一个数比较。 这个算法与上面求解最大值的方法相反。 1、首先,定义行和列。 用行标记来确定列的数量。 i 来表示行, j来表示列。 2、内嵌的for循环只打印一行所有列。 如,i=3时,此时j=3. 从1*3 遍历到3*3后内嵌循环

    2024年02月08日
    浏览(46)
  • leetcode刷题(字符串相加、包含每个查询的最小区间、模拟行走机器人、环形子数组的最大和、满足不等式的最大值、四数之和、树中距离之和)

    目录 1、字符串相加 2、包含每个查询的最小区间 3、模拟行走机器人 4、环形子数组的最大和 5、满足不等式的最大值 6、四数之和 7、 树中距离之和

    2024年02月10日
    浏览(47)
  • MATLAB-最大值与最小值

    在MATLAB中,用于计算最大值的函数是max函数,用于计算最小值的函数是min函数,其调用格式如下。 B=max(A) %计算最大值 ,若A为向量,则计算并返回向量中的最大值;若A为矩阵,则计算并返回 %一个含有各列最大值的行向量 B=min(A) %计算最小值 若A为向量,则计算并返回向量中的最

    2024年02月07日
    浏览(45)
  • OpenCV minMaxLoc()函数找出图像中最小值最大值

    OpenCV 找出图像中最小值最大值函数minMaxLoc的使用 功能:从一个矩阵中找出全局的最大值和最小值。 函数cv::minMaxLoc找出最大和最小元素的值和他们的位置。极值是遍历整个矩阵找到,或者当掩码不是一个空矩阵时,是通过遍历指定矩阵区域找到。 函数不适用于多通道矩阵,

    2024年02月08日
    浏览(50)
  • Java8中Stream流求最大值最小值

    1. stream().reduce()实现 2. stream().max()或stream().min()实现 1. stream().reduce()实现 2. Collectors.summarizingInt()实现 3. stream().max()或stream().min()实现 1. stream().reduce()实现 2. Collectors.summarizingLong()实现 3. stream().max()或stream().min()实现 1. stream().reduce()实现 2. Collectors.summarizingLong()实现 3. stream().max(

    2024年01月17日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包