Vue使用linqjs 数据处理新体验，json数据处理-uniapp使用

た入场券 2021-09-13 18:30 850阅读 0赞

## Vue使用linqjs 数据处理新体验，json数据处理-uniapp使用 ##

前言对json数据处理的方式很多，新的ES6789新增的许多处理方式，这里推荐下linqjs的数据处理，更多的是查询；linq原是.net、C\#的数据查询之类的，后有了linq.js的js处理使用；小白一个，目前在使用uniapp开发，这里教材我直接上uniappd ，话不多说，上例子：

### 下载引入使用（HX限制，只有下载引入linq.min.js使用） ###

下载网址：http://jslinq.codeplex.com/  
linq参考：GitHub - mihaifm/linq: linq.js - LINQ for JavaScript：  
https://github.com/mihaifm/linq/  
详细例子：  
linq/tutorial.js at master · mihaifm/linq · GitHub  
https://github.com/mihaifm/linq/blob/master/sample/tutorial.js

具体使用（uniapp)亲测：  
全局引用linq.js  
1、下载：linq.min.js，存放根目录utils中，（个人习惯文件夹）  
2、main.js全局引入

//全局引用linq
    import Enumerable from 'utils/linq.min.js';
    Vue.prototype.$Enumerable = Enumerable //赋值到vue里面

3、页面直接使用

var arrRes = $Enumerable.from(myList).where( “x=>x.Name==‘Jim’” ).toArray();

注意：我在uniapp使用时，字段首字母需要用小写才能正常；

以下是参考其他博友的一些例子，我搬过来总结集合收藏下：  
一、where查询

var myList = [
       { Name: "Jim" , Age: 20 },
       { Name: "Kate" , Age: 21 },
       { Name: "Lilei" , Age: 18 },
       { Name: "John" , Age: 14 },
       { Name: "LinTao" , Age: 25 }
    ];
    var arrRes = $Enumerable.form(myList).where( "x=>x.Name=='Jim'" ).toArray();

二、排序：OrderBy

三、去重：Distinct

var myList = [
       { Name: "Jim" , Age: 20 },
       { Name: "Kate" , Age: 20 },
       { Name: "Lilei" , Age: 20 },
       { Name: "John" , Age: 14 },
       { Name: "LinTao" , Age: 25 }
    ];
    var arrRes = $Enumerable.from(myList).distinct( "x=>x.Age" ).toArray();

四、遍历：ForEach

\+ES6的ForEach  
forEach() 方法对数组的每个元素执行一次提供的函数,类似于for循环

var array = ['a', 'b', 'c'];
    array.forEach(function(element) {
      console.log(element); //结果a；b；c；
    });

\+ForEach方法中的function回调有三个参数：  
第一个参数是遍历的数组内容，  
第二个参数是对应的数组索引，  
第三个参数是数组本身

var arr = [1,2,3,4];
    var sum =0;
    arr.forEach(function(value,index,array){
    	console.log(value);
    	console.log(index);
    	console.log(array);
        array[index] == value; //结果为true
     	sum+=value; 
     });
    console.log(sum); //结果为 10

五、取唯一对象：First、FirstOrDefault、Last、LastOrDefault、Single、SingleOrDefault

六、跳过Skip、取（切片）Take

$Enumerable.range(1,10).skip(5) //结果[6,7,8,9,10]
    $Enumerable.range(1,10).take(5) //结果[1,2,3,4,5]

七、取交集、取差集、合并Except、Except、Union

var array1 = [1, 412, 5, 3, 5, 412, 7];
    var array2 = [20, 12, 5, 5, 7, 310];
    $Enumerable.from(array1).except(array2)  //结果3,412,1
    
    var array1 = [1, 412, 5, 3, 5, 412, 7];
    var array2 = [20, 12, 5, 5, 7, 310];
    $Enumerable.from(array1).intersect(array2)
    //结果5,7
    
    var array1 = [1, 412, 5, 3, 5, 412, 7];
    var array2 = [20, 12, 5, 5, 7, 310];
    $Enumerable.from(array1).union(array2)
    //结果是两个结果集里面所有值，并自动去重

八、 交叉替换Alternate、包含Contains

$Enumerable.range(1, 5).alternate('*').forEach(function (i) {
     console.log(i + ";"); //;*;2;*;3;*;4;*;
    });
    var r = $Enumerable.range(1, 5).contains(3);
    console.log(r); //ture

九、取最大Max、最小Min、

var max = $Enumerable.range(1, 5).max(); //5
    var min = $Enumerable.range(1, 5).min(); //1
    console.log(max + ";" + min);//5；1

十、分类汇总groupBy

var list=[
      {id:1,name:"lily",gender:0,o:{id:123}},
      {id:2,name:"lucy",gender:0,o:{id:456}},
      {id:3,name:"lilei",gender:1,o:{id:123}},
      {id:4,name:"hanmeimei",gender:0,o:{id:789}}                            
    ];
    $Enumerable.from(list)
    .groupBy(x=>x.o.id)
    .select(x=>({
    	key:x.key(),
    	source:x.getSource()
    }))
    .toArray();