Lodash中常用函數,不建議經常使用,容易讓人變懶忘了原生函數


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

for語句是執行循環的不二選擇,但在上面代碼的使用場景下,_.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中原生的數組方法非常的像,但它還是有非常有用的升級。 你可以通過一個字符串而不是回調函數來瀏覽深度嵌套的對象屬性。

3、深克隆對象
<script type="text/javascript">
    var objA = {
        "name": "戈德斯文"
    };
    var objB = _.cloneDeep(objA);
    console.log(objA);
    console.log(objB);
    console.log(objA === objB);
</script> 
深度克隆JavaScript對象是困難的,並且也沒有什么簡單的解決方案。你可以使用原生的解決方案: JSON.parse(JSON.stringify(objectToClone)) 進行深度克隆。但是,這種方案僅在對象內部沒有方法的時候才可行

4、在指定范圍內獲取一個隨機值
<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 方法要比上面的原生方法更強大與靈活。你可以只傳入一個參數作為最大值, 你也可以指定返回的結果為浮點數_.random(15,20,true)

5、擴展對象
<script type="text/javascript">
    Object.prototype.extend = function(obj) {
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {    //判斷被擴展的對象有沒有某個屬性,
                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 方法也可以接收多個參數對象進行擴展,都是往后面的對象上合並

6、從列表中隨機的選擇列表項
<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>

 

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

7、判斷對象中是否含有某元素
<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()第一個參數是需要查詢的對象,第二個參數是需要查詢的元素,第三個參數是開始查詢的下標

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

這兩種方法都會分別輸出‘1’和‘2’,不僅是數組,對象也可以,數組的是后key是元素的下標,當傳入的是對象的時候,key是屬性,value是值

 

9、遍歷循環執行某個方法
<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、檢驗值是否為空
<script type="text/javascript">
    _.isEmpty(null);
    // => true

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

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

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

    _.isEmpty({ 'a': 1 });
    // => false
</script>
12、數組去重
<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>
13、根據下標選擇元素,分到兩個數組
var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]
14、返回從結尾元素開始n個元素的數組切片
   // 倒數解構
   const [beforeLast, last] = lodash.takeRight([1, 2, 3, 4], 2)
   console.log(beforeLast, last) // 3 4
14、zipObject
   lodash.zipObject(['a', 'b'], [1, 2]);
   // => { 'a': 1, 'b': 2 }
15、zipObjectDeep
   lodash.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);
   // => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }
16、xor( 創建一個給定數組唯一值的數組 )
_.xor([2, 1], [2, 3]);
// => [1, 3]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM