lodash學習資料

時間 2019-12-15

標籤 lodash 學習資料简体版

原文原文鏈接

2、Lodash

Lodash是一個具備一致接口、模塊化、高性能等特性的 JavaScript 工具庫。它內部封裝了諸多對字符串、數組、對象等常見數據類型的處理函數，其中部分是目前 ECMAScript 還沒有制定的規範，但同時被業界所承認的輔助函數。目前天天使用 npm 安裝 Lodash 的數量在百萬級以上，這在必定程度上證實了其代碼的健壯性，值得咱們在項目中一試。javascript

官網：https://lodash.com/css

中文文檔：http://www.css88.com/doc/lodash/html

英文幫助：https://lodash.com/docs/前端

GitHub：https://github.com/lodash/vue

2.一、下載

CDN引用地址：https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.jsjava

2.二、安裝

瀏覽器:webpack

<script src="lodash.js"></script>
//或CDN
<script scr="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

用npm:git

$ npm i -g npm
$ npm i --save lodash

Nodejs:github

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');

// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');

// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

2.三、模塊組成

Lodash 提供的輔助函數主要分爲如下幾類，函數列表和用法實例請查看 Lodash 的官方文檔：web

Array，適用於數組類型，好比填充數據、查找元素、數組分片等操做

Collection，適用於數組和對象類型，部分適用於字符串，好比分組、查找、過濾等操做

Function，適用於函數類型，好比節流、延遲、緩存、設置鉤子等操做

Lang，廣泛適用於各類類型，經常使用於執行類型判斷和類型轉換

Math，適用於數值類型，經常使用於執行數學運算

Number，適用於生成隨機數，比較數值與數值區間的關係

Object，適用於對象類型，經常使用於對象的建立、擴展、類型轉換、檢索、集合等操做

Seq，經常使用於建立鏈式調用，提升執行性能（惰性計算）

String，適用於字符串類型

lodash/fp 模塊提供了更接近函數式編程的開發方式，其內部的函數通過包裝，具備immutable、auto-curried、iteratee-first、data-last（官方介紹）等特色

2.四、Lodash快速入門實例

2.4.1. N 次循環

// 1. Basic for loop.
for(var i = 0; i < 5; i++) {
// ...
}

// 2. Using Array's join and split methods
Array.apply(null, Array(5)).forEach(function(){
// ...
});

// Lodash
_.times(5, function(){
// ...
});

for 語句是執行循環的不二選擇，Array.apply 也能夠模擬循環，但在上面代碼的使用場景下，_.times() 的解決方式更加簡潔和易於理解。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Lodash</title>
    </head>

    <body>
        <div id="vm">

        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    msg: ""
                },
                methods: {

                }
            });

            var log = function(str) {
                console.log(str);
            }

            log(_.times(5));
            log(_.times(5, String));
            log(_.times(5, _.constant(0)));
            log(_.times(5, _.constant(true)));
            var a5=_.times(5, function(v) {
                return v+10;
            })
            log(a5);
        </script>
    </body>

</html>

結果：

2.4.2. 深層查找屬性值

// Fetch the name of the first pet from each owner
var ownerArr = [{
"owner": "Colin",
"pets": [{"name":"dog1"}, {"name": "dog2"}]
}, {
"owner": "John",
"pets": [{"name":"dog3"}, {"name": "dog4"}]
}];

// Array's map method.
ownerArr.map(function(owner){
　　return owner.pets[0].name;
});

// Lodash
_.map(ownerArr, 'pets[0].name');

_.map 方法是對原生 map 方法的改進，其中使用 pets[0].name 字符串對嵌套數據取值的方式簡化了不少冗餘的代碼，很是相似使用 jQuery 選擇 DOM 節點 ul > li > a，對於前端開發者來講有種久違的親切感。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lodash</title>
    </head>
    <body>
        <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var log = function(str) {
                if(typeof str == "object")
                {
                    console.log(JSON.stringify(str));
                }
                console.log(str);
            }

            var arr = [{
                "owner": "Colin",
                "pets": [{
                    "name": "dog1"
                }, {
                    "name": "dog2"
                }]
            }, {
                "owner": "John",
                "pets": [{
                    "name": "dog3"
                }, {
                    "name": "dog4"
                }]
            }];
            
            log(_.map(arr,"pets"));
            log(_.map(arr,"owner"));
            log(_.map(arr,"pets[1].name"));
            log(_.map(arr,o=>o.pets[1].name+":)"));
        </script>
    </body>

</html>

結果：

2.4.3. 個性化數組

// Array's map method.
Array.apply(null, Array(6)).map(function(item, index){
return "ball_" + index;
});

// Lodash
_.times(6, _.uniqueId.bind(null, 'ball_'));

// Lodash
_.times(6, _.partial(_.uniqueId, 'ball_'));
// eg. [ball_0, ball_1, ball_2, ball_3, ball_4, ball_5]

在上面的代碼中，咱們要建立一個初始值不一樣、長度爲 6 的數組，其中 _.uniqueId 方法用於生成獨一無二的標識符（遞增的數字，在程序運行期間保持獨一無二），_partial 方法是對 bind 的封裝。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lodash</title>
    </head>
    <body>
        <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var log = function(str) {
                if(typeof str == "object")
                {
                    console.log(JSON.stringify(str));
                }
                console.log(str);
            }
            //產生惟一編號
            log(_.uniqueId());
            log(_.uniqueId("gdnf_"));
            
            //封裝函數
            function greet(greeting,name){
                return greeting +" " +name;
            }
            log(greet("hello","tom"));
            
            var sayhello=_.partial(greet,'hello');
            var sayhi=_.partial(greet,'hi');
            
            log(sayhello('mark'));
            log(sayhi('rose'));
            
            //綜合
            var array=_.times(5,_.partial(_.uniqueId,'ball_'));
            log(array);
        </script>
    </body>

</html>

結果：

2.4.4. 深拷貝

var objA = {
"name": "colin"
}

// Normal method? Too long. See Stackoverflow for solution:
// http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript

// Lodash
var objB = _.cloneDeep(objA);
objB === objA // false

JavaScript 沒有直接提供深拷貝的函數，但咱們能夠用其餘函數來模擬，好比 JSON.parse(JSON.stringify(objectToClone))，但這種方法要求對象中的屬性值不能是函數。Lodash 中的 _.cloneDeep 函數封裝了深拷貝的邏輯，用起來更加簡潔。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Lodash</title>
    </head>

    <body>
        <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var log = function(str) {
                if(typeof str == "object") {
                    console.log(JSON.stringify(str));
                }
                console.log(str);
            }
            var obj0={address:"中國珠海"};
            var obj1 = {
                id: 1,
                name: "rose",
                position:obj0
            };
            log("引用");
            //引用
            var obj2=obj1;
            log(obj2==obj1);
            log("淺拷貝");
            //淺拷貝
            var obj3=_.clone(obj1);
            log(obj3==obj1);
            log(obj3===obj1);
            log(obj3.position===obj1.position);
            log("深拷貝");
            //深拷貝
            var obj4=_.cloneDeep(obj1);
            log(obj4==obj1);
            log(obj4===obj1);
            log(obj4.position===obj1.position);
        </script>
    </body>

</html>

結果：

2.4.5. 隨機數

// Naive utility method
function getRandomNumber(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomNumber(15, 20);

// Lodash
_.random(15, 20);

Lodash 的隨機數生成函數更貼近實際開發，ECMAScript 的隨機數生成函數是底層必備的接口，二者都不可或缺。此外，使用 _.random(15, 20, true) 還能夠在 15 到 20 之間生成隨機的浮點數。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Lodash</title>
    </head>

    <body>
        <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var log = function(str) {
                if(typeof str == "object") {
                    console.log(JSON.stringify(str));
                }
                console.log(str);
            }
            var obj0={address:"中國珠海"};
            var obj1 = {
                id: 1,
                name: "rose",
                position:obj0
            };
            
            var arr=_.times(10,function(){
                return _.random(1,100);
            });
            log(arr);
        </script>
    </body>

</html>

結果：

2.4.6. 對象擴展

// Adding extend function to Object.prototype
Object.prototype.extend = function(obj) {
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
this[i] = obj[i];
}
}
};

var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};

objA.extend(objB);
objA; // {"name": "james", "age": 17, "car": "suzuki"};

// Lodash
_.assign(objA, objB);

_.assign 是淺拷貝，和 ES6 新增的 Ojbect.assign 函數功能一致（建議優先使用 Object.assign）。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Lodash</title>
    </head>

    <body>
        <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var log = function(str) {
                if(typeof str == "object") {
                    console.log(JSON.stringify(str));
                }
                console.log(str);
            }
            var obj0 = {
                address: "中國珠海"
            };
            var obj1 = {
                id: 1,
                name: "rose",
                position: obj0
            };

            var x = {
                a: 1,
                b: 2,
                c: 3
            };
            var y = {
                b: 5,
                c: 6,
                d: 7
            };
            //用y擴展x
            _.assign(x,y);
            log(x);  //x被修改了
            log(y);
        </script>
    </body>
</html>

結果：

2.4.7. 篩選屬性

// Naive method: Remove an array of keys from object
Object.prototype.remove = function(arr) {
var that = this;
arr.forEach(function(key){
delete(that[key]);
});
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};

objA.remove(['car', 'age']);
objA; // {"name": "colin"}

// Lodash
objA = _.omit(objA, ['car', 'age']);
// => {"name": "colin"}
objA = _.omit(objA, 'car');
// => {"name": "colin", "age": 17};
objA = _.omit(objA, _.isNumber);
// => {"name": "colin"};

大多數狀況下，Lodash 所提供的輔助函數都會比原生的函數更貼近開發需求。在上面的代碼中，開發者可使用數組、字符串以及函數的方式篩選對象的屬性，而且最終會返回一個新的對象，中間執行篩選時不會對舊對象產生影響。

// Naive method: Returning a new object with selected properties
Object.prototype.pick = function(arr) {
var _this = this;
var obj = {};
arr.forEach(function(key){
obj[key] = _this[key];
});

return obj;
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};

var objB = objA.pick(['car', 'age']);
// {"car": "suzuki", "age": 17}

// Lodash
var objB = _.pick(objA, ['car', 'age']);
// {"car": "suzuki", "age": 17}

_.pick 是 _.omit 的相反操做，用於從其餘對象中挑選屬性生成新的對象。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Lodash</title>
    </head>

    <body>
        <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var log = function(str) {
                if(typeof str == "object") {
                    console.log(JSON.stringify(str));
                }
                console.log(str);
            }
            var obj0 = {
                address: "中國珠海"
            };
            var obj1 = {
                id: 1,
                name: "rose",
                position: obj0
            };

            var student = {
                name: "張三",
                age: 18,
                address: "中國香港"
            };

            //刪除屬性地址，未修改原數組
            var obj1 = _.omit(student, "address");
            log(obj1);
            
            var obj2 = _.omit(student, ['age','name']);
            log(obj2);
        </script>
    </body>

</html>

結果：

2.4.8. 隨機元素

var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];

function pickRandomPerson(luckyDraw){
var index = Math.floor(Math.random() * (luckyDraw.length -1));
return luckyDraw[index];
}

pickRandomPerson(luckyDraw); // John

// Lodash
_.sample(luckyDraw); // Colin

// Lodash - Getting 2 random item
_.sample(luckyDraw, 2); // ['John','Lily']

_.sample 支持隨機挑選多個元素並返回新的數組。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Lodash</title>
    </head>

    <body>
        <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var log = function(str) {
                if(typeof str == "object") {
                    console.log(JSON.stringify(str));
                }
                console.log(str);
            }
            var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];
            
            //隨機得到一個
            log(_.sample(luckyDraw));
            //隨機得到多個
            log(_.sampleSize(luckyDraw,2));
        </script>
    </body>

</html>

結果：

2.4.9. 針對 JSON.parse 的錯誤處理

// Using try-catch to handle the JSON.parse error
function parse(str){
try {
return JSON.parse(str);
}

catch(e) {
return false;
}
}

// With Lodash
function parseLodash(str){
return _.attempt(JSON.parse.bind(null, str));
}

parse('a');
// => false
parseLodash('a');
// => Return an error object

parse('{"name": "colin"}');
// => Return {"name": "colin"}
parseLodash('{"name": "colin"}');
// => Return {"name": "colin"}

若是你在使用 JSON.parse 時沒有預置錯誤處理，那麼它頗有可能會成爲一個定時炸彈，咱們不該該默認接收的 JSON 對象都是有效的。try-catch 是最多見的錯誤處理方式，若是項目中 Lodash，那麼可使用 _.attmpt 替代 try-catch 的方式，當解析 JSON 出錯時，該方法會返回一個 Error 對象。

隨着 ES6 的普及，Lodash 的功能或多或少會被原生功能所替代，因此使用時還須要進一步甄別，建議優先使用原生函數。

2.五、更多功能

1) _.map(collection, [iteratee=_.identity], [thisArg])

做用：建立一個通過 iteratee 處理的集合中每個元素的結果數組. iteratee 會傳入3個參數：(value, index|key, collection).

別名（Aliases）：_.collect

參數1): 須要遍歷的集合，能夠是數組，對象或者字符串.

參數2): 迭代器，能夠是函數，對象或者字符串.

參數3): 迭代器中this所綁定的對象.

返回值(Array): 映射後的新數組.

示例:

 1 function timesThree(n) {
 2   return n * 3;
 3 }
 4 
 5 _.map([1, 2], timesThree);
 6 // => [3, 6]
 7 
 8 _.map({ 'a': 1, 'b': 2 }, timesThree);
 9 // => [3, 6] (iteration order is not guaranteed)
10 
11 var users = [
12   { 'user': 'barney' },
13   { 'user': 'fred' }
14 ];
15 
16 // using the `_.property` callback shorthand
17 _.map(users, 'user');
18 // => ['barney', 'fred']

2) _.chunk(array, [size=1])

做用：將 array 拆分紅多個 size 長度的塊，把這些塊組成一個新數組。若是 array 沒法被分割成所有等長的塊，那麼最後剩餘的元素將組成一個塊.

參數1): 須要被處理的數組.

參數2): 每一個塊的長度.

返回值(Array): 返回一個包含拆分塊數組的新數組（至關於一個二維數組）.

示例:

1 _.chunk(['a', 'b', 'c', 'd'], 2);
2 // => [['a', 'b'], ['c', 'd']]
3 
4 _.chunk(['a', 'b', 'c', 'd'], 3);
5 // => [['a', 'b', 'c'], ['d']]

3) _.compact(array)

做用：建立一個新數組幷包含原數組中全部的非假值元素。例如 false、null、 0、""、undefined 和 NaN 都是「假值」.

參數: 須要被過濾的數組.

返回值(Array): 過濾假值後的數組.

示例:

1 _.compact([0, 1, false, 2, '', 3]);
2 // => [1, 2, 3]

4) _.difference(array, [values])

做用：建立一個差別化後的數組，不包括使用 SameValueZero 方法提供的數組.

參數1): 須要處理的數組.

參數2): 數組須要排除掉的值.

返回值(Array): 過濾後的數組.

示例:

1 _.difference([1, 2, 3], [4, 2]);
2 // => [1, 3]
3 _.difference([1, '2', 3], [4, 2]);
4 // => [1, "2", 3]

5) _.drop(array, [n=1])

做用：將 array 中的前 n 個元素去掉，而後返回剩餘的部分.

參數1): 被操做的數組.

參數2): 去掉的元素個數.

返回值(Array): 數組的剩餘部分.

示例:

 1 _.drop([1, 2, 3]);
 2 // => [2, 3] 默認是1開始的
 3 
 4 _.drop([1, 2, 3], 2);
 5 // => [3]
 6 
 7 _.drop([1, 2, 3], 5);
 8 // => []
 9 
10 _.drop([1, 2, 3], 0);
11 // => [1, 2, 3]

6)_.dropRight(array, [n=1])

做用：將 array 尾部的 n 個元素去除，並返回剩餘的部分.

參數1): 須要被處理的數組.

參數2): 去掉的元素個數.

返回值(Array): 數組的剩餘部分.

示例:

 1 _.dropRight([1, 2, 3]);
 2 // => [1, 2]
 3 
 4 _.dropRight([1, 2, 3], 2);
 5 // => [1]
 6 
 7 _.dropRight([1, 2, 3], 5);
 8 // => []
 9 
10 _.dropRight([1, 2, 3], 0);
11 // => [1, 2, 3]

7)_.dropRightWhile(array, [predicate=_.identity], [thisArg])

做用：從尾端查詢（右數）數組 array ，第一個不知足predicate 條件的元素開始截取數組.

參數1): 須要查詢的數組.

參數2): 迭代器，能夠是函數，對象或者字符串.

參數3): 對應 predicate 屬性的值.

返回值(Array): 截取元素後的數組.

示例:

 1 _.dropRightWhile([1, 2, 3], function(n) {
 2   return n > 1;
 3 });
 4 // => [1]
 5 
 6 var users = [
 7   { 'user': 'barney',  'active': true },
 8   { 'user': 'fred',    'active': false },
 9   { 'user': 'pebbles', 'active': false }
10 ];
11 
12 // using the `_.matches` callback shorthand
13 _.pluck(_.dropRightWhile(users, { 'user': 'pebbles', 'active': false }), 'user');
14 // => ['barney', 'fred']
15 
16 // using the `_.matchesProperty` callback shorthand
17 _.pluck(_.dropRightWhile(users, 'active', false), 'user');
18 // => ['barney']
19 
20 // using the `_.property` callback shorthand
21 _.pluck(_.dropRightWhile(users, 'active'), 'user');
22 // => ['barney', 'fred', 'pebbles']

8)_.pluck(collection, path)

做用：抽取集合中path所指定的路徑的屬性值.

參數1): 須要抽取的數組.

參數2): 須要抽取的屬性所對應的路徑.

返回值(Array): 抽取的屬性值所組成的數組.

示例:

 1 var users = [
 2   { 'user': 'barney', 'age': 36 },
 3   { 'user': 'fred',   'age': 40 }
 4 ];
 5 
 6 _.pluck(users, 'user');
 7 // => ['barney', 'fred']
 8 
 9 var userIndex = _.indexBy(users, 'user');
10 _.pluck(userIndex, 'age');
11 // => [36, 40] (iteration order is not guaranteed)

9)_.fill(array, value, [start=0], [end=array.length])

做用：使用 value 值來填充（也就是替換） array，從start位置開始, 到end位置結束（但不包含end位置）.

參數1): 須要填充的數組.

參數2): 填充 array 元素的值.

參數3): 起始位置（包含）.

參數4): 結束位置（不含）.

返回值(Array): 填充後的數組.

示例:

 1 var array = [1, 2, 3];
 2 
 3 _.fill(array, 'a');
 4 console.log(array);
 5 // => ['a', 'a', 'a']
 6 
 7 _.fill(Array(3), 2);
 8 // => [2, 2, 2]
 9 
10 _.fill([4, 6, 8], '*', 1, 2);
11 // => [4, '*', 8]

10)_.findIndex(array, [predicate=_.identity], [thisArg])

做用：該方法相似 _.find，區別是該方法返回的是符合 predicate條件的第一個元素的索引，而不是返回元素自己.

參數1): 須要搜索的數組.

參數2): 迭代器，能夠是函數，對象或者字符串.

參數3): 對應 predicate 屬性的值.

返回值(Number): 符合查詢條件的元素的索引值, 未找到則返回 -1.

示例:

 1 var users = [
 2   { 'user': 'barney',  'active': false },
 3   { 'user': 'fred',    'active': false },
 4   { 'user': 'pebbles', 'active': true }
 5 ];
 6 
 7 _.findIndex(users, function(chr) {
 8   return chr.user == 'barney';
 9 });
10 // => 0
11 
12 // using the `_.matches` callback shorthand
13 _.findIndex(users, { 'user': 'fred', 'active': false });
14 // => 1
15 
16 // using the `_.matchesProperty` callback shorthand
17 _.findIndex(users, 'active', false);
18 // => 0
19 
20 // using the `_.property` callback shorthand
21 _.findIndex(users, 'active');
22 // => 2

11)_.find(collection, [predicate=_.identity], [thisArg])

做用：遍歷集合中的元素，返回最早經 predicate 檢查爲真值的元素. predicate 會傳入3個元素：(value, index|key, collection).

參數1): 要檢索的集合，能夠是數組，對象或者字符串.

參數2): 迭代器，能夠是函數，對象或者字符串.

參數3): 迭代器中this所綁定的對象.

返回值: 匹配元素，不然返回 undefined.

示例:

 1 var users = [
 2   { 'user': 'barney',  'age': 36, 'active': true },
 3   { 'user': 'fred',    'age': 40, 'active': false },
 4   { 'user': 'pebbles', 'age': 1,  'active': true }
 5 ];
 6 
 7 _.find(users, function(o) { return o.age < 40; });
 8 // =>  'barney'
 9 
10 // 使用了 `_.matches` 的回調結果
11 _.find(users, { 'age': 1, 'active': true });
12 // =>  'pebbles'
13 
14 // 使用了 `_.matchesProperty` 的回調結果
15 _.find(users, ['active', false]);
16 // =>  'fred'
17 
18 // 使用了 `_.property` 的回調結果
19 _.find(users, 'active');
20 // =>  'barney'

12)_.forEach(collection, [iteratee=_.identity], [thisArg])

做用：調用 iteratee 遍歷集合中的元素， iteratee 會傳入3個參數：(value, index|key, collection)。若是顯式的返回 false ，iteratee 會提早退出.

參數1): 須要遍歷的集合，能夠是數組，對象或者字符串.

參數2): 迭代器，只能是函數.

參數3): 迭代器中this所綁定的對象.

返回值: 遍歷後的集合.

示例:

1 _([1, 2]).forEach(function(value) {
2   console.log(value);
3 });
4 // => 輸出 `1` 和 `2`
5 
6 _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
7   console.log(key);
8 });
9 // => 輸出 'a' 和 'b' (不保證遍歷的順序)

13)_.reduce(collection, [iteratee=_.identity], [accumulator], [thisArg])

做用：經過 iteratee 遍歷集合中的每一個元素. 每次返回的值會做爲下一次 iteratee 使用。若是沒有提供accumulator，則集合中的第一個元素做爲 accumulator. iteratee 會傳入4個參數：(accumulator, value, index|key, collection).

參數1): 須要遍歷的集合，能夠是數組，對象或者字符串.

參數2): 迭代器，只能是函數.

參數3): 累加器的初始化值.

參數4): 迭代器中this所綁定的對象.

返回值: 累加後的值.

示例:

 1 _.reduce([1, 2], function(total, n) {
 2   return total + n;
 3 });
 4 // => 3
 5 
 6 _.reduce({ 'a': 1, 'b': 2 }, function(result, n, key) {
 7   result[key] = n * 3;
 8   return result;
 9 }, {});
10 // => { 'a': 3, 'b': 6 } (iteration order is not guaranteed)

14)_.some(collection, [predicate=_.identity], [thisArg])

做用：經過 predicate 檢查集合中的元素是否存在任意真值的元素，只要 predicate 返回一次真值，遍歷就中止，並返回 true. predicate 會傳入3個參數：(value, index|key, collection).

參數1): 須要遍歷的集合，能夠是數組，對象或者字符串.

參數2): 迭代器，能夠是函數，對象或字符串.

參數3): 迭代器中this所綁定的對象.

返回值: 若是任意元素經 predicate 檢查都爲真值，則返回true，不然返回 false.

示例:

 1 _.some([null, 0, 'yes', false], Boolean);
 2 // => true
 3 
 4 var users = [
 5   { 'user': 'barney', 'active': true },
 6   { 'user': 'fred',   'active': false }
 7 ];
 8 
 9 // using the `_.matches` callback shorthand
10 _.some(users, { 'user': 'barney', 'active': false });
11 // => false
12 
13 // using the `_.matchesProperty` callback shorthand
14 _.some(users, 'active', false);
15 // => true
16 
17 // using the `_.property` callback shorthand
18 _.some(users, 'active');
19 // => true

15)_.chain(value)

做用：建立一個包含 value 的 lodash 對象以開啓內置的方法鏈.方法鏈對返回數組、集合或函數的方法產生做用，而且方法能夠被鏈式調用.

參數: 須要被包裹成lodash對象的值.

返回值: 新的lodash對象的實例.

示例:

 1 var users = [
 2   { 'user': 'barney',  'age': 36 },
 3   { 'user': 'fred',    'age': 40 },
 4   { 'user': 'pebbles', 'age': 1 }
 5 ];
 6 
 7 var youngest = _.chain(users)
 8   .sortBy('age')
 9   .map(function(chr) {
10     return chr.user + ' is ' + chr.age;
11   })
12   .first()
13   .value();
14 // => 'pebbles is 1'

相關標籤/搜索

每日一句

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