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的源码对一些算法也能加深理。使用情况和爱好根据个人爱好来定,不过当我找到这个框架时着实有些震撼。

分享到:

DIY电竞显示器,27/32寸显示器,2k/4k/165Hz/IPS/gsync [推广]

DIY电竞显示器,27/32寸显示器,2k/4k/165Hz/IPS/gsync

对标四大金刚,价格2000人民币左右,感兴趣的私我。 本站自营超高性价比的diy显示器,对标大金刚,小金刚等,一半的价格,完美的体验,M270KCJ-K7B,M270DAN02.6,LM315WR1-SSB1,M270QAN02.3。

相关推荐:

通过引用TypeScript定义来提高你的Javascript开发能力 [智能社]Javascript之Node.JS-经典教程_Node.js从理论到实战下载

版权声明:

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

● 文章内容仅供参考,所涉及的软件以具体使用情况为准!

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

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

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

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

● 本站一贯非常高度重视知识产权保护并遵守各项知识产权法律、法规和具有约束力的规范性文件。重视正版,打击盗版。根据法律、法规和规范性文件要求,本站旨在保护权利人的合法权益的措施和步骤,当权利人发现在本站生成的链接所指向的第三方网页的内容侵犯其合法权益时,权利人应事先向本站发出"权利通知",本站将根据当地法律法规和政府规范性文件采取措施移除相关内容或链接。 

● 访问本站的用户必须明白,本站对提供下载的第三方软件不拥有任何权利,其版权归该资源的合法拥有者所有。

● 本站保证站内提供的所有可下载资源(软件等)都是按“原样”提供,本站未做过任何改动;但本网站不保证本站提供的下载资源的准确性、安全性和完整性;同时本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。不论何种情形我们都不对任何由于使用或无法使用本站提供的信息所造成的直接的、间接的、附带的、特殊的或余波所及的损失、灵失、债务或中断负任何责任﹝不论是可预见或是不可预见的,即使我们巳被告知这种可能性﹞。

● 如遇资源报毒,请参阅:https://masuit.com/misc/14

评论区: