相信每一位开发同学都会有一套自己积累的工具函数。但是在团队开发中,如何每个人使用自己的工具函数会导致代码不规范。所以需要一套比较权威并且好用的工具库,这里非常推荐
Lodash
。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,其中部分是目前ECMAScript
尚未制订的规范,但同时被业界所认可的辅助函数。每天使用npm安装Lodash
的数量在百万级以上,这在一定程度上证明了其代码的健壮性,值得我们在项目中一试。
下载和引用
//npm安装
npm i --save lodash
//在对应组件中引入即可
import _ from 'lodash'
接下来记录的是常用API
和方法。如果想查看更多可以参考官网。
1.map
_.map(collection, [iteratee=_.identity])
创建一个数组, value
(值) 是 iteratee
(迭代函数)遍历 collection
(集合)中的每个元素后返回的结果。类似于ES5
的map
。
参数:
collection (Array|Object)
: 用来迭代的集合。
[iteratee=_.identity] (Array|Function|Object|string)
: 每次迭代调用的函数。
示例:
let testArr = [1, 2, 3];
let _map = _.map(testArr, n => n * 3);
console.log(_map);
2.chunk
_.chunk(array, [size=1])
将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。
参数:
array (Array)
: 需要处理的数组
[size=1] (number)
: 每个数组区块的长度
示例:
let testArr = [1, 2, 3, 4, 5, 6, 7];
let _chunk = _.chunk(testArr, 3);
console.log(_chunk); // [[1,2,3],[4,5,6],[7]]
3.compact
_.compact(array)
创建一个新数组,包含原数组中所有的非假值元素。例如false
, null
, 0
,""
, undefined
, 和 NaN
都是被认为是“假值”。
参数:
array (Array)
: 待处理的数组
示例:
let testArr = [1, 2, 3,'',undefined, 4, 5, 6, 7];
let _compact = _.compact(testArr);
console.log(_compact);//[1, 2, 3, 4, 5, 6, 7]
4.drop
_.drop(array, [n=1])
创建一个切片数组,去除array
前面的n个元素。(n默认值为1。)
参数:
array (Array)
: 要查询的数组。
[n=1] (number)
: 要去除的元素个数。
示例:
let testArr = [1, 2, 3, 4, 5, 6, 7];
let _drop = _.drop(testArr,4);
console.log(_drop); //[5,6,7]
5.difference
_.difference(array, [values])
创建一个新数组,这个数组中的值,为第一个数字( array
参数)排除了给定数组中的值。
参数:
array (Array)
: 要检查的数组。
[values] (...Array)
: 排除的值。
示例:
let testArr = [1,2,3];
let _difference = _.difference(testArr,[1,3]);
console.log(_difference);//[2]