Underscore.js 学习笔记 template for each map reduce find filter 实例

项目用了很久underscore.每次都是临时查手册,没有系统的研究过,最近有空正好看看

github地址:https://github.com/lily1010/underscore_learn

 

一 Underscore定义

一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象,它是Backbone重度依赖的js库.主要涉及对Collection、Object、Array、Function的操作.

 

二 _.each

(1)定位:遍历list中的所有元素,按顺序用遍历输出每个元素,不返回任何值.

(2)标准模式:_.each(list, iteratee, [context]),其中[context]是迭代器的上下文,也就是迭代器中this的指向

(3)如果数据list是数组,iteratee的参数:(element, index, list)

(4)如果数据list是对象,iteratee的参数是(value, key, list)

(5)如果存在原生的forEach方法,Underscore就使用它代替

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>underscore--each函数</title>
        <script src="../js/underscore.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // 遍历数组 (可获取三个参数element, index, list)
            var data = [1,2,3];
            _.each(data,function(element, index, list) { //三个参数都是可选,位置固定,element是数组值,index是值在数组位置,list是整个数组
                document.write(element);    //打印出1 2 3
                document.write(index);        //打印出0 1 2
                document.write(list);        //打印出1,2,3 1,2,3 1,2,3,因为每次遍历都会打印一遍
            });
            
            // 遍历对象 (可获取三个参数 value,key,list)
            var data2 = {
                name1: "lili",
                name2: "manman"
            };
            _.each(data2,function(value,key,list) {   //注意第一个是value,第二个是key,位置固定,但参数可以缺少
                document.write(value);   //打印出lili manman
                document.write(key);    //打印出name1 name2
                document.write(list);  //打印出 [object Object] [object Object] ,因为循环了两边,故打印两遍
            });
        
            // 标准格式  _.each(list, iteratee, [context]) ,其中[context]是迭代器的上下文,也就是迭代器中this的指向
            var obj = {name: "hello"};  
            _.each([1, 2, 3], function (i) { 
              document.write(this.name + ":" + i); 
            }, obj); 
        </script>
    </body>
</html>

三 _.map

(1)定位:通过转换函数(iteratee迭代器)映射列表中的每个值,将返回的值依次存入一个新的数组.

(2)标准模式:_.map(list, iteratee, [context]),其中[context]是迭代器的上下文,也就是迭代器中this的指向.

(3)如果数据list是数组,iteratee的参数:(element, index, list)

(4)如果数据list是对象,iteratee的参数是(value, key, list)

(5)用法同each,但是它返回的是数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>underscore--map函数</title>
        <script src="../js/underscore.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // 遍历数组后生成数组 (可获取三个参数element, index, list)
            var data = [1,2,3];
            _.map(data,function(element, index, list) { //三个参数都是可选,位置固定,element是数组值,index是值在数组位置,list是整个数组
                document.write(element);    //打印出[1,2,3]
                document.write(index);        //打印出0 1 2
                document.write(list);        //打印出1,2,3 1,2,3 1,2,3,因为每次遍历都会打印一遍
            });
            
//            // 遍历对象 (可获取三个参数 value,key,list)
            var data2 = {
                name1: "lili",
                name2: "manman"
            };
            _.map(data2,function(value,key,list) {   //注意第一个是value,第二个是key,位置固定,但参数可以缺少
                document.write(value);   //打印出lili manman
                document.write(key);    //打印出name1 name2
                document.write(list);  //打印出 [object Object] [object Object] ,因为循环了两边,故打印两遍
            });
        
            // 标准格式  _.map(list, iteratee, [context]) ,其中[context]是迭代器的上下文,也就是迭代器中this的指向
            var obj = {name: "hello"};  
            _.each([1, 2, 3], function (i) { 
              document.write(this.name + ":" + i); 
            }, obj); 
        </script>
    </body>
</html>

四 _.reduce

(1)标准模式:reduce_.reduce(list, iterator, memo, [context])

(2)这里不做深入探讨,参数太多,感兴趣的去官网看一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>underscore--reduce函数</title>
        <script src="../js/underscore.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // 遍历数组
            var data = [1,2,3];
            _.reduce(data,function(memo, element, index, list) { //四个参数都是可选,位置固定,memo是设置一个初始值,element是数组值,index是值在数组位置,list是整个数组
                document.write(memo);   //打印出 4 undefined undefined
                document.write(element);    //打印出[1,2,3]
                document.write(index);        //打印出0 1 2
                document.write(list);        //打印出1,2,3 1,2,3 1,2,3,因为每次遍历都会打印一遍
            },4);   //注意4就是参数memo
        </script>
    </body>
</html>

五 _.find函数

(1)标准写法:_.find(list, predicate, [context])

(2)在list中逐项查找,返回第一个通过predicate迭代函数真值检测的元素值.

(3)如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素,函数将立即返回,不会遍历整个list。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>underscore--find方法</title>
        <script src="../js/underscore.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            //_.find
            var data = [1,2,3,4,5,6];
            var aa=_.find(data,function(num) {
                return num % 2 == 0;
            });
            console.log("数据类型是"+typeof aa+";返回值是"+aa);  //打印结果是:数据类型是number;返回值是2
        </script>
    </body>
</html>

六 _.filter函数

(1)标准写法:_.filter(list, predicate, [context])

(2)遍历list中的每个值,返回所有通过predicate真值检测的元素值.

(3)如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素,函数将立即返回,不会遍历整个list。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>underscore--fliter方法</title>
        <script src="../js/underscore.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            //_.filter
            var data2 = [1,2,3,4,5,6];
            var bb=_.filter(data2,function(num) {
                return num % 2 == 0;
            });
            console.log("数据类型是"+typeof bb+";返回值是"+bb); //打印结果是:数据类型是object;返回值是2,4,6
        </script>
    </body>
</html>

 

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr月付$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快注册即送$50点击购买】!

腾讯云爆款1C1G云服务器首年99元

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】

发表评论

电子邮件地址不会被公开。 必填项已用*标注