前言:前面几篇介绍了下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#用法可以保持一致。

  我把网上下载的文档传了一份到博客园上面:linq.js_ver2.2.0.2.rar

JS系列——Linq to js使用小结的更多相关文章

  1. Node.js系列之node.js初探

    官方介绍:Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable n ...

  2. Ember.js系列文章

    JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...

  3. 几个js的linq实现

    几个js的linq实现 linqjs.codeplex.com jslinq.codeplex.com javascriptiqueryable.codeplex.com fromjs.codeple ...

  4. 【D3.V3.js系列教程】--(十四)有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

  5. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  6. 【D3.V3.js系列教程】--(十二)坐标尺度

    [D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...

  7. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  8. 微信JS图片上传与下载功能--微信JS系列文章(三)

    概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...

  9. 微信JS分享功能--微信JS系列文章(二)

    概述 在上一篇文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的分享功能进行描述,供大家参考. 代码 $(document).ready(f ...

随机推荐

  1. 使用CSS3制作立体效果的导航菜单

    效果如下: 也可以点击网址查看效果:http://keleyi.com/keleyi/phtml/html5/12.htm 请使用支持CSS3的浏览器访问本页面,获得更好效果. 源代码: <st ...

  2. 3D Banner(jQuery)

    1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer: 2.将代码黏贴成html文件,直接用浏览器打开即可: 3.layer属于弹窗提示类插件,可能需要 ...

  3. iOS如何用代码控制以不同屏幕方向打开新页面?

    转载:http://blogread.cn/it/article/7765?f=wb#original 代码示例:https://github.com/johnlui/Swift-On-iOS/tre ...

  4. mysql时间加减函数

    先来看一个例子: select now(),now()+0; 可以看到now()函数可以返回一个时间也可以返回一个数字,就看大家如何使用.如果相对当前时间进行增加或减少,并不能直接加上或减去一个数字而 ...

  5. SharePoint 2013 Designer系列之数据视图

    在SharePoint使用中,数据展示是一块很重要的部分,很多时候我们会采用webpart的形式,但是有一些情况,我们不必使用开发,仅需使用Designer即可,下面让我简单介绍下数据视图的使用. 1 ...

  6. 协调者布局:CoordinatorLayout

    layout_scrollFlag属性: scroll:需要哪个View滚动就需要设置该属性: exitUntilCollapsed:向上推动屏幕的时候滑动的部分折叠起来,只有下滑到最低端的时候折叠部 ...

  7. AFNetWorking https请求 SSL认证 自制证书

    1.服务器会给一个证书,一般为.pem格式证书 2.将.pem格式的证书转换成.cer格式的证书 打开电脑自带终端 ,进入到桌面  cd Desktop 回车回到桌面Desktop Admin$ 输入 ...

  8. out

    //练习1 class Program { static void Main(string[] args) { //写一个方法 求一个数组中的最大值.最小值.总和.平均值 int[] numbers ...

  9. [翻译]当分发数据库增长到25G时如何解决

    有时候,分发数据库(Distribution Database)会增长得非常大,那么如何解决呢,请看Chris Skorlinski,  Microsoft SQL Server Escalation ...

  10. fetch_20newsgroups 数据集导入失败: no handlers could be fetch_20newsgroups

    最简单的办法 下载'20news-bydate.pkz', 放到C:\\Users\[Current user]\scikit_learn_data 下边就行. 实际上 scikit learning ...