Lodash 引入以及常用方法

引言

Lodash 是 JavaScript 社区最出名的一个工具库，提供了许多高效、高兼容性的工具函数。

lodash 项目引入

方式1：引入整个lodash对象

import _ from 'lodash';
方式2：按名称引入特定的函数
import { cloneDeep } from 'lodash';

这两种方式都会引入整个 lodash 库。Lodash 含有许多函数，项目里一般只会用到其中的小部分，为了避免引入不必要的代码，lodash 提供了多种支持按需加载的方式。

使用打包插件实现按需加载插件 babel-plugin-lodash 和 lodash-webpack-plugin 能够在打包时去掉不必要的 lodash 代码，减小产物体积。
引用具体的功能模块（这种方式只会引入引用路径对应的模块，无需使用插件，也不会有冗余代码。缺点是每个 import 语句只能引入一个函数，可能导致多个 import 语句）

js 复制代码

// 只引入 array 模块的功能  
import array from "lodash/array";
// 只引入 cloneDeep 函数  
import cloneDeep from "lodash/cloneDeep";

使用单独的函数库

Lodash 为每个方法提供了单独的 npm 包，你可以只下载你想要的函数。

💡 不推荐在项目中使用这种方式。首先，它并不像看起来一样轻量，lodash 中的公共代码会存在于每一个函数包中。其次，每个方法都是独立的依赖包，意味着多次安装、多个 package.json 依赖项、多个 node_modules 包目录。

实用功能总结

字符串操作

大小写转换

js 复制代码

// _.lowerCase: 转换字符串string以空格分开单词，并转换为小写
_.lowerCase('--Foo-Bar--'); // => 'foo bar'
_.lowerCase('fooBar'); // => 'foo bar'
_.lowerCase('__FOO_BAR__'); // => 'foo bar'
//  _.lowerFirst: 转换字符串string的首字母为小写
_.lowerFirst('Fred'); // => 'fred'  
_.lowerFirst('FRED'); // => 'fRED'
//  _.upperFirst: 转换字符串string的首字母为大写
_.upperFirst('fred'); // => 'Fred'  
_.upperFirst('FRED'); // => 'FRED'
//  _.capitalize: 转换字符串string首字母为大写，剩下为小写
_.capitalize('FRED'); // => 'Fred'

命名风格转换

编程中，常见的多单词命名风格有：

蛇形写法（snake case）:单词之间用下划线连接，如 foo_bar
- 烤肉串写法（kebab case）:单词之间使用横线连接,如 foo-bar
- 驼峰写法（camel case）:从二个单词开始，每个单词的首字母大写,如 fooBar
- 大驼峰写法（pascal case）:每个单词首字母大写，如 FooBar

除了大驼峰，其他三种风格都有对应的转换函数

js 复制代码

//   _.snakeCase()
_.snakeCase('Foo Bar'); // => 'foo_bar'  
_.snakeCase('fooBar'); // => 'foo_bar'  
_.snakeCase('--FOO-BAR--'); // => 'foo_bar'
//  _.camelCase()
_.camelCase('Foo Bar'); // => 'fooBar'  
_.camelCase('--foo-bar--'); // => 'fooBar'  
_.camelCase('__FOO_BAR__'); // => 'fooBar'
//  _.kebaCase()
_.kebabCase('Foo Bar'); // => 'foo-bar'  
_.kebabCase('fooBar'); // => 'foo-bar'  
_.kebabCase('__FOO_BAR__'); // => 'foo-bar'

算术与数字

算术运算

js 复制代码

//  _.sum(array): 计算 array 中值的总和

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

//   _.mean(array): 计算 array 中值的总和

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

// 常用的数字操作

// _.random(lower=0,upper=1 [,floating])

// 返回一个[lower,upper]之间的随机数  
// 如果lower和upper中有浮点数，或者floating为true，返回浮点数，否则，返回整数

_.random(0,5); // => an integer between 0 and 5  
_.random(5); // => also an integer between 0 and 5  
_.random(5,true); // => a floating-point number between 0 and 5  
_.random(1.2,5.2); // => a floating-point number between 1.2 and 5.2

//  _.inRange(number, [start=0], end)

// 返回boolean  
// 检查 n 是否在 start 与 end 之间，但不包括 end。 如果 end 没有指定，那么 start 设置为0。 如果 start 大于 end，那么参数会交换以便支持负范围

_.inRange(3,2,4); // => true  
_.inRange(4,8); // => true  
_.inRange(4,2); // => false  
_.inRange(2,2); // => false  
_.inRange(1.2,2); // => true  
_.inRange(5.2,4); // => false  
_.inRange(-3,-2,-6); // => true

数组操作

分片/分区/分组

js 复制代码

//   _.chunk(array, [size=1])：分片是指把数组中的每 n 个元素分为一组（一片），如果不能整除，最后剩下的元素单独一片

// 返回一个包含拆分区块的新数组（注：相当于一个二维数组）。  
// 将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块

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

//   _.partition(collection, [predicate=_.identity])：分区是利用一个断言函数迭代每个元素，根据断言的 true 和 false，把元素分成两组

// 返回元素分组后的数组  
// 创建一个分成两组的元素数组，第一组包含predicate（断言函数）返回为 truthy（真值）的元素，第二组包含predicate（断言函数）返回为 falsey（假值）的元素。predicate 调用1个参数：(value)。

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']]  
_.partition(users,{'age':1,'active':false}); // => objects for [['pebbles'], ['barney', 'fred']]  
_.partition(users,['active',false]); // => objects for [['barney', 'pebbles'], ['fred']]  
_.partition(users,'active'); // => objects for [['fred'], ['barney', 'pebbles']]

//   _.groupBy(collection, [iteratee=_.identity])：分组是用一个函数遍历每个元素，得到的结果作为该元素所在组的 key，相同 key 元素归为同一组。

// 返回一个组成聚合的对象  
// 创建一个对象，key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果。 分组值的顺序是由他们出现在 collection(集合) 中的顺序确定的。每个键对应的值负责生成 key 的元素组成的数组。iteratee 调用 1 个参数： (value)

_.groupBy([6.1,4.2,6.3],Math.floor); // => { '4': [4.2], '6': [6.1, 6.3] }  
_.groupBy(['one','two','three'],'length'); // => { '3': ['one', 'two'], '5': ['three'] } // 字符串的length

元素操作：取样/打乱/计数

js 复制代码

//   _.sample(collection)：// 随机返回一个元素

// 返回随机元素  
// 从collection（集合）中获得一个随机元素

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

//   _.sampleSize(collection, [n=1])：// 随机返回n个元素

// 返回随机元素  
// 从collection（集合）中获得n个随机元素

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

//  _.countBy(collection, [iteratee=_.identity])：// 计数

// 返回一个组成集合对象  
// 创建一个组成对象，key（键）是经过 iteratee（迭代函数） 执行处理collection中每个元素后返回的结果，每个key（键）对应的值是 iteratee（迭代函数）返回该key（键）的次数（注：迭代次数）。 iteratee 调用一个参数：(value)。

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