美文网首页
Lodash常用方法

Lodash常用方法

作者: 海豚先生的博客 | 来源:发表于2023-03-28 09:41 被阅读0次

【数组常用】

chunk,数组分组,变成二维数组

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

compact,数组过滤,返回全为真值的新数组

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

difference,数组过滤,通过一个给定的数组进行过滤

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

flattenDeep,拍平为一维数组

_.flattenDeep([1, [2, [3, [4]], 5]]);
// => [1, 2, 3, 4, 5]

fromPairs,将二维数组转化为对象

_.fromPairs([['fred', 30], ['barney', 40]]);
// => { 'fred': 30, 'barney': 40 }

toPairs,将对象转为二维数组

_.toPairs({ 'fred': 30, 'barney': 40 });
// => [['fred', 30], ['barney', 40]]

head,获取数组第一项

_.head([1, 2, 3]);
// => 1
 
_.head([]);
// => undefined

last,获取数组最后一项

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

initial,去掉数组中最后一项

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

tail,去掉数组中的第一项

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

uniq,数组去重

_.uniq([2, 1, 2]);
// => [2, 1]

intersection,多个数组取交集

_.intersection([2, 1], [4, 2], [1, 2]);
// => [2]

union,多个数组取并集

_.union([2], [1, 2]);
// => [2, 1]

xor,多个数组中去重

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

pull,通过给定的值过滤,改变原数组

var array = [1, 2, 3, 1, 2, 3];
 
_.pull(array, 2, 3);
console.log(array);
// => [1, 1]

without,通过给定的值过滤,返回新数组

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

remove,从数组中移除符合条件的项

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

zip & unzip,将多个长度相同的一维数组转为一个二维数组,或者反操作

var zipped = _.zip(['fred', 'barney'], [30, 40], [true, false]);
// => [['fred', 30, true], ['barney', 40, false]]
 
_.unzip(zipped);
// => [['fred', 'barney'], [30, 40], [true, false]]

zipObject,多个长度相同的一维数组转为一个对象形式

_.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }

【集合】

countBy,统计数组中项目出现的次数

_.countBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': 1, '6': 2 }
 
// The `_.property` iteratee shorthand.
_.countBy(['one', 'two', 'three'], 'length');
// => { '3': 2, '5': 1 }

groupBy,根据对item的变换对数组进行分组,组成聚合的对象

_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
 
// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

keyBy,根据对item中key的变换作为key,将item作为value,组成聚合的对象

var array = [
  { 'dir': 'left', 'code': 97 },
  { 'dir': 'right', 'code': 100 }];
 
_.keyBy(array, function(o) {
  return String.fromCharCode(o.code);
});
// => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
 
_.keyBy(array, 'dir');
// => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }

orderBy,根据某个字段排序,后者排序不会影响前者排序

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]]

sortBy,根据迭代函数中的返回结果升序排列

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];
 
_.sortBy(users, function(o) { return o.user; });
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
 
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]
 
_.sortBy(users, 'user', function(o) {
  return Math.floor(o.age / 10);
});
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

partition,根据item中的多个key对数组分组

var users = [
  { 'user': 'barney',  'age': 36, 'active': false },
  { 'user': 'fred',    'age': 40, 'active': true },
  { 'user': 'pebbles', 'age': 1,  'active': false }
];
 
_.partition(users, function(o) { return o.active; });
// => objects for [['fred'], ['barney', 'pebbles']]
 
// The `_.matches` iteratee shorthand.
_.partition(users, { 'age': 1, 'active': false });
// => objects for [['pebbles'], ['barney', 'fred']]
 
// The `_.matchesProperty` iteratee shorthand.
_.partition(users, ['active', false]);
// => objects for [['barney', 'pebbles'], ['fred']]
 
// The `_.property` iteratee shorthand.
_.partition(users, 'active');
// => objects for [['fred'], ['barney', 'pebbles']]

size,返回长度

_.size([1, 2, 3]);
// => 3
 
_.size({ 'a': 1, 'b': 2 });
// => 2
 
_.size('pebbles');
// => 7

【函数】

debounce,防抖

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
 
// 确保 `batchLog` 调用1次之后,1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
 
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);

throttle,节流

// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 
// 点击后就调用 `renewToken`,但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
 
// 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);

defer,延迟调用

_.defer(function(text) {
  console.log(text);
}, 'deferred');
// => 一毫秒或更久一些输出 'deferred'。

once,传入的函数只会被调用一次

var initialize = _.once(createApplication);
initialize();
initialize();
// `initialize` 只能调用 `createApplication` 一次。

【语言】

_.cloneDeep(value),深拷贝

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

eq,比较是否相等,包括引用

var object = { 'a': 1 };
var other = { 'a': 1 };
 
_.eq(object, object);
// => true
 
_.eq(object, other);
// => false
 
_.eq('a', 'a');
// => true
 
_.eq('a', Object('a'));
// => false
 
_.eq(NaN, NaN);
// => true

isEqual,只比较值,不包括引用

var object = { 'a': 1 };
var other = { 'a': 1 };
 
_.isEqual(object, other);
// => true
 
object === other;
// => false

isEmpty,没有枚举即为空

_.isEmpty(null);
// => true
 
_.isEmpty(true);
// => true
 
_.isEmpty(1);
// => true
 
_.isEmpty([1, 2, 3]);
// => false
 
_.isEmpty({ 'a': 1 });
// => false

toArray,转为数组

_.toArray({ 'a': 1, 'b': 2 });
// => [1, 2]
 
_.toArray('abc');
// => ['a', 'b', 'c']
 
_.toArray(1);
// => []
 
_.toArray(null);
// => []

【数学】

mean,取平均值

_.mean([4, 2, 8, 6]);
// => 5

sum,求和

_.sum([4, 2, 8, 6]);
// => 20

【对象】

invert,创建一个object键值倒置后的对象

 
_.invert(object);
// => { '1': 'c', '2': 'b' }

omit,去除对象中指定的键

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.omit(object, ['a', 'c']);
// => { 'b': '2' }

pick,创建一个从 object 中选中的属性的对象

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

相关文章

  • lodash常用方法

    1. _.chunk(array, [size=1]) 将数组(array)拆分成多个size长度的区块,并将这...

  • lodash常用方法

    找数组中的相同key项的对象() intersectionBy 去重uniqBy 返回符合元素的 index,否则...

  • Lodash 常用方法

    Array .compact(array) 创建一个新数组,包含原数组中所有的非假值元素。例如false, nul...

  • lodash常用方法

    1._.get说明: 其实就是如果没有这个值以后就会返回undefined,而不会像js中没有这个值就会报错 2....

  • lodash 常用方法

    数组对象根据某一个值去重 数组去重 两个数组对象对比根据某一个值去重 若干数组并集,交集,补集 陆续更新

  • lodash 常用方法

    对数据,特别是数组和对象进行各种读写等操作:比如去重,拷贝,合并,过滤,求交集,求和等等官网:https://ww...

  • lodash常用方法

    https://www.cnblogs.com/t-sun-j/p/10642568.html[https://w...

  • lodash常用方法合集

    集合 1 _.map(collection, [iteratee=_.identity]) 1.1 定义 创建一个...

  • lodash中常用的方法

    lodash会拷贝一份新数组,不会对之前的数组进行影响 数据的基础处理 浅拷贝&&深拷贝 数组的分割,将数组(ar...

  • 分享几个用于深复制的方法

    本篇摘要:主要分享了 JS 中常用的几种深复制方法,有来自于vuex``jQuery``JSON``lodash`...

网友评论

      本文标题:Lodash常用方法

      本文链接:https://www.haomeiwen.com/subject/zqptddtx.html