Quickly obtain the maximum and minimum values of the vue array object (various common and easy-to-use methods of linq plug-ins), improving development efficiency

Requirements: Due to too much data passed in from the backend, the frontend needs to calculate the maximum and minimum values ​​of a certain value in the array. Isn’t the most commonly used method is to compare after traversal, or use the sort method to achieve, A colleague gave me a trick. You can get the maximum and minimum values ​​in the array object in one sentence . That is to use the linq plug-in . It is really easy to use and the usage is very simple, so I will share it with you~

1. Find the maximum and minimum values ​​of a property of an array object

Method 1, use the linq plugin

1.1 Download first
npm install linq -S
1.2 Import, can be local or global, according to your own needs
import Enumerable from 'linq';
1.3 use
   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);

Method 2, use math to implement, this method is not good, and it needs to be screened

     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. Filter the required value according to the condition

 // 条件筛选出偶数,得到的值一定是满足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. Deduplication of array objects

 
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 and query specific values, which is the function of filter

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

 5. Ascending and descending function

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. Complete example code

<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>

That’s about all the commonly used ones, and there are some other methods you can explore by yourself~ This is the end of the article, I hope it will be helpful to you~

Guess you like

Origin blog.csdn.net/qq_44278289/article/details/131812281