单页式网站模板,最大网站建设公司排名,wordpress电脑手机插件,公司网页设计模板图片文章目录 前端常用库之-JavaScript工具库lodash一、什么是lodash二、安装三、lodash使用Lodash 的 pick() 函数介绍和使用react 实例demo#xff1a;pick结合...展开运算符(spread operator) 前端常用库之-JavaScript工具库lodash
一、什么是lodash
官网#xff1a; https:… 文章目录 前端常用库之-JavaScript工具库lodash一、什么是lodash二、安装三、lodash使用Lodash 的 pick() 函数介绍和使用react 实例demopick结合...展开运算符(spread operator) 前端常用库之-JavaScript工具库lodash
一、什么是lodash
官网 https://lodash.com/ githubhttps://github.com/lodash/lodash Lodash 中文文档: https://www.lodashjs.com/
Lodash是一个著名的javascript原生库不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是很多方法lodash已经帮你写好了直接调用就行不用自己费尽心思去写了而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号就像Jquery的 $ 一样十分简洁。 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 在React项目中,我们通常会用到lodash的以下功能:
工具函数,如uniqBy、keyBy来处理数组或对象。深度克隆对象,避免污染 React 中的状态对象。模块化引入单个函数,优化打包大小。 所以简单来说,lodash是一个非常强大而实用的JavaScript工具库,能够提高代码质量和开发效率。它在React项目中也被广泛使用。
二、安装
$ npm i -g npm
$ npm i --save lodash三、lodash使用
Lodash 的 pick() 函数介绍和使用
中文文档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 实例demopick结合…展开运算符(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} pMyIcon typeinfo / {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中。
