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#用法可以保持一致。
我把网上下载的文档传了一份到博客园上面:linq.js_ver2.2.0.2.rar
JS系列——Linq to js使用小结的更多相关文章
- Node.js系列之node.js初探
官方介绍:Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable n ...
- Ember.js系列文章
JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...
- 几个js的linq实现
几个js的linq实现 linqjs.codeplex.com jslinq.codeplex.com javascriptiqueryable.codeplex.com fromjs.codeple ...
- 【D3.V3.js系列教程】--(十四)有路径的文字
[D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...
- 【D3.V3.js系列教程】--(十二)坐标尺度
[D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- 微信JS分享功能--微信JS系列文章(二)
概述 在上一篇文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的分享功能进行描述,供大家参考. 代码 $(document).ready(f ...
随机推荐
- 留言列表模板HTML代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- MYSQL进阶,新手变司机
一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( S ...
- HTML DOM 教程
HTML DOM DOM 教程 DOM 简介 DOM 节点 DOM 方法 DOM 属性 DOM 访问 DOM 修改 DOM 内容 DOM 元素 DOM 事件 DOM 导航 一,HTML DOM 简介 ...
- arcgis server10.2.2之地理编码服务发布
1.地理编码工具(Geocoding Tools)locator制作 打开arcCatalog,找到工具箱ArcToolbox中的Geocoding Tools---Create Addres ...
- centos 更换软件源
最近都在使用国内的VPS.系统统一使用的都是Linux系统.但是,有一些服务商的系统给默认设置的是国外的.这样就会导致下载速度缓慢.于是,找到了国内几家比较热门的镜像点.奉献给大家.下面的镜像全部支持 ...
- CoreGraphics-线段常见属性及渲染模式介绍
线段常见属性: 1.线宽 2.线头样式 3.接头样式 4.颜色(包括描边颜色和填充颜色) override func draw(_ rect: CGRect) { // 获取图形上下文对象 let c ...
- UITextView回收或关闭键盘
iOS开发中,发现UITextView没有像UITextField中textFieldShouldReturn:这样的方法,那么要实现UITextView关闭键盘,就必须使用其他的方法,下面是可以使用 ...
- Android-正方形的容器
package liu.myrecyleviewchoosephoto.view; import android.content.Context; import android.util.Attrib ...
- android 四大组件之---Service
服务 服务的生命周期 --- 1 开启服务的生命周期 完整的生命周期:onCreate()-->onStartCommand()-->onDestroy() * 开启服务:onCreate ...
- ORACLE Linux以及 Unbreakable Enterprise Kernel
Oracle Linux,全称为Oracle Enterprise Linux,简称OEL,Linux发行版本之一.Oracle公司在2006年初发布第一个版本,以对Oracle软件和硬件支持较好见长 ...