項目用了很久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>