zoukankan      html  css  js  c++  java
  • Underscore.js使用

    Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?” 他弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分。

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

    Underscore使用_作为别名。

    示例

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="./underscore/underscore.js" charset="utf-8"></script>
    </head>
    
    <body>
      <script type="text/javascript">
        var obj = {one: 1, two: 2, three: 3};
        var key = _.keys(obj);
        var val = _.values(obj);
        console.log(key);
        console.log(val);
    
      </script>
    </body>
    

    建议使用Console调试。

    常用方法

    _.keys(object)

    获取object对象所有的属性名称。取键名。

    _.keys({one: 1, two: 2, three: 3});
    => ["one", "two", "three"]
    

    _.values(object)

    返回object对象所有的属性值。取键值。

    _.values({one: 1, two: 2, three: 3});
    => [1, 2, 3]
    

    _.pairs(object)

    把一个对象转变为一个[key, value]形式的数组。

    _.pairs({one: 1, two: 2, three: 3});
    => [["one", 1], ["two", 2], ["three", 3]]
    

    _.invert(object)

    返回一个object副本,使其键(keys)和值(values)对换。对于这个操作,必须确保object里所有的值都是唯一的且可以序列号成字符串.

    _.invert({Moe: "Moses", Larry: "Louis", Curly: "Jerome"});
    => {Moses: "Moe", Louis: "Larry", Jerome: "Curly"};
    

    _.functions(object)

    别名: methods
    返回一个对象里所有的方法名, 而且是已经排序的 — 也就是说, 对象里每个方法(属性值是一个函数)的名称.

    _.functions(_);
    => ["all", "any", "bind", "bindAll", "clone", "compact", "compose"
    

    _.extend(destination, *sources)

    复制对象值。复制source对象中的所有属性覆盖到destination对象上,并且返回 destination 对象. 复制是按顺序的, 所以后面的对象属性会把前面的对象属性覆盖掉(如果有重复).

    _.extend({name: 'moe'}, {age: 50});
    => {name: 'moe', age: 50}
    

    _.pick(object, *keys)

    返回一个object副本,只过滤出keys(有效的键组成的数组)参数指定的属性值。或者接受一个判断函数,指定挑选哪个key。

    _.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age');
    => {name: 'moe', age: 50}
    _.pick({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
      return _.isNumber(value);
    });
    => {age: 50}
    

    _.omit(object, *keys)

    与pick作用相反。返回一个object副本,只保留非keys(有效的键组成的数组)参数指定的属性值。 或者接受一个判断函数,指定忽略哪个key。

    _.omit({name: 'moe', age: 50, userid: 'moe1'}, 'userid');
    => {name: 'moe', age: 50}
    _.omit({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
      return _.isNumber(value);
    });
    => {name: 'moe', userid: 'moe1'}
    

    _.each(list, iteratee, [context])

    别名: forEach

    遍历list中的所有元素,按顺序用遍历输出每个元素。如果传递了context参数,则把iteratee绑定到context对象上。每次调用iteratee都会传递三个参数:(element, index, list)。如果list是个JavaScript对象,iteratee的参数是 (value, key, list))。返回list以方便链式调用。(注:如果存在原生的forEach方法,Underscore就使用它代替。)

    示例1.遍历数组:

    var list = [1,2,3,4];   
    list.forEach(function(v, k , obj){
        document.write(k + ',' + v + ',[' + obj.toString() + ']<br>');
    });
    

    结果:

    0,1,[1,2,3,4]
    1,2,[1,2,3,4]
    2,3,[1,2,3,4]
    3,4,[1,2,3,4]
    

    示例2:遍历字符串

    var list = 'hello world';
    _.each(list, function(value, index, obj) {
        document.write(value + ',' + index + ',[' + obj.toString() + ']<br>');
    });
    document.write(list.toString());
    

    输出:

    h,0,[hello world]
    e,1,[hello world]
    l,2,[hello world]
    l,3,[hello world]
    o,4,[hello world]
    ,5,[hello world]
    w,6,[hello world]
    o,7,[hello world]
    r,8,[hello world]
    l,9,[hello world]
    d,10,[hello world]
    hello world
    

    _.find(list, predicate, [context])

    别名: detect

    在list中逐项查找,返回第一个通过predicate迭代函数真值检测的元素值,如果没有值传递给测试迭代器将返回undefined。
    注意:如果找到匹配的元素,函数将立即返回,不会遍历整个list。

    var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
    => 2
    

    _.filter(list, predicate, [context])

    别名: select

    遍历list中的每个值,返回包含所有通过predicate真值检测的元素值。(注:如果存在原生filter方法,则用原生的filter方法。)
    与_.find类似,但会遍历所有匹配元素。

    var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
    => [2, 4, 6]
    

    map_.map(list, iteratee, [context])

    别名: collect

    通过变换函数(iteratee迭代器)把list中的每个值映射到一个新的数组中(注:产生一个新的数组)。如果存在原生的map方法,就用原生map方法来代替。如果list是个JavaScript对象,iteratee的参数是(value, key, list)。

    _.map([1, 2, 3], function(num){ return num * 3; });
    => [3, 6, 9]
    _.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
    => [3, 6, 9]
    

    _.reduce(list, iteratee, [memo], [context])

    别名为 inject 和 foldl, reduce方法把list中元素归结为一个单独的数值。Memo是reduce函数的初始值,reduce的每一步都需要由iteratee返回。这个迭代传递4个参数:memo, value 和 迭代的index(或者 key)和最后一个引用的整个 list。

    如果没有memo传递给reduce的初始调用,iteratee不会被列表中的第一个元素调用。第一个元素将取代 传递给列表中下一个元素调用iteratee的memo参数,

    var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 100);
    => 106
    

    _.some(list, [iterator], [context])

    别名: any

    如果任何 list 里的任何一个元素通过了 iterator 的测试, 将返回 true. 一旦找到了符合条件的元素, 就直接中断对list的遍历. 如果存在, 将会使用原生的 some 方法.

    _.some([2, 5, 8, 1, 4],function(v,k,obj){return v>5;})
    => true
    

    _.all(list, [iterator], [context])

    别名: all

    与some类似。如果所有在 list 里的元素通过了 iterator 的测试, 返回 true. 如果存在则使用原生的 every 方法.

    _.all([2, 5, 8, 1, 4],function(v,k,obj){return v>5;})
    => false
    
    注*目前现代浏览器已经支持each, filter, map, reduce方法,但underscore库可以实现对旧版IE的兼容。下面是使用ES5原生方法写的例子:
    
        [3,4,5,3,3].forEach(function(obj){
        console.log(obj);
    });
    
    [1,2,3,4,5].filter(function(obj){
        return obj < 3
    });
    
    [9,8,5,2,3,4,5].map(function(obj){
        return obj + 2;
    });
    
    [1,2,3,4,5].reduce(function(pre, cur, idx, arr) {
        console.log(idx);    //4 个循环: 2-5
        return pre + cur;
    });   //15
    
    //sort方法同样很有用
    [9,8,5,2,3,4,5].sort(function(obj1, obj2){
        return obj1 - obj2;
    });
    

    更多阅读:
    Underscore.js

    underscore API文档
    http://www.bootcss.com/p/underscore/

  • 相关阅读:
    PCB设计流程
    第一次PCB画板实战MiniDVPart1/3
    程序人生
    MCU死掉了
    一花一世界,一码一人生,谓之程序人生
    神船·神舟
    程序猿的选择
    android得到strings.xml文件中的内容
    Android特效 五种Toast详解
    Java字符串转换为日期和时间比较大小
  • 原文地址:https://www.cnblogs.com/52fhy/p/4823377.html
Copyright © 2011-2022 走看看