lodash-實用庫及常用方法

在項目開發(fā)中,用的比較多的是lodash的JavaScript實用庫

lodash是一個強(qiáng)大的JavaScript庫,提供了許多實用方法,可以處理數(shù)組、對象和字符串等數(shù)據(jù)類型。它具有模塊化、性能高效、穩(wěn)定可靠、靈活易用等特點(diǎn)。

以下是lodash庫中比較常用的方法:

  1. chunk():將數(shù)組(array)拆分成多個指定長度的區(qū)塊,并將這些區(qū)塊組成一個新數(shù)組。例如:

    let array = [1, 2, 3, 4, 5, 6];
    let chunked = _.chunk(array, 2); 
    // [[1, 2], [3, 4], [5, 6]]
    
  2. debounce():在執(zhí)行回調(diào)函數(shù)之前,延遲執(zhí)行該函數(shù)。常用于處理重復(fù)的實時事件,防止回調(diào)函數(shù)的頻繁觸發(fā)。

    function savePreferences() {  
        // code to save preferences
    }
    let save = _.debounce(savePreferences, 1000);
    // Set the preference and debounced function is called after 1 second with the preference value.save('my preference');
    
  3. isObject():判斷某個值是否為對象。

    let isObject = _.isObject({}); // true
    let isNotObject = _.isObject('string'); // false
    
  4. isNaN():判斷某個值是否為NaN。

    isNaN函數(shù)用于檢查一個值是否為“非數(shù)字”值。這意味著它可以用來檢測一個值是否是NaN(Not a Number),或者是一個可以被解釋為有效數(shù)字的其他非數(shù)字值。

    const _ = require('lodash');
    
    console.log(_.isNaN(NaN));               // 輸出: true
    console.log(_.isNaN(0));                  // 輸出: false
    console.log(_.isNaN(''));                 // 輸出: false
    console.log(_.isNaN('123'));               // 輸出: false
    console.log(_.isNaN([1, 2, 3]));           // 輸出: false
    console.log(_.isNaN({ a: 1, b: 2 }));      // 輸出: false
    console.log(_.isNaN(null));               // 輸出: false
    console.log(_.isNaN(undefined));          // 輸出: false
    
  5. isUndefined():判斷某個值是否為undefined。

    const _ = require('lodash');
    
    let value1, value2, value3;
    
    console.log(_.isUndefined(value1));  *// 輸出: true*
    console.log(_.isUndefined(value2));  *// 輸出: false*
    console.log(_.isUndefined(value3));  *// 輸出: true*
    
  6. map():創(chuàng)建一個新數(shù)組,數(shù)組中的元素是通過調(diào)用提供的函數(shù)在原始數(shù)組上產(chǎn)生的結(jié)果。

    let array = [1, 2, 3];
    let doubled = _.map(array, function(num) { return num * 2; }); 
    // [2, 4, 6]
    
  7. get():獲取對象指定屬性的值。

    它允許你通過指定的路徑獲取對象的屬性。如果路徑不存在,則返回undefined

    const _ = require('lodash');
    
    let object = {
      a: {
        b: {
          c: 3
        }
      }
    };
    
    console.log(_.get(object, 'a.b.c')); // 輸出 3
    console.log(_.get(object, 'a.b.d')); // 輸出 undefined
    console.log(_.get(object, 'a.e')); // 輸出 undefined
    
  8. set():設(shè)置對象指定屬性的值。

    set函數(shù)是用于在對象中設(shè)置指定路徑的屬性值。如果路徑不存在,則會自動創(chuàng)建。

    const _ = require('lodash');
    
    let object = {
      a: {
        b: {
          c: 3
        }
      }
    };
    
    _.set(object, 'a.b.c', 4); // 設(shè)置路徑'a.b.c'的屬性值為4
    console.log(object); // 輸出 { a: { b: { c: 4 } } }
    
    _.set(object, 'a.b.d', 5); // 設(shè)置路徑'a.b.d'的屬性值為5,如果不存在會創(chuàng)建路徑
    console.log(object); // 輸出 { a: { b: { c: 4, d: 5 } } }
    
  9. isEqual():深度比較兩個對象是否相等。

    isEqual函數(shù)用于比較兩個對象或值是否相等。它使用嚴(yán)格比較(deep comparison)來檢查對象和數(shù)組中的值,并且會處理循環(huán)引用。

    const _ = require('lodash');
    
    let object1 = { a: 1, b: { c: 2 } };
    let object2 = { a: 1, b: { c: 2 } };
    let object3 = { a: 1, b: { c: 3 } };
    
    console.log(_.isEqual(object1, object2));  // 輸出: true
    console.log(_.isEqual(object1, object3));  // 輸出: false
    
  10. isEmpty():判斷一個對象是否為空。

    isEmpty函數(shù)用于檢查一個對象(數(shù)組、字符串、對象等)是否為空。

    const _ = require('lodash');
    
    let array1 = [];
    let array2 = [1, 2, 3];
    let object1 = {};
    let object2 = { a: 1, b: 2 };
    let string1 = '';
    let string2 = 'abc';
    
    console.log(_.isEmpty(array1));      // 輸出: true
    console.log(_.isEmpty(array2));      // 輸出: false
    console.log(_.isEmpty(object1));     // 輸出: true
    console.log(_.isEmpty(object2));     // 輸出: false
    console.log(_.isEmpty(string1));     // 輸出: true
    console.log(_.isEmpty(string2));     // 輸出: false
    
  1. sortBy(): 方法可以按照指定的條件對數(shù)組進(jìn)行排序。

    let people = [ 
        { 'name': 'John', 'age': 30 }, 
        { 'name': 'Jane', 'age': 25 }, 
        { 'name': 'Mike', 'age': 35 }
    ];
    let sortedPeople = _.sortBy(people, ['age', 'name']);
    console.log(sortedPeople);
    // [{ name: 'Jane', age: 25 }, { name: 'John', age: 30 }, { name: 'Mike', age: 35 }]
    

    在上面的例子中,我們首先定義了一個people數(shù)組,然后使用sortBy方法按照agename進(jìn)行排序。sortBy方法接受兩個參數(shù),第一個參數(shù)是需要排序的數(shù)組,第二個參數(shù)是一個字符串或數(shù)組,用于指定排序的條件。如果第二個參數(shù)是字符串,則按照該字符串代表的屬性進(jìn)行排序;如果第二個參數(shù)是數(shù)組,則先按照第一個元素指定的屬性進(jìn)行排序,然后按照第二個元素指定的屬性進(jìn)行排序。

    需要注意的是,sortBy方法默認(rèn)按照升序排序,如果需要按照降序排序,可以傳入第三個參數(shù)為true。

  2. union()函數(shù)用于合并多個數(shù)組,并去除重復(fù)項

    // 導(dǎo)入lodash庫
    const _ = require('lodash');
    
    // 創(chuàng)建數(shù)組
    const array1 = [1, 2, 3];
    const array2 = [3, 4, 5];
    const array3 = [5, 6, 7];
    
    // 使用union函數(shù)合并數(shù)組并去除重復(fù)項
    const result = _.union(array1, array2, array3);
    
    // 輸出結(jié)果
    console.log(result); // [1, 2, 3, 4, 5, 6, 7]
    
  3. intersection()函數(shù)用于獲取數(shù)組的交集

    // 導(dǎo)入lodash庫
    const _ = require('lodash');
    
    // 創(chuàng)建數(shù)組
    const array1 = [1, 2, 3];
    const array2 = [3, 4, 5];
    const array3 = [5, 6, 7];
    
    // 使用intersection函數(shù)獲取數(shù)組的交集
    const result = _.intersection(array1, array2, array3);
    
    // 輸出結(jié)果
    console.log(result); // [3]
    
  4. difference()函數(shù)用于從第一個數(shù)組中移除所有在其他數(shù)組中的元素

    // 導(dǎo)入lodash庫
    const _ = require('lodash');
    
    // 創(chuàng)建數(shù)組
    const array1 = [1, 2, 3, 4, 5];
    const array2 = [3, 4];
    const array3 = [4, 5];
    
    // 使用difference函數(shù)從array1中移除所有在array2和array3中的元素
    const result = _.difference(array1, array2, array3);
    
    // 輸出結(jié)果
    console.log(result); // [1]
    
  5. pluck()從對象中獲取給定鍵的值

    const people = [{'name': 'Bob', 'age': 36}, {'name': 'Alice', 'age': 30}];
    const names = _.pluck(people, 'name'); // ['Bob', 'Alice']
    
  6. invoke()這個函數(shù)用于調(diào)用對象中的方法。這對于處理包含方法的對象非常有用。

    const person = {
      name: 'John',
      age: 30,
      greet: function() {
        console.log('Hello!');
      }
    };
    _.invoke(person, 'greet'); // "Hello!"
    
  7. assign()這個函數(shù)用于將對象的屬性復(fù)制到另一個對象。這是一個非常有用的函數(shù),用于合并對象。

    const obj1 = { a: 1 };
    const obj2 = { b: 2 };
    const merged = _.assign({}, obj1, obj2); // { a: 1, b: 2 }
    
  8. cloneDeep()這個函數(shù)用于深度克隆一個對象。這對于處理復(fù)雜對象和避免引用問題非常有用

    const obj = { a: 1, b: { c: 2 } };
    const cloned = _.cloneDeep(obj); // { a: 1, b: { c: 2 } }
    

以上僅是 Lodash 的一些常用庫和函數(shù)示例,還有很多其他的實用工具和函數(shù)可以幫助開發(fā)人員解決各種編程問題。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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