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

原文:http://www.cnblogs.com/landeanfen/p/4672542.html

时间: 2024-10-14 06:33:37

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

玩转JS系列之代码加载篇

从前我们这样写js <script type="text/javascript"> function a(){ console.log('a init');}function b(){ console.log('b init'); a(); } </script> 随着功能越来越多,我们开始把js分离,使用单独的js文件来写,然后使用下面的方式引入js <script src="a.js" type="text/javascr

js获取IP地址的方法小结

s代码获取IP地址的三种方法,在js中取得客户端的IP地址. 原文地址:http://www.jbxue.com/article/11338.html 1,js取得IP地址的方法一 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type="text/<A class="infotextkey" href="http://

上传系列:ajaxupload.js

ajaxupload.js 上次说了jquery.upload.js,这次再说一下ajaxupload.js,这个其实也比较简答,只有一个JS文件: html代码: 1 $(function () { 2 var btnUpload = $('#upload'); 3 new AjaxUpload(btnUpload, { 4 action: '/System/Upload', //上传地址 5 name: 'uploadfile', //文件域名字 6 onSubmit: function (

js 模拟扩展 c# 的 linq 表达式 分享 linq to js

hi :如下是  linq to js  的分享   ,如有雷同 纯属巧合 (function () { Array.prototype.first = function (predicate, def) { var l = this.length; if (!predicate) return l ? this[0] : def == null ? null : def; for (var i = 0; i < l; i++) if (predicate(this[i], i, this))

前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/details/78133622 vue构造.vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念: 关系:vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件.在大型项目中,用过java开发的都知

《Vue系列》timeago.js将时间戳转换成“几天前”“几分钟前”等格式

<Vue系列>timeago.js将时间戳转换成"几天前""几分钟前"等格式 原文地址:https://www.cnblogs.com/zxlb/p/12318275.html

JS杂谈系列-js的认识和js相关技术的了解

其实这篇博客应该是在讲js之前写的,现在算是补上的内容吧,我写的都是自己了解的,可不是凭空捏造,当然很多会记不清,错了及时提出啊!我写的时候也是写有用的,不会写一点子扯淡的玩意,像什么js那年有的,谁写的这些,我们尊重创造者,不过用人家之前先提人家一次拿就是有点愚蠢了! 1.js的认识 只要是做web,大家即使不会用js,也会听说过js,js是松散性的语言,写法不用非常的严格,js包含三部分:dom,bom和ecmascript.dom和bom我们已经介绍过了, dom:http://my.os

Vue.js系列(一):Vue项目创建详解

引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vue项目,以及对项目目录结构的解释说明,使大家清晰的了解Vue项目的开发流程. 简介 Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项

學習 React.js:用 React.js 和 Flux 創建一個簡單的購物車

Creating A Simple Shopping Cart with React.js and Flux Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第四章這也是最後一章!到現在,我們已經學習了怎樣利用 React 的 API 來創建狀態型組件,如何應用它們,以及如何運用臉書的 Flux 架構來工作的 今天我們將把所有的這一切放到一塊,來創建一個簡單的購物車應用.在現在的電商網站上,產品的詳細頁面相互依賴,而 React 有助於簡化並有效的組織它們