扩展微信小程序框架功能:函数功能增强Underscore.js 、Lodash

Underscore.js 和 Lodash 是最常用的JavaScript库。

Underscore.js 它提供了一整套函数式编程的实用功能提供了100多个函数,包括常用的:map、filter、invoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。

lodash 一开始是 Underscore.js 库的一个 fork,因为和其他(Underscore.js的)贡献者意见相左。John-David Dalton的最初目标,是提供更多“一致的跨浏览器行为……,并改善性能”。之后,该项目在现有成功的基础之上取得了更大的成果。

Underscore.js

Underscore.js是一个 JavaScript 工具库,提供了类似 Prototype 功能的编程支持,但没有对 JavaScript 内置的对象进行扩展。。Underscore.js定义了一个下划线(_)对象,函数库的所有方法都属于这个对象。这些方法大致上可以分成:集合(collection)、数组(array)、函数(function)、对象(object)和工具(utility)五大类。

Underscore.js使用

以一个对象为例:

    var obj = {name: 'dog', age: '3', color: 'white'};

获取对象的所有属性名

    console.log(_.keys(obj)); // 输出:["name", "age", "color"]

获取对象的所有属性值

    console.log(_.values(obj)); // 输出:["dog", 3, "white"]

把一个对象转换成一个 [key, value] 形式的数组

    console.log(_.pairs(obj)); // 输出:[["name", "dog"], ["age", 3], ["color", "white"]]

返回一个对象的副本, 并且里面键和值是对调的(要使之有效, 必须确保object里所有的值都是唯一的且可以序列号成字符串.)

    console.log(_.invert(obj)); // 输出:Object {3: "age", dog: "name", white: "color"}

复制 source 对象的所有属性到 destination 对象上, 然后返回 destination 对象上

    console.log(_.extend({weight: 10}, obj)); // 输出:Object {name: "dog", age: 3, color: "white", weight: 10}

返回一个对象的副本, 过滤掉除了 keys 以外的所有属性(一个或多个)

    console.log(_.pick(obj, 'name', 'color')); // 输出:Object {name: "dog", color: "white"}

返回一个对象的副本, 过滤掉了黑名单里的 keys (keys可以是单个key也可以是包含多个key的数组)

    console.log(_.omit(obj, 'color')); // 输出:Object {name: "dog", age: 3}

Lodash

Lodash是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,其中部分是目前 ECMAScript 尚未制定的规范,但同时被业界所认可的辅助函数。

与Underscore一样,lodash的名字也是源于所有函数前面的那个字符。就像jQuery在全部函数前加全局的$一样,lodash使用全局的_来提供对工具的快速访问。例如,要对数组的所有元素执行某个行为:

    _.each([1, 2], function(n) { console.log(n); });

Lodash 提供的函数主要分为以下几类:

  • Array,适用于数组类型,比如填充数据、查找元素、数组分片等操作
  • Collection,适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作
  • Function,适用于函数类型,比如节流、延迟、缓存、设置钩子等操作
  • Lang,普遍适用于各种类型,常用于执行类型判断和类型转换
  • Math,适用于数值类型,常用于执行数学运算
  • Number,适用于生成随机数,比较数值与数值区间的关系
  • Object,适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作
  • Seq,常用于创建链式调用,提高执行性能(惰性计算)
  • String,适用于字符串类型

lodash的一大亮点在于其模块化:开发者可以按需加载,而非引用整个库。每一个模块都暴露在npm中,所以开发者可以独立地引用它们:

    npm install lodash.map
    var map = require('lodash.map');

Lodash使用

以一个对象数组为例

    var employees = [
        { 'name': 'zhangsan',  'age': 30, salary: 5000 },
        { 'name': 'lisi',    'age': 36, salary: 4000 },
        { 'name': 'wangwu', 'age': 32, salary: 6000 }
    ];

获取所有员工姓名,并以”,“分割

    var names = _.chain(employees)
        .map(function (employee) {            return employee.name;
        })
        .join(",")
        .value();    console.log(names); // 输出:zhangsan,lisi,wangwu

以上代码,首先将employees对象包装成为lodash对象,再map获取所有用户的名称,并最后利用join将用户名称以”,“连接在一起。

获取最年轻的员工

    var o1 = _.chain(employees)
        .sortBy("age")
        .map(function (employee) {            return employee;
        })
        .first()
        .value();    console.log(o1); // 输出:Object {name: "zhangsan", age: 30, salary: 5000}

获取工资最多的员工

    var o2 = _.chain(employees)
        .orderBy("salary", "desc")
        .map(function (employee) {            return employee;
        })
        .first()
        .value();    console.log(o2); // 输出:Object {name: "wangwu", age: 32, salary: 6000}

获取年龄等于36的员工

    var o3 = _.chain(employees)
        .filter(function (employee) {            return employee.age = 36;
        })
        .map(function (employee) {            return employee;
        })
        .first()
        .value();    console.log(o3); // 输出:Object {name: "lisi", age: 36, salary: 4000}

数组到Map的转换

    var hashmap  = _.fromPairs(employees.map(function(employee) {        return [employee.name, employee];
    }));    var o4 = hashmap ["wangwu"];    console.log(o4); // 输出:Object {name: "wangwu", age: 36, salary: 6000}

其他

免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

【小程序源码网资源版权风险说明】:
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 扩展微信小程序框架功能:函数功能增强Underscore.js 、Lodash
嘿,投喂下嘛!