Lodash中很好用的15个方法

1,330 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第14天,点击查看活动详情
Lodash是最流行的开源JavaScript库之一。它实现了很多函数方法,使日常工作更容易。本文和大家分享一些经常使用的方法。本文将介绍15种日常方法,它们可以加快开发速度,并使代码更具可读性。

1. shuffle

使用# Fisher–Yates洗牌算法创建一个随机数组。

import shuffle from 'lodash/shuffle';
const result = shuffle([1, 2, 3, 4, 5]);
// result => [2, 5, 1, 4, 3]

2. orderBy

创建一个元素数组,按指定顺序排序。

import orderBy from 'lodash/orderBy';

const items = [
  { name: 'Item A', price: 2 },
  { name: 'Item B', price: 8 },
  { name: 'Item C', price: 4 },
  { name: 'Item D', price: 4 }
];

const result = orderBy(items, ['price', 'name'], ['desc', 'asc']);

/*
result => [
  { name: 'Item B', price: 8 },
  { name: 'Item C', price: 4 },
  { name: 'Item D', price: 4 },
  { name: 'Item A', price: 2 }
]
*/

3. chunk

创建一个数组,元素为将其拆分为指定大小的子数组(如果数组不能均匀拆分,则最后的子数组将只包含剩余的元素)。

import chunk from 'lodash/chunk';
const array = [ 1, 2, 3, 4 ];
const result = chunk(array, 2);
// result => [[1, 2], [3, 4]]

4. take

创建数组的一个切片,从开头处取指定数目的元素。

import take from 'lodash/take';
const result = take([1, 2, 3], 2);
// result => [1, 2]

5. difference

创建不包含在其他给定数组的元素的数组。结果数组元素的顺序由第一个数组决定。

import difference from 'lodash/difference';
const result = difference([1, 2, 3], [2, 3, 4]);
// result => [1]

6. intersection

创建所有给定数组都包含的元素的数组。结果数组元素的顺序由第一个数组决定。

import intersection from 'lodash/intersection';
const result = intersection([1, 2, 3], [2, 3, 4]);
// result => [2, 3]

7. isEmpty

检查值是否为空对象、集合、映射或集合。

import isEmpty from 'lodash/isEmpty';
isEmpty({});
// => true
isEmpty({ name: 'John Doe' });
// => false

8. throttle(节流)

创建一个函数,该函数在每个间隔(以毫秒为单位)最多调用一次传递的函数。

import throttle from 'lodash/throttle';
const throttled = throttle(() => {
    console.log('Throttled after 50ms!');
}, 50);

window.addEventListener('resize', throttled);

9. debounce(防抖)

创建一个函数,该函数将延迟调用传递的函数,直到上次调用函数经过了指定的时间间隔。

import debounce from 'lodash/debounce';
const debounced = debounce(() => {
    console.log('Debounced after 400ms!');
}, 400);

window.addEventListener('resize', debounced);

10. merge

递归地将源对象自身和继承的可枚举属性合并到目标对象中。

import merge from 'lodash/merge';

const firstObject = { 'A': [{ 'B': 1 }, { 'C': 2 }] };

const secondObject = { 'A': [{ 'B': 3 }, { 'D': 4 }] };

const result = merge(firstObject, secondObject);

// result => { A: [{ B: 3 }, { C: 2, D: 4 }] }

11. cloneDeep

深克隆一个给定的值。

import cloneDeep from 'lodash/cloneDeep';

const items = [
{ name: 'Item A' },
{ name: 'Item B' },
];
const result = cloneDeep(items);
// result[0] === items[0] => false

12. startCase

将字符串转换为大小写(每个单词的第一个字母大写)。

import startCase from 'lodash/startCase';
startCase('--foo-bar--');
// => 'Foo Bar'

startCase('fooBar');
// => 'Foo Bar'

startCase('__FOO_BAR__');
// => 'FOO BAR'

13. kebabCase

将字符串转换为小写字符串(标点符号被删除,空格被替换为破折号)。

import kebabCase from 'lodash/kebabCase';

kebabCase('Foo Bar');
// => 'foo-bar'

kebabCase('fooBar');
// => 'foo-bar'

kebabCase('__FOO_BAR__');
// => 'foo-bar'

14. snakeCase

将字符串转换为小写字符串,标点符号被删除,文本转换为小写,空格替换为单下划线(kebabCase是转化为破折号)。

import snakeCase from 'lodash/snakeCase';

snakeCase('Foo Bar');
// => 'foo_bar'

snakeCase('fooBar');
// => 'foo_bar'

snakeCase('--FOO-BAR--');
// => 'foo_bar'

15. camelCase

将字符串转换为驼峰大小写(删除空格和标点,每个单词的第一个字母大写)。

import camelCase from 'lodash/camelCase';

camelCase('Foo Bar');
// => 'fooBar'

camelCase('--foo-bar--');
// => 'fooBar'

camelCase('__FOO_BAR__');
// => 'fooBar'

总结

Lodash是一个非常受欢迎的开源库,如果你正在寻找更快构建web应用程序的方法,那么值得一看。

译自:blog.bitsrc.io/15-useful-l…