使用
npm install lodash --save
// 使用
import _ from "lodash"
const obj = {a: [{ b: { c: 3 } }];
_.get(obj, 'a[0].b.c'); // => 3
get
根据规则获取对应规则的值, 如果没找到使用默认值或返回undefined，当传入的对象是undefined时或者传入的规则不存在时返回undefined而不会报错，但是如果期望获取到的值是某一数据类型比如数组进行map操作时，要注意做好兼容处理。
- 使用场景：数据会根据异步请求的结果而改变，通过_.get获取深层次的数据，可以减少错误操作的导致的问题，也不用过于考虑异步请求返回数据的时机问题。
const obj = { a: [{ b: { c: 3 } }] };
_.get(obj, 'a[0].b.c'); // => 3
// 当指定的规则中包含变量时使用[]的规则形式
const rule = 'b';
_.get(obj, ['a', '0', rule, 'c']); // => 3
// 当指定规则错误时会使用传入的默认值
_.get(obj, 'a.b.c', 'default'); // => 'default'
// 当某一数据会在异步请求之后修改时，要做好兼容处理
const obj = {a: { b: [] }}; // 异步请求会修改b的数组内容
// 由于异步请求的结果存在不可预知的情况，读取的规则一定是存在的，但是读取到的值取决于异步请求的结果，为避免错误操作异步请求的数据导致将b的内容修改为undefined的情况，所以要做好数据的兼容处理
(_.get(obj, 'a.b') || []).map(item => console.log(item))
cloneDeep
深拷贝
const obj = { a: 1 };
const deepObj = _.cloneDeep(obj);
deepObj.a = 2;
console.log(obj.a) // 1
throttle
节流，trailing=true时在事件频繁触发时在节流事件的开始和结束都会触发事件，trailing=false时只有在节流时间开始的时候触发。
_.throttle(func, [wait=0], [options={}])
[options.leading=true] (boolean): 指定调用在节流开始前，默认true。
[options.trailing=true] (boolean): 指定调用在节流结束后，默认true。
数组
uniq
数组去重
chunk
按个数来截取数组
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]
last
获取数组最后一个值,不用额外的去读取数组的长度
_.last([1, 2, 3]);
// => 3
head
获取数组的第一个值
_.head([1, 2, 3]);
// => 1
_.head([]);
// => undefined
dropRight, drop
数组从前或从后删除指定个数的元素,默认删除一个
_.dropRight([1, 2, 3]);
// => [1, 2]
_.drop([1, 2, 3]);
// => [2, 3]
_.dropRight([1, 2, 3], 2);
// => [1]
_.drop([1, 2, 3], 2);
// => [3]
_.dropRight([1, 2, 3], 5);
// => []
_.drop([1, 2, 3], 5);
// => []
_.dropRight([1, 2, 3], 0);
// => [1, 2, 3]
_.drop([1, 2, 3], 0);
// => [1, 2, 3]
findIndex, findLastIndex
从前或者从后开始找到数组中第一个符合规则的元素的下标
const users = [
{ user: 'dyx', active: false },
{ user: 'dou', active: false },
{ user: 'douyaxing', active: true }
];
_.findIndex(users, item => item.user === 'dyx');
// => 0
_.findIndex(users, { user: 'dou', active: false });
// => 1
_.findIndex(users, ['active', false]);
// => 0
_.findLastIndex(users, ['active', false]);
// => 1
_.findIndex(users, 'active');
// => 2
groupBy
根据数组的某个条件分组生成一个对象，新的对象的key是筛选条件，value是符合筛选条件的元素组成的新数组。
const arr = [
{ key: 1 },
{ key: 2 },
{ key:1 },
];
_.groupBy(arr, value => value.key) // 根据数组每一项的key值相同的为一个数组
// {
// 1: [{ key: 1 }, { key: 1 }],
// 2: [{ key: 2 }],
// }
const arr1 = [
{ name: 'dyx', age: 18 },
{ name: 'dyx1', age: 19 },
{ name: 'dyx2', age: 20 },
{ name: 'dyx1', age: 21 },
]
_.groupBy(arr1, 'name') // 根据name进行分组
// {
// dyx: [{ name: 'dyx', age: 18 }],
// dyx1: [{ name: 'dyx1', age: 19 }, { name: 'dyx1', age: 21 }],
// dyx2: [{ name: 'dyx2', age: 20 }],
// }
orderBy
const data = [
{ name: 'name1', value: 2 },
{ name: 'name2', value: 3 },
{ name: 'name3', value: 1 },
{ name: 'name4', value: 4 },
];
// 以value排序(默认升序)
const newData = _.orderBy(data, ['value']);
// 指定以降序排序
const newData = _.orderBy(data, ['value'], ['desc']);
// 可以指定多个字段进行排序 (以name字段升序排序 再以value以降序排序。)
const newData = _.orderBy(data, ['name', 'value'], ['asc', 'desc']);
sortBy
const arr = [
{ name: 1, data: [1, 2, 3] },
{ name: 2, data: [1, 2, 3, 4] },
{ name: 3, data: [1, 2] },
{ name: 4, data: [1] },
{ name: 5, data: [1, 2, 3] },
{ name: 6, data: [1, 2, 3, 4] },
]
console.log(_.sortBy(arr, item => item.data.length)); // 根据data的长度从小到大排序
console.log(_.sortBy(arr, item => -(item.data.length))); // 根据data的长度从大到小排序
对象
pick
根据对象的key值来找到指定对象中符合的内容，返回一个对象
const object = { a: 1, b: '2', c: 3 };
_.pick(object, ['a', 'c']);
// => { a: 1, c: 3 }
pickBy
第二个参数是一个函数两个形参分别代表对象的value和key，可以根据value或者key进行筛选，符合条件的生成一个新的对象并返回
- 适用场景：数据请求时去除所有不符合要求的数据比如空值等等，获取自己想要的属性使用扩展运算符赋值给组件（react）。
const object = { a: 1, b: '2', c: 3 };
_.pickBy(object, _.isNumber);
// => { a: 1, c: 3 }
_.pickBy(object, (value,key) => key === 'a');
// { a: 1 }
// 选择值有效且不为null不为undefined的参数
_.pickBy(params, value => !_.isNull(v) && !_.isUndefined(v) && v)
omit, omitBy
去除一个对象的某些值或者根据一些规则去除某一些值,上述_.pick、_.pickBy的反向操作。
- 适用场景：在对UI组件进行进一步的封装时，我们会支持新的自定义属性，通常也会支持原UI组件的所有属性，通过_.omitBy去除自定义属性获取所有属于原UI组件的属性，直接使用扩展运算符赋值给UI组件即可（react）。
const object = { a: 1, b: '2', c: 3 };
_.omit(object, ['a', 'c']);
// => { 'b': '2' }
const object = { a: 1, b: '2', c: 3 };
_.omitBy(object, _.isNumber);
// => { b: '2' }
数据判断
isEqual
在两个值之间进行深度比较确定是否相等，支持各种类型，避免引用数据类型比较时候的问题
const object = { a: 1 };
const other = { a: 1 };
_.isEqual(object, other);
// => true
object === other;
// => false
isNull
判断一个数据是否为 null
isUndefined
判断一个数据是否为undefined
isEmpty
检查一个数据象是否为空
