前言:前面几篇介绍了下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. 关于在线编辑器的选择:tinymce - nilcms

    一开始使用的是百度开发的编辑器:ueditor.使用方便,很容易就部署了.现在发现此编辑器也就做一些安全性的更新,而且对于这个编辑器也越来越不喜欢了. 1.臃肿.[1.4.3.3 PHP 版本].下载 ...

  2. 关于float和margin

    1.同级存在浮动,如mid的前面left浮动(mid不浮动),margin则相对于父元素,mid的margin-left不是相对于left,而是相对于con(可以想象,如果left不浮动,则mid和l ...

  3. 使用gulp+browser-sync搭建前端项目自动化以及自动刷新

    前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs. ...

  4. mvc view 中 js 不反应

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JavaScript函数的4种调用方法详解

    在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造 ...

  6. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q99-Q101)

    Question  99 You have designed a new SharePoint 2010 Web Part that was deployed to the testing envir ...

  7. ButterKnife基本使用

    ButterKnife基本使用 Butter Knife处理字段和方法绑定.   重要更新: 目前(2016.4.29), ButterKnife的最新版本是8.0.1. Demo项目已更新: htt ...

  8. 浅谈html5 响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...

  9. 【代码笔记】iOS-获取字符串的宽度,高度

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  10. windows server2012 R2 本地策略编辑

    进入本地策略编辑器: 1.win + R 2.输入命令行:gpedit.msc 密码期限设置: 1.windows设置 2.安全设置 3.账户策略 4.密码策略 5.密码最长使用期限 赋值 0 交互登 ...