官网: 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的以下功能:
$ npm i -g npm
$ npm i --save lodash
中文文档:https://www.lodashjs.com/docs/lodash.pick
_.pick(object, [props])
参数
object (Object): 来源对象。
[props] (…(string|string[])): 要被忽略的属性。(注:单独指定或指定在数组中。)
返回
(Object): 返回新对象。
例子:
var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
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;
pick方法的返回结果是一个什么样的对象,这里举个例子说明:
… 表示展开运算符(spread operator)
假设传入的props是:
const props = {
name: 'John',
age: 20,
gender: 'male',
style: {
color: 'red'
}
}
当我们调用:
pick(props, ['style'])
pick会从props中选取style属性,返回一个新的对象:
{
style: {
color: 'red'
}
}
可以看到,返回了一个只包含style属性的新对象。
然后通过展开运算符:
jsx
<div {...pick(props, ['style'])} >
就可以将这个对象展开,只插入style属性,相当于:
<div style={{color: 'red'}} >
总结:pick返回了一个截取了原对象属性子集的新对象,通过展开可以方便地将这个子集插入到JSX中。