• Javascript神器:Linq To Js使用小结


    发现一js神器,写法与C# Linq类似,对于查询、计算、选择对象非常方便。官网下载的linq.js文件,不知为什么方法名的第一个字母改成小写了,而示例和网上的资料都是大写。

    官网方法集合:http://neue.cc/reference.htm

    经过一番研究,示例代码如下:

    JSON代码:

    var json=[{
        "ProId": 1,
        "ProName": "笔记本",
        "Price": 58,
        "Count": 11
    }, {
        "ProId": 2,
        "ProName": "望远镜",
        "Price": 96,
        "Count": 19
    }, {
        "ProId": 3,
        "ProName": "铅笔盒",
        "Price": 10,
        "Count": 12
    }, {
        "ProId": 4,
        "ProName": "辅导书",
        "Price": 85,
        "Count": 15
    }];

    Vue代码如下:

    <script type="text/javascript">
         new Vue({
            el: "#prolist",
            data: {
                list:null
            },
            created:function() {
                axios.get("@Url.Action("ProList")")
                .then(m=> {
                    var l = Enumerable.from(m.data).where(function (e) { return e.ProId > 1 })
                        .orderByDescending(function (e) { return e.Price })
                        .toArray();
                    this.list = l
                    console.log(Enumerable.from(l)
                        .select(function (e) { return e.Count })
                        .sum(function (e) { return e }));
                });
            },
            computed: {
                totalCount: function () {
                    return Enumerable.from(this.list)
                        //.select(function (e) { return e.Count })
                        .sum(function (e) {return e.Count });
                },
                totalPrice: function () {
                    return Enumerable.from(this.list)
                        //.select(function (e) { return e.Count })
                        .sum(function (e) { return e.Count * e.Price });
                }
            },
            methods: {
                ListAdd: function () {
    
                }
            }
         });
    </script>

    以下转自其他博客:

    优点

          1、支持jQuery插件的方式。jquery.linq.min.js。

          2、也可以像普通js方法一样使用。linq.min.js。

          3、当然用习惯VS的童鞋肯定希望有个良好的智能感知,是的,它支持。

          4、和C# Linq有很相似的地方,这个就会让你上手起来更快,更让我欢喜的是在linq.js的一些方法中,你可以像写Lambda表达式一样去写过滤条件,而且在过滤字符串中支持$符号【下面上图】。

    Linq.js结构图

    体验一:查询json对象

    function TestQueryObjects() {
                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" }
                ];
     
                var querResult = $.Enumerable.From(jsonArray)
                    .Where(function (x) { return x.Age <= 30; })
                    .OrderBy(function (x) { return x.StuID; })
                    .ToArray()
                    .forEach(function (i) {
                        document.write(i.StuID + ";" + i.StuName + ";" + i.Age + ";" + i.Country + "<br/>");
                    });
     
                document.write("====================================" + "<br/>");
     
                 
                var queryResult2 = $.Enumerable.From(jsonArray)
                    .Where("$.Age<=30") //这个操作很牛气
                    .OrderBy("$.StuID")
                    .ToArray()
                    .forEach(function (i) {
                        document.write(i.StuID + ";" + i.StuName + ";" + i.Age + ";" + i.Country + "<br/>");
                    });
            }

    上下两个queryResult会得出一样的结果

    体验二:Lambda怎么来,Linq.js就怎么来

    function TestWithLinq() {             // C# Linq
                //Enumerable.Range(1, 10)
                //.Where(delegate(int i) { return i % 3 == 0; })
                //.Select(delegate(int i) { return i * 10; });
                 
                Enumerable.Range(1, 10)
                    .Where(function (i) { return i % 3 == 0; })
                    .Select(function (i) { return i * 10; })
                    .ToArray()
                    .forEach(function (i) {
                    document.write(i + ";"); //30;60;90;
                });

    体验三:去重

    function TestDistinct() {
                var arr = [100, 200, 30, 40, 500,200, 40];
                Enumerable.From(arr)
                    .Distinct()
                    .ToArray()
                    .forEach(function(i) {
                        document.write(i + ";"); //100;200;30;40;500;
                    });
                }

    体验四:交集、差集、并集

    function TestIntersectExcept() {
                var arr1 = [1, 412, 53, 25];
                var arr2 = [53, 25,22,20];
     
                Enumerable.From(arr1).Intersect(arr2).ForEach(function(i) {
                    document.write(i + ";"); //53,25
                });
     
                Enumerable.From(arr1).Except(arr2).ForEach(function (i) {
                    document.write(i + ";"); // 1;412
                });
     
                Enumerable.From(arr1).Union(arr2).ForEach(function (i) {
                    document.write(i + ";"); // 1;412;53;25;22;20;
                });
            }

    体验五:Alternate、Contains

    function TestAlternate() {
                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
            }

    体验六:Min、Max

    function TestMaxMin() {
                var max = Enumerable.Range(1, 5).Max(); //5
                var min = Enumerable.Range(1, 5).Min(); //1
                document.write(max+";"+min);
     
            }

    总结

          能用到这些js的地方有些功能在后台也可以实现,但是我个人更喜欢js的方式,所以就用了上面几个方法,另外看看linq.js的源码对一些算法也能加深理。使用情况和爱好根据个人爱好来定,不过当我找到这个框架时着实有些震撼。

          github地址:http://linqjs.codeplex.com/

          官方给出 的API和Demo也能很简单:http://neue.cc/reference.htm

  • 相关阅读:
    MVC简介
    Scrapy中的item是什么
    Git删除文件操作
    vi编辑文件出现Can't open file for writing错误
    CentOs安装Scrapy出现error: Setup script exited with error: command ‘gcc’ failed with exit status 1错误解决方案
    Python脚本运行出现语法错误:IndentationError: unindent does not match any outer indentation level
    激活MyEclipse 6.5方法-通过一段Java程序生成激活码
    oninput,onpropertychange,onchange的用法和区别【转载】
    Myeclipse6.5项目启动时由于数据库连接失败的错误日志
    IE和Firefox的Javascript兼容性总结
  • 原文地址:https://www.cnblogs.com/superfeeling/p/12318738.html
Copyright © 2020-2023  润新知