JS系列——Linq to js使用小结

简介:

前言:前面几篇介绍了下C#基础技术中的几个:反射特性泛型序列化扩展方法Linq to Xml等,本来还有两三个知识点没有写完,比如委托、多线程、异步等,后面会陆续将它们补起来,以便作为一套完整的系列。之所以有这篇是因为目前BS项目中前端经常需要对Json的数组对象进行筛选、查找、判断是否存在等操作。这时就想到了好用的Linq。博主几年前用过Linq to js,那个时候还觉得那样写很别扭,于是没有重视。现在随着前段业务的越来越复杂,对前端的数据处理要求也越来越高,使用一种快捷的集合操作方式就变得越来越必要。今天正好趁系统升级Win 10,所以在此做个小结,以后也可以留着当文档使用。O(∩_∩)O~

 

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

 

2、怎么使用:因为是前端框架,所以你懂得,只需要引用一个js文件即可。这里还是附上官网地址:http://jslinq.codeplex.com/.这上面有文件和Demo,可以上去看看。使用方式主要有两种:使用方法一、直接引用js文件;使用方法二、使用Nuget Package 安装Linq to js。在PM安装控制台中输入Install-Package jslinq。

本篇以Linq to js的lamada表达式写法的方式来以此介绍常用方法。我们从官网上面下载下载的文件如下图

我们只需要引用linq.js文件即可。

(1)条件查询: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.From(myList).Where("x=>x.Name=='Jim'").ToArray();
复制代码

arrRes的结果为 [{"Name":"Jim","Age":20}]

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

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

参数i是对应的集合里面的实体模型,返回类型为bool类型。有没有和C#里面的扩展函数Where的定义很像: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 myList = [
            { Name: "Jim", Age: 20 },
            { Name: "Kate", Age: 21 },
            { Name: "Lilei", Age: 18 },
            { Name: "John", Age: 14 },
            { Name: "LinTao", Age: 25 }
    ];
    var arrRes = Enumerable.From(myList).Select("x=>x.Age*10").ToArray();
复制代码

arrRes得到结果 [200,210,180,140,250]

 

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

复制代码
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.From(myList).OrderBy("x=>x.Age").ToArray();//降序OrderByDescending()
复制代码

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

复制代码
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();
复制代码

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

 

(4)遍历: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){
         document.write("值="+value+",索引="+index);   
 });
复制代码

很显然两个参数:一个是值,另一个是当前索引

 

(5)取唯一对象: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");
复制代码

其他几个用法和这个类似。这个没什么好说的。

 

(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#用法可以保持一致。







本文转自懒得安分博客园博客,原文链接:http://www.cnblogs.com/landeanfen/p/4672542.html,如需转载请自行联系原作者

目录
相关文章
|
JavaScript
【JS篇】JS基础要件
【JS篇】JS基础要件
68 0
|
4月前
|
JavaScript 安全 前端开发
JS神奇的或0(|0)
可以看到明显的带或0运算与不带或0运算的结果无论是位数还是符号位都有不同。 那这中间到底发生了什么? 这里找一个数字为例:117063531626496 要想验证这个问题,思路如下: 1,对比变更前后的数字的二进制格式 2,找到是否有数字表示的安全边界 首先按照思路1,我们看一下这个数字和这个数字或0后的二进制格式分别是什么:
|
4月前
|
JavaScript 前端开发
什么是js
什么是js
176 4
|
4月前
|
XML JavaScript 前端开发
JS是什么
JS是什么
75 0
|
5月前
|
JavaScript 前端开发 Go
octokit.js
octokit.js
42 1
|
11月前
|
移动开发 JavaScript 前端开发
什么是js? js的特点是什么?
什么是js? js的特点是什么?
78 0
|
11月前
|
JavaScript 前端开发
什么是js?js的用法?
什么是js?js的用法?
|
JavaScript
js超实用的小技巧(1)
js超实用的小技巧(1)
|
JavaScript 前端开发 算法
JS之BigNumber.js 讲解
JS之BigNumber.js 讲解
1182 0
JS之BigNumber.js 讲解
|
JSON 缓存 JavaScript
JS之12个小技巧
JS之12个小技巧
105 0
JS之12个小技巧