1. 首页
  2. 文章列表
  3. 自从用了linqjs,再也不用担心操作json集合啦

引言

前几天做博客项目的时候,想用ajax实现一个文章评论的无限递归加载效果,针对一个从后端返回的json数据数据,首先想到的是递归遍历,但是js的递归写法开始着实让我头晕,所以在寻思有没有更好的解决方案可以实现这个递归加载,不料一个天真的想法出现在脑海里:C#有Lambda表达式,js也有Lambda表达式,那js会不会有像C#那样操作数据集的linq写法,或者js有没有像C#里面的Enumerable这样的数据结构,经过了搜索引擎的验证以后,卧槽,js还真有这样的东东,这下爽了,可以在js里面用linq了——linq.js类库,果然真是高手在民间啊,再也不用担心js操作复杂的json数组了。

Linq.js官方的介绍中说支持90多个方法,我觉的起码是C# Linq有的方法它肯定有。

什么是Linq.js?

C# 3.0推出了.Net独有的新特性:Linq。自从有了Linq,前端工程师再也不用担心对集合的操作了。同理,Linq to js 当然也就是对前端集合变量进行操作的一种技术框架。

哟,C#开发者这下肯定爽坏了,那java、php、Python是不是没戏?错!这跟你用什么语言没什么关系,只要你会敲js代码就好。跟着下面的节奏,一起来体验linq吧!

Linq.js官网

因为是前端框架,所以你懂得,只需要引用一个js文件即可。官网上面有文件和Demo,可以上去看看。

使用方式主要有两种:

使用方法一、直接引用js文件;

使用方法二、使用Nuget安装Linq to js。或在PM安装控制台中输入Install-Package jslinq。

使用方法三、CDN引入:

<script src="https://cdn.bootcss.com/linq.js/2.2.0.2/linq.js"></script>

本篇以Linq to js的lamada表达式写法的方式来以此介绍常用方法。

Linq.js初体验

首先来构造一堆的假数据:

var myList = [
 { Name: "Jim", Age: 20 },
 { Name: "Kate", Age: 21 },
 { Name: "Lilei", Age: 18 },
 { Name: "John", Age: 14 },
 { Name: "LinTao", Age: 25 }
];

(1)条件查询:Where

var arrRes = Enumerable.From(myList).Where(x=>x.Name=='Jim').ToArray();

arrRes的结果为[{"Name":"Jim","Age":20}],相当于执行了SQL语句:select * from myList where Name=’Jim’;

我们来看看这种写Lamada表达式的原型:

var arrRes = Enumerable.From(myList).Where(function (i) { return i.Name == 'Jim'; });

参数i是对应的集合里面的实体模型,返回类型为bool类型。有没有和C#里面的扩展函数Where的定义很像(不懂C#的到这儿可能会不知所云,那就跳过吧):

public static IEnumerable<TSource> Where<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate);

参数Func<TSource, bool> predicate为匿名委托,需要传入实体模型TSource,然后返回值为bool类型。其实感觉linq to js的使用就是参照c#里面的定义来的。

(2)条件选择:Select

var arrRes = Enumerable.From(myList).Select(x=>x.Age*10).ToArray();

arrRes得到结果[200,210,180,140,250] ,相当于执行了SQL语句:select Age from myList;

(3)排序、去重:OrderBy、Distinct

var arrRes = Enumerable.From(myList).OrderBy(x=>x.Age).ToArray();//降序OrderByDescending()

得到的结果会按照Age排序。

var arrRes = Enumerable.From(myList).Distinct(x=>x.Age).ToArray();

得到的结果集合的数量为3个:[ { Name: "Jim", Age: 20 }, { Name: "John", Age: 14 }, { Name: "LinTao", Age: 25 }]。

(4)遍历:ForEach

Enumerable.From(myList).ForEach(function (value, index) {
 document.write("值=" + value + ",索引=" + index);
});

很显然两个参数:一个是值,另一个是当前索引,就不上图了。

(5)取唯一对象:First、FirstOrDefault、Last、LastOrDefault、Single、SingleOrDefault

var arrRes = Enumerable.From(myList).FirstOrDefault(x=>x.Age>18);//取第一个年龄大于18

其他几个用法和这个类似。这个没什么好说的。关于方法名带default的,下面给出了详细说明:

操作符

如果源序列是空的

源序列只包含一个元素

源序列包含多个元素

First

抛异常

返回该元素

返回第一个元素

FirstOrDefault

返回default(TSource)

返回该元素

返回第一个元素

Last

抛异常

返回该元素

返回最后一个元素

LastOrDefault

返回default(TSource)

返回该元素

返回最后一个元素

Single

抛异常

返回该元素

抛异常

SingleOrDefault

返回default(TSource)

返回该元素

抛异常

(6)Skip、Take

Enumerable.Range(1, 10).Skip(5)//结果[6,7,8,9,10]
Enumerable.Range(1, 10).Take(5)//结果[1,2,3,4,5]

(7)取交集、取差集、合并

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)
//结果是两个结果集里面所有值,并自动去重

当然还有其他一些不常用的方法。有兴趣可以查看文档。其实linq to js还有一种支持jquery的写法。如下:

Enumerable.Range(1, 10).Where($%2==0)
//等价于
Enumerable.Range(1, 10).Where(x=>x%2==0)

但引用文件的时候需要引用jquery.linq.js这个文件。就是写法不同,效果完全一样,选哪一种就是习惯问题了。博主更加倾向lamada方式的写法,因为和C#用法可以保持一致。

Linq.js的复杂操作

1. 简单的方法链操作

Enumerable.Range(1, 10)//产生1-10的10个整数
 .Where(i % 3 == 0)//将能被3整除的挑出来
 .Select(i * 10)//把挑出来的结果10倍
 .ToArray()//将Enumerable对象转换成Array对象
 .forEach(function (i) {//遍历数组
 document.write(i + ";"); //30;60;90;
 });

2. 复杂的方法链操作

var jsonArray = [
 { "StuID": 1, "StuName": "James", "Age": 30, "Country": "USA" },
 { "StuID": 2, "StuName": "Byant", "Age": 36, "Country": "USA" },
 { "StuID": 3, "StuName": "Lin", "Age": 30, "Country": "Taiwan" },
 { "StuID": 4, "StuName": "Yao", "Age": 30, "Country": "Shanghai" },
 { "StuID": 5, "StuName": "James", "Age": 30, "Country": "USA" },
 { "StuID": 6, "StuName": "Byant", "Age": 36, "Country": "USA" },
 { "StuID": 7, "StuName": "Lin", "Age": 30, "Country": "Taiwan" },
 { "StuID": 8, "StuName": "zhangsan", "Age": 30, "Country": "China" },
];//又一堆假数据
var querResult = Enumerable.From(jsonArray)
 .Where(x.Age <= 30)//筛选
 .Distinct(x=>x.StuName)//去重
 .OrderBy(x.StuID)//排序
 .Skip(0)//跳过0条
 .Take(2)//取2条
 .Select(x=>{x.StuID,x.StuName,x.Age,x.Country})//投影
 .forEach(function (i) {//遍历
 document.write(i.StuID + ";" + i.StuName + ";" + i.Age + ";" + i.Country + "<br/>");
 });

3. Alternate、Contains

Enumerable.Range(1, 5).Alternate('*').ForEach(function (i) {
 document.write(i + ";"); //;*;2;*;3;*;4;*;
});
var r = Enumerable.Range(1, 5).Contains(3);
document.write(r); //ture

4. Min、Max

var max = Enumerable.Range(1, 5).Max(); //5
var min = Enumerable.Range(1, 5).Min(); //1
document.write(max + ";" + min);//5;1

总结

能用到这些js的地方有些功能在后台也可以实现,但是我个人更喜欢js的方式,所以就用了上面几个方法,另外看看linq.js的源码对一些算法也能加深理。使用情况和爱好根据个人爱好来定,不过当我找到这个框架时着实有些震撼。

分享到:

下载为Word文档

版权声明:

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。本文链接:https://masuit.com/30

l  博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。

l  文章内容部分来源于互联网,不代表本人的任何立场;涉及到的软件来源于互联网,仅供个人下载使用,请勿用于商业用途,版权归软件开发者所有,下载后请于24小时内删除,如有真实需要请支持正版!因下载本站任何资源造成的损失,全部责任由使用者本人承担!如果你是版权方,认为本文内容对您的权益有所侵犯,请联系博主,并参照侵删联系的说明提交相应的证明材料,待博主进行严格地审查和背景调查后,情况属实的将在三天内将本文删除或修正。

l  博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。

l  博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的纯镀 24k 文章,请原谅博主成为一个无耻的文档搬运工!

l  博主只是一名普通的互联网从业者,不懂修电脑,不会卖电脑,不会帮你盗号,不会破解开机密码,找不回你丢失的手机等,如有这样的想法请绕道!

相关推荐:

angular表格神器ng-table的服务端分页的解决方案 web前端杂谈:传统的 Ajax 已死,Fetch得永生!
Chrome 开发者控制台中,你可能意想不到的功能 又一前端神级类库——lodash.js工具库
在angularjs中集成SignalR即时通信框架 大前端的未来可能代替ajax的东西——Fetch API初体验
ECMAScript 2017(ES8)新特性尝鲜 web前端知识体系大全
通过引用TypeScript定义来提高你的Javascript开发能力 解决代码着色组件SyntaxHighlighter长代码不换行以及行号显示错位的问题

评论区: