前端常用库之-JavaScript工具库lodash

前端常用库之-JavaScript工具库lodash

一、什么是lodash

官网： https://lodash.com/
github：https://github.com/lodash/lodash
Lodash 中文文档: https://www.lodashjs.com/

Lodash是一个著名的javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

在React项目中,我们通常会用到lodash的以下功能:

1. 工具函数,如uniqBy、keyBy来处理数组或对象。
2. 深度克隆对象,避免污染 React 中的状态对象。
3. 模块化引入单个函数,优化打包大小。
   所以简单来说,lodash是一个非常强大而实用的JavaScript工具库,能够提高代码质量和开发效率。它在React项目中也被广泛使用。

二、安装

$ npm i -g npm
$ npm i --save lodash
1
2

三、lodash使用

Lodash 的 pick() 函数介绍和使用

中文文档：https://www.lodashjs.com/docs/lodash.pick

_.pick(object, [props])
1

参数
object (Object): 来源对象。
[props] (…(string|string[])): 要被忽略的属性。（注：单独指定或指定在数组中。）

返回

(Object): 返回新对象。

例子：

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

react 实例demo：pick结合…展开运算符(spread operator)

react 实例demo：

import { pick } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import MyIcon from 'components/MyIcon';
import classes from './NoDataTip.scss';

// 这个NoDataTip组件是一个显示“无数据”提示的React组件
// 这是一个React函数式组件,接收tip和style作为props,渲染一个提示。
// NoDataTip组件可以复用来渲染各种“无数据”的状态,通过配置tip提示语以及MyIcon的type图标,可以实现不同的效果。
// 它通常会在列表加载完成时,但数据为为空时使用,提高了组件的复用性,也统一了界面风格。
const NoDataTip = props => (
  <div {...pick(props, ['style'])} className={classes.container} >
    <p><MyIcon type="info" /> {props.tip}</p>
  </div>
);

NoDataTip.propTypes = {
  tip: PropTypes.string
};

NoDataTip.defaultProps = {
  tip: '暂无数据',
  style: {}
};

export default NoDataTip;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

pick方法的返回结果是一个什么样的对象,这里举个例子说明：

… 表示展开运算符(spread operator)
假设传入的props是:

const props = {
  name: 'John',
  age: 20,
  gender: 'male',
  style: {
    color: 'red'
  }  
}
1
2
3
4
5
6
7
8

当我们调用:

pick(props, ['style'])
1

pick会从props中选取style属性,返回一个新的对象:

{
  style: {
    color: 'red' 
  }
}
1
2
3
4
5

可以看到,返回了一个只包含style属性的新对象。
然后通过展开运算符:
jsx

<div {...pick(props, ['style'])} >
1

就可以将这个对象展开,只插入style属性,相当于:

<div style={{color: 'red'}} >
1

总结：pick返回了一个截取了原对象属性子集的新对象,通过展开可以方便地将这个子集插入到JSX中。