簡介

Lodash是一個(gè)著名的javascript原生庫，不需要引入其他第三方依賴。是一個(gè)意在提高開發(fā)者效率,提高JS原生方法性能的JS庫。簡單的說就是，很多方法lodash已經(jīng)幫你寫好了，直接調(diào)用就行，不用自己費(fèi)盡心思去寫了，而且可以統(tǒng)一方法的一致性。Lodash使用了一個(gè)簡單的 _ 符號(hào)，就像Jquery的 $ 一樣，十分簡潔。
類似的還有Underscore.js和Lazy.js

支持

chrome 43往上
Firefox 38往上
IE 6-11
MS Edge
Safari 5往上
（幾乎涵蓋現(xiàn)在市面上可以見到的大部分瀏覽器）

如何安裝

瀏覽器

<script src="lodash.js"></script> 直接下載下來引入，或者使用cdn

NPM

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

先全局安裝，在單獨(dú)安裝到項(xiàng)目中

node.js

var _ = require('lodash');

為什么使用lodash

通過使用數(shù)組，數(shù)字，對(duì)象，字符串等方法，Lodash使JavaScript變得更簡單。

常用lodash函數(shù)

（參考版本lodash v4.16.1）

1、N次循環(huán)

<script type="text/javascript">
    console.log('------- javascript -------');
    //js原生的循環(huán)方法
    for(var i = 0; i < 5; i++){
        console.log(i);
    }
    console.log('------- lodash -------');
    //ladash的times方法
    _.times(5,function(a){
        console.log(a);
    });
</script>

for語句是執(zhí)行循環(huán)的不二選擇，但在上面代碼的使用場景下，_.times()的解決方式更加簡潔和易于理解。

2、深層查找屬性值

<script type="text/javascript">
    var ownerArr = [{
        "owner": "Colin",
        "pets": [{"name": "dog1"}, {"name": "dog2"}]
    }, {
        "owner": "John",
        "pets": [{"name": "dog3"}, {"name": "dog4"}]
    }];
    var jsMap = ownerArr.map(function (owner) {
        return owner.pets[0].name;
    });
    console.log('------- jsMap -------');
    console.log(jsMap);

    var lodashMap = _.map(ownerArr, 'pets[0].name');
    console.log('------- lodashMap -------');
    console.log(lodashMap);
</script>

Lodash中的_.map方法和JavaScript中原生的數(shù)組方法非常的像，但它還是有非常有用的升級(jí)。你可以通過一個(gè)字符串而不是回調(diào)函數(shù)來瀏覽深度嵌套的對(duì)象屬性。

3、深克隆對(duì)象

<script type="text/javascript">
    var objA = {
        "name": "戈德斯文"
    };
    var objB = _.cloneDeep(objA);
    console.log(objA);
    console.log(objB);
    console.log(objA === objB);
</script>

深度克隆JavaScript對(duì)象是困難的，并且也沒有什么簡單的解決方案。你可以使用原生的解決方案:JSON.parse(JSON.stringify(objectToClone)) 進(jìn)行深度克隆。但是，這種方案僅在對(duì)象內(nèi)部沒有方法的時(shí)候才可行。

4、在指定范圍內(nèi)獲取一個(gè)隨機(jī)值

<script type="text/javascript">
    function getRandomNumber(min, max){
        return Math.floor(Math.random() * (max - min)) + min;
    }
    console.log(getRandomNumber(15, 20));

    console.log(_.random(15, 20));

</script>

Lodash中的 _.random 方法要比上面的原生方法更強(qiáng)大與靈活。你可以只傳入一個(gè)參數(shù)作為最大值，你也可以指定返回的結(jié)果為浮點(diǎn)數(shù)_.random(15,20,true)

5、擴(kuò)展對(duì)象

<script type="text/javascript">
    Object.prototype.extend = function(obj) {
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {    //判斷被擴(kuò)展的對(duì)象有沒有某個(gè)屬性，
                this[i] = obj[i];
            }
        }
    };

    var objA = {"name": "戈德斯文", "car": "寶馬"};
    var objB = {"name": "柴碩", "loveEat": true};

    objA.extend(objB);
    console.log(objA); 

    console.log(_.assign(objA, objB));
</script>

_.assign 方法也可以接收多個(gè)參數(shù)對(duì)象進(jìn)行擴(kuò)展，都是往后面的對(duì)象上合并

6、從列表中隨機(jī)的選擇列表項(xiàng)

