Article directory
Commonly used front-end libraries - JavaScript tool library lodash
1. What is lodash
Official website: https://lodash.com/
github: https://github.com/lodash/lodash
Lodash Chinese documentation: https://www.lodashjs.com/
Lodash is a well-known native JavaScript library that does not require the introduction of other third-party dependencies. It is a JS library intended to improve developer efficiency and improve the performance of JS native methods. To put it simply, lodash has already written many methods for you. You just need to call them directly. You don’t have to worry about writing them yourself, and you can unify the consistency of the methods. Lodash uses a simple _ symbol, just like Jquery's $, which is very concise.
Lodash is a consistent, modular, high-performance JavaScript utility library.
In React projects, we usually use the following functions of lodash:
- Utility functions such as uniqBy and keyBy to process arrays or objects.
- Deep clone objects to avoid polluting state objects in React.
- Modularity introduces a single function and optimizes the packaging size.
So simply put, lodash is a very powerful and practical JavaScript tool library that can improve code quality and development efficiency. It is also widely used in React projects.
2. Installation
$ npm i -g npm
$ npm i --save lodash
3. Use of lodash
Introduction and use of Lodash's pick() function
Chinese documentation: https://www.lodashjs.com/docs/lodash.pick
_.pick(object, [props])
Parameter
object (Object): source object.
[props] (…(string|string[])): Properties to be ignored. (Note: Specify individually or in an array.)
return
(Object): Returns a new object.
example:
var object = {
'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
React instance demo: pick combined with... spread operator (spread operator)
react instance 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;
What kind of object is the return result of the pick method? Here is an example:
… represents the spread operator (spread operator)
assuming that the props passed in are:
const props = {
name: 'John',
age: 20,
gender: 'male',
style: {
color: 'red'
}
}
When we call:
pick(props, ['style'])
pick will select the style attribute from props and return a new object:
{
style: {
color: 'red'
}
}
As you can see, a new object containing only the style attribute is returned.
Then pass the spread operator:
jsx
<div {
...pick(props, ['style'])} >
You can expand this object and insert only the style attribute, which is equivalent to:
<div style={
{
color: 'red'}} >
Summary: pick returns a new object that intercepts a subset of the original object's attributes. This subset can be easily inserted into JSX by expanding it.