Vue使用linqjs 数据处理新体验,json数据处理-uniapp使用
前言对json数据处理的方式很多,新的ES6789新增的许多处理方式,这里推荐下linqjs的数据处理,更多的是查询;linq原是.net、C#的数据查询之类的,后有了linq.js的js处理使用,话不多说,上例子:
下载引入使用(HX限制,只有下载引入linq.min.js使用)
下载网址:jslinq.codeplex.com/ linq参考:GitHub - mihaifm/linq: linq.js - LINQ for JavaScript: github.com/mihaifm/lin… 详细例子: linq/tutorial.js at master · mihaifm/linq · GitHub github.com/mihaifm/lin…
具体使用(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
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).orderBy( "x=>x.Age" ).toArry(); //升序
var arrRes2 = $Enumerable.form(myList).orderByDescending( "x=>x.Age" ).toArray(); //降序
三、去重: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
var myList = [
{ Name: "Jim" , Age: 20 },
{ Name: "Kate" , Age: 20 },
{ Name: "Lilei" , Age: 20 },
{ Name: "John" , Age: 14 },
{ Name: "LinTao" , Age: 25 }
];
$Enumerable.from(myList).foreach( function (value, index){
console.log( "值=" +value+ ",索引=" +index);
});
+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
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).firstOrDefault( "x=>x.Age>18" );
六、跳过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();