<script type="text/javascript">
    var smartTeam = ["戈德斯文", "楊海月", "柴碩", "師貝貝"];

    function randomSmarter(smartTeam){
        var index = Math.floor(Math.random() * smartTeam.length);
        return smartTeam[index];
    }

    console.log(randomSmarter(smartTeam));

    // Lodash
    console.log(_.sample(smartTeam));
    console.log(_.sampleSize(smartTeam,2));
</script>

此外，你也可以指定隨機(jī)返回元素的個(gè)數(shù)_.sampleSize(smartTeam,n)，n為需要返回的元素個(gè)數(shù)

7、判斷對(duì)象中是否含有某元素

<script type="text/javascript">
    var smartPerson = {
            'name': '戈德斯文',
            'gender': 'male'
        },
        smartTeam = ["戈德斯文", "楊海月", "柴碩", "師貝貝"];


    console.log(_.includes(smartPerson, '戈德斯文'));
    console.log(_.includes(smartTeam, '楊海月'));
    console.log(_.includes(smartTeam, '楊海月',2));
</script>

_.includes()第一個(gè)參數(shù)是需要查詢的對(duì)象，第二個(gè)參數(shù)是需要查詢的元素，第三個(gè)參數(shù)是開始查詢的下標(biāo)

8、遍歷循環(huán)

<script type="text/javascript">
    _([1, 2]).forEach(function(value) {
        console.log(value);
    });
    _.forEach([1, 3] , function(value, key) {
        console.log(key,value);
    });
</script>

這兩種方法都會(huì)分別輸出‘1’和‘2’，不僅是數(shù)組，對(duì)象也可以，數(shù)組的是后key是元素的下標(biāo)，當(dāng)傳入的是對(duì)象的時(shí)候，key是屬性，value是值

9、遍歷循環(huán)執(zhí)行某個(gè)方法

_.map()

<script type="text/javascript">
    function square(n) {
        return n * n;
    }

    console.log(_.map([4, 8], square));
    // => [16, 64]

    console.log(_.map({ 'a': 4, 'b': 8 }, square));
    // => [16, 64] (iteration order is not guaranteed)

    var users = [
        { 'user': 'barney' },
        { 'user': 'fred' }
    ];

    // The `_.property` iteratee shorthand.
    console.log(_.map(users, 'user'));
    // => ['barney', 'fred']
</script>

10、檢驗(yàn)值是否為空

_.isEmpty()

<script type="text/javascript">
    _.isEmpty(null);
    // => true

    _.isEmpty(true);
    // => true

    _.isEmpty(1);
    // => true

    _.isEmpty([1, 2, 3]);
    // => false

    _.isEmpty({ 'a': 1 });
    // => false
</script>

11、查找屬性

_.find()、_.filter()、_.reject()

<script type="text/javascript">
    var users = [
        {'user': 'barney', 'age': 36, 'active': true},
        {'user': 'fred', 'age': 40, 'active': false},
        {'user': 'pebbles', 'age': 1, 'active': true}
    ];

    console.log(_.find(users, function (o) {
        return o.age < 40;
    }));
    console.log(_.find(users, {'age': 1, 'active': true}));
    console.log(_.filter(users, {'age': 1, 'active': true}));
    console.log(_.find(users, ['active', false]));
    console.log(_.filter(users, ['active', false]));
    console.log(_.find(users, 'active'));
    console.log(_.filter(users, 'active'));

</script>

_.find()第一個(gè)返回真值的第一個(gè)元素。
_.filter()返回真值的所有元素的數(shù)組。
_.reject()是_.filter的反向方法，不返回真值的（集合）元素

12、數(shù)組去重

_.uniq(array)創(chuàng)建一個(gè)去重后的array數(shù)組副本。

參數(shù)
array (Array): 要檢查的數(shù)組。

返回新的去重后的數(shù)組

<script type="text/javascript">
    var arr1 = [2, 1, 2];

    var arr2 = _.uniq(arr1);


    function unique(arr) {
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if(newArr.indexOf(arr[i]) == -1){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }

    console.log(arr1);
    console.log(arr2);
    console.log(unique(arr1));
</script>

_.uniqBy(array,[iteratee=_.identity])這個(gè)方法類似 _.uniq，除了它接受一個(gè) iteratee（迭代函數(shù)），調(diào)用每一個(gè)數(shù)組（array）的每個(gè)元素以產(chǎn)生唯一性計(jì)算的標(biāo)準(zhǔn)。iteratee 調(diào)用時(shí)會(huì)傳入一個(gè)參數(shù)：(value)。

<script type="text/javascript">
    console.log(_.uniqBy([2.1, 1.2, 2.3], Math.floor));
    // => [2.1, 1.2]
    
    console.log(_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'));
    // => [{ 'x': 1 }, { 'x': 2 }]
</script>

Math.floor只是向下取整，去重，并沒有改變原有的數(shù)組，所以還是2.1和1.2，不是2和1。

13、模板插入

_.template([string=''], [options={}])

<div id="container"></div>

<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var data = [{name: '戈德斯文'}, {name: '柴碩'}, {name: '楊海月'}];
        var t = _.template($("#tpl").html());
        $("#container").html(t(data));
    });
</script>
<script type="text/template" id="tpl">
    <% _.each(obj,function(e,i){ %>
        <ul>
            <li><%= e.name %><%= i %></li>
        </ul>
    <%})%>
</script>

注意，這個(gè)<script>標(biāo)簽的type是text/template，類似于react的JSX的寫法，就是js和html可以混寫，用<% %>括起來的就是js代碼，可以執(zhí)行，直接寫的就是html的標(biāo)簽，并且有類似MVC框架的的數(shù)據(jù)綁定，在<%= %>中可以調(diào)用到數(shù)據(jù)呈現(xiàn)（純屬個(gè)人見解，不知道理解的對(duì)不對(duì)）

就這么多了，剩下的自己可以查看中文文檔和官方文檔或者看看別人寫的博客，雖然現(xiàn)在很多方法ES6已經(jīng)自己就已經(jīng)封裝好了，我們還是寫ES5的多，有個(gè)偷懶少寫方法的路子，為啥不用！！

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

lodash入門

lodash入門

簡介

支持

如何安裝

瀏覽器

NPM

node.js

為什么使用lodash

常用lodash函數(shù)

1、N次循環(huán)

2、深層查找屬性值

3、深克隆對(duì)象

4、在指定范圍內(nèi)獲取一個(gè)隨機(jī)值

5、擴(kuò)展對(duì)象

6、從列表中隨機(jī)的選擇列表項(xiàng)

7、判斷對(duì)象中是否含有某元素

8、遍歷循環(huán)

9、遍歷循環(huán)執(zhí)行某個(gè)方法

10、檢驗(yàn)值是否為空

11、查找屬性

12、數(shù)組去重

13、模板插入

就這么多了，剩下的自己可以查看中文文檔和官方文檔或者看看別人寫的博客，雖然現(xiàn)在很多方法ES6已經(jīng)自己就已經(jīng)封裝好了，我們還是寫ES5的多，有個(gè)偷懶少寫方法的路子，為啥不用！！

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

lodash入門

簡介

支持

如何安裝

瀏覽器

NPM

node.js

為什么使用lodash

常用lodash函數(shù)

1、N次循環(huán)

2、深層查找屬性值

3、深克隆對(duì)象

4、在指定范圍內(nèi)獲取一個(gè)隨機(jī)值

5、擴(kuò)展對(duì)象

6、從列表中隨機(jī)的選擇列表項(xiàng)

7、判斷對(duì)象中是否含有某元素

8、遍歷循環(huán)

9、遍歷循環(huán)執(zhí)行某個(gè)方法

10、檢驗(yàn)值是否為空

11、查找屬性

12、數(shù)組去重

13、模板插入

就這么多了，剩下的自己可以查看中文文檔和官方文檔或者看看別人寫的博客，雖然現(xiàn)在很多方法ES6已經(jīng)自己就已經(jīng)封裝好了，我們還是寫ES5的多，有個(gè)偷懶少寫方法的路子，為啥不用！！

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、N次循環(huán)

2、深層查找屬性值

3、深克隆對(duì)象

4、在指定范圍內(nèi)獲取一個(gè)隨機(jī)值

6、從列表中隨機(jī)的選擇列表項(xiàng)

7、判斷對(duì)象中是否含有某元素

8、遍歷循環(huán)

9、遍歷循環(huán)執(zhí)行某個(gè)方法

10、檢驗(yàn)值是否為空

11、查找屬性

12、數(shù)組去重

13、模板插入

就這么多了，剩下的自己可以查看中文文檔和官方文檔或者看看別人寫的博客，雖然現(xiàn)在很多方法ES6已經(jīng)自己就已經(jīng)封裝好了，我們還是寫ES5的多，有個(gè)偷懶少寫方法的路子，為啥不用！！