Lodash常用方法彙總(持續更新)

簡單介紹

Lodash 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
Lodash 中集成了很多方法,安全可靠,再也不用自己造輪子了。

常用方法彙總

import _ from 'lodash'; // 引入

_.get(object, path, [defaultValue]);
說明:根據 object對象的path路徑獲取值。 如果解析 value 是 undefined 會以 defaultValue 取代。
示例:
    var object = { 'a': [{ 'b': { 'c': 3 } }] };
    _.get(object, 'a[0].b.c'); // => 3
    _.get(object, 'a.b.c', 'default'); // => 'default'

_.forIn(object, [iteratee=_.identity]) | _.forEach(collection, [iteratee=_.identity]);
說明:使用 iteratee 遍歷對象的自身和繼承的可枚舉屬性。 iteratee 會傳入3個參數:(value, key, object)。 如果返回 false,iteratee 會提前退出遍歷。
示例:
    var users = {
      'fred':    { 'user': 'fred',    'age': 40 },
      'pebbles': { 'user': 'pebbles', 'age': 1 }
    };
    
     _.forIn(users, (value, key) => console.log(key, value))
     _.forIn(users, (value, key, object) => {
         if(key == 'fred') return false; // 返回false,退出遍歷
     })

_.defaults(object, [sources]);
說明:分配來源對象的可枚舉屬性到目標對象所有解析爲 undefined 的屬性上。 來源對象從左到右應用。 一旦設置了相同屬性的值,後續的將被忽略掉。
示例:
    _.defaults({}, {title: '124'}, {title: '默認', callback: () => {}});
    // {title: '124', callback: f}
    
    // 如果想深度使用默認值,可以使用defaultsDeep (封裝組件時使用較多)
    _.defaultsDeep({}, {title: '124', props: {b: 1}}, {title: '默認', props: {a:1, b:2}});
    // {title: '124', props: {a:1, b:1}}

_.max(array) | _.maxBy(array, [iteratee=_.identity]);
說明:計算 array 中的最大值。 如果 array 是 空的或者假值將會返回 undefined。
示例:
    _.max([4, 2, 8, 6]); // => 8

    var objects = [{ 'n': 1 }, { 'n': 2 }];
    _.maxBy(objects, o => o.n); // => { 'n': 2 }
    _.maxBy(objects, 'n'); // => { 'n': 2 }

_.chunk(array, [size=1]);
說明:將數組(array)拆分成多個 size 長度的區塊,並將這些區塊組成一個新數組。
示例:
    _.chunk(['a', 'b', 'c', 'd'], 2); // => [['a', 'b'], ['c', 'd']]
    _.chunk(['a', 'b', 'c', 'd'], 3); // => [['a', 'b', 'c'], ['d']]

_.difference(array, [values]);
說明:創建一個具有唯一array值的數組,每個值不包含在其他給定的數組中。
示例:
    _.difference([3, 2, 1], [4, 2]); // => [3, 1]

_.intersection([arrays]);
說明:創建唯一值的數組,這個數組包含所有給定數組都包含的元素(交集)。
示例:
    _.intersection([2, 1], [4, 2], [1, 2]); // => [2]

_.union([arrays]);
說明:創建一個按順序排列的唯一值的數組(並集)。
示例:
    _.union([1], [3, 1, 2], [2, 4]); // => [1, 3, 2, 4]

_.uniq(array);
說明:創建一個去重後的array數組副本(去重)。
示例:
    _.uniq([2, 1, 2]); // => [2, 1]

_.groupBy(collection, [iteratee=_.identity]);
說明:創建一個對象,key 是 iteratee 遍歷 collection(集合) 中的每個元素返回的結果(數據分組)。
示例:
    var arr = [
        {key: 2, value: 1},
        {key: 2, value: 3},
        {key: 1, value: 2},
    ];
    _.groupBy(arr, item => item.key);
    // => {1: [{key: 1, value: 2}], 2: [{key: 2, value: 1}, {key: 2, value: 3}]}

備註: 無法保證數據還原成數組後和原來的順序保持一致,如果要保證數據一致性,參考如下方法:
clipboard.png


_.orderBy(collection, [iteratees=[_.identity]], [orders]);
說明:此方法類似於 _.sortBy,除了指定 iteratee(迭代函數),還支持結果如何排序。
示例:
    var users = [
      { 'user': 'fred',   'age': 48 },
      { 'user': 'barney', 'age': 34 },
      { 'user': 'fred',   'age': 40 },
      { 'user': 'barney', 'age': 36 }
    ];
     
    // 以 `user` 升序排序 再  `age` 以降序排序。
    _.orderBy(users, ['user', 'age'], ['asc', 'desc']);
    // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

_.partition(collection, [predicate=_.identity]);
說明:創建一個分成兩組的元素數組,第一組包含predicate(斷言函數)返回爲 truthy(真值)的元素,第二組包含predicate(斷言函數)返回爲 falsey(假值)的元素。
示例:
    var users = [
      { 'user': 'p1', 'active': false },
      { 'user': 'p2', 'active': true },
      { 'user': 'p3', 'active': false }
    ];
     
    _.partition(users, user => user.active);
    // => [[{user: 'p2', active: true}], [{user: 'p1', active: false}, {user: 'p3', active: false}]]

_.size(collection);
說明:返回collection(集合)的長度,如果集合是類數組或字符串,返回其 length ;如果集合是對象,返回其可枚舉屬性的個數。
示例:
    _.size([1, 2, 3]); // => 3
     
    _.size({ 'a': 1, 'b': 2 }); // => 2 (常用)
     
    _.size('pebbles'); // => 7

_.cloneDeep(value);
說明:這個方法類似 _.clone,除了它會遞歸拷貝 value。(也叫深拷貝)。
示例:
    var objects = [{ 'a': 1 }, { 'b': 2 }];
    var deep = _.cloneDeep(objects);
    console.log(deep[0] === objects[0]); // => false

_.isEqual(value, other);
說明:執行深比較來確定兩者的值是否相等。 
示例:
    var object = { 'a': 1 };
    var other = { 'a': 1 };
    _.isEqual(object, other); // => true

_.random([lower=0], [upper=1], [floating]);
說明:產生一個包括 lower 與 upper 之間的數。 
示例:
    _.random(0, 5);

_.random([lower=0], [upper=1], [floating]);
說明:產生一個包括 lower 與 upper 之間的數。 
示例:
    _.random(0, 5);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章