快捷搜索:  汽车  科技

原生js的介绍(javaScript也可以用linqlinq.js)

原生js的介绍(javaScript也可以用linqlinq.js){ Name: "John" Age: 14 } { Name: "Lilei" Age: 18 }var myList = [ { Name: "Jim" Age: 20 } { Name: "Kate" Age: 21 }

原生js的介绍(javaScript也可以用linqlinq.js)(1)

什么是Linq?

C# 3.0推出了.Net独有的新特性:Linq,语言集成查询 (LINQ) 是一系列直接将查询功能集成到 C# 语言的技术统称,相信使用过Linq的道友也都知道它的方便之处,而Linq.js也能让你在前端体验linq,让你的代码更加的优雅

Linq.js官网

https://archive.codeplex.com/?p=jslinq

引入方式:(可以使用cdn也可以下载到本地)

<script src="https://img.aigexing.comhttps://cdn.bootcss.com/linq.js/2.2.0.2/linq.js"></script>

初体验

var myList = [

{ Name: "Jim" Age: 20 }

{ Name: "Kate" Age: 21 }

{ Name: "Lilei" Age: 18 }

{ Name: "John" Age: 14 }

{ Name: "LinTao" Age: 25 }

];

  • (1)条件查询:Where

var arrRes = Enumerable.From(myList).Where(x=>x.Name=='Jim').ToArray();

arrRes的结果为[{"Name":"Jim" "Age":20}],相当于执行了SQL语句:

select * from myList where Name=’Jim’;

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

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

参数i是对应的集合里面的实体模型,返回类型为bool类型。有没有和C#里面的扩展函数Where的定义很像(不懂C#的到这儿可能会不知所云,那就跳过吧):

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 arrRes = Enumerable.From(myList).Select(x=>x.Age*10).ToArray();

//得到结果:

[200 210 180 140 250] ,

相当于执行了SQL语句:select Age from myList;

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

var arrRes = Enumerable.From(myList).OrderBy(x=>x.Age).ToArray();//降序OrderByDescending()

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

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

Enumerable.From(myList).ForEach(function (value index) {

document.write("值=" value " 索引=" index);

});

很显然两个参数:一个是值,另一个是当前索引,就不上图了。

  • (5)取唯一对象:First、FirstOrDefault、Last、LastOrDefault、Single、SingleOrDefault

//取第一个年龄大于18 的

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这个文件。就是写法不同,效果完全一样,选哪一种就是习惯问题了。

复杂操作
  • 1. 简单的方法链操作

Enumerable.Range(1 10)//产生1-10的10个整数

.Where(i % 3 == 0)//将能被3整除的挑出来

.Select(i * 10)//把挑出来的结果10倍

.ToArray()//将Enumerable对象转换成Array对象

.forEach(function (i) {//遍历数组

document.write(i ";"); //30;60;90;

});

  • 2. 复杂的方法链操作

var jsonArray = [

{ "StuID": 1 "StuName": "James" "Age": 30 "Country": "USA" }

{ "StuID": 2 "StuName": "Byant" "Age": 36 "Country": "USA" }

{ "StuID": 3 "StuName": "Lin" "Age": 30 "Country": "Taiwan" }

{ "StuID": 4 "StuName": "Yao" "Age": 30 "Country": "Shanghai" }

{ "StuID": 5 "StuName": "James" "Age": 30 "Country": "USA" }

{ "StuID": 6 "StuName": "Byant" "Age": 36 "Country": "USA" }

{ "StuID": 7 "StuName": "Lin" "Age": 30 "Country": "Taiwan" }

{ "StuID": 8 "StuName": "zhangsan" "Age": 30 "Country": "China" }

];//又一堆假数据

var querResult = Enumerable.From(jsonArray)

.Where(x.Age <= 30)//筛选

.Distinct(x=>x.StuName)//去重

.OrderBy(x.StuID)//排序

.Skip(0)//跳过0条

.Take(2)//取2条

.Select(x=>{x.StuID x.StuName x.Age x.Country})//投影

.forEach(function (i) {//遍历

document.write(i.StuID ";" i.StuName ";" i.Age ";" i.Country "<br/>");

});

  • 3. Alternate、Contains

Enumerable.Range(1 5).Alternate('*').ForEach(function (i) {

document.write(i ";"); //;*;2;*;3;*;4;*;

});

var r = Enumerable.Range(1 5).Contains(3);

document.write(r); //ture

  • 4. Min、Max

var max = Enumerable.Range(1 5).Max(); //5

var min = Enumerable.Range(1 5).Min(); //1

document.write(max ";" min);//5;1

总结

JavaScript很强大,语言之间相通,也是给道友们多一种选择!

猜您喜欢: