Underscore學習筆記1

時間 2019-11-21

標籤 underscore 學習筆記简体版

原文原文鏈接

項目用了好久underscore.每次都是臨時查手冊,沒有系統的研究過,最近有空正好看看javascript

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

一 Underscore定義java

一個JavaScript實用庫，提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象,它是Backbone重度依賴的js庫.主要涉及對Collection、Object、Array、Function的操做.git

二 _.eachgithub

(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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。