lodash库常用方法
1. cloneDeep
import cloneDeep from 'lodash/cloneDeep.js';
export default class AddorEdit extends Vue {
@prop({ default:()=>({}) }) fromData!:Record<string,any>;
created() {
let data=cloneDeep(this.formData);
this.submitData=data //将获取的对象，赋值给表格，实现数据回填
}
}
2 . isNumber
isNumber( 3) //true
isNumber('3') //false
3. isArray
isArray([1,1,1]) //true
isArray('1') //flase
4. get
_.get(object, path, [defaultValue])
根据 object对象的path路径获取值。 如果解析 value 是 undefined 会以 defaultValue 取代。
object (Object): 要检索的对象。
path (Array|string): 要获取属性的路径。
[defaultValue] (*): 如果解析值是 undefined ，这值会被返回。
var object = {
'a': [{
'b': {
'c': 3
}
}]
};
console.log(_.get(object, 'a[0].b.c')); //3
console.log(_.get(object, ['a', '0', 'b', 'c']));//3
console.log(_.get(object, 'a.b.c', 'default')); //default
5. merge (类似于assign)
var users = { 'data': [{ 'user': 'barney' }, { 'user': 'fred' }] };
var ages = { 'data': [{ 'age': 36 }, { 'age': 40 }] };
_.merge(users, ages); *// => { 'data': [{ 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }] }*
6. isEmpty
7. trim
const _ = require('lodash');
var str = " Geeks-for-Geeks ";
console.log(_.trim(str)); // Geeks-for-Geeks (把空格删除了)
8. isFunction
9. isString
10 .throttle (节流函数)
创建一个节流函数，在 wait 秒内最多执行
func一次的函数。
使用场景：监听页面的滚动事件
鼠标移动事件
用户频繁点击按钮操作
想让响应函数在事件触发的第一刻就执行一次，在最后一次触发事件时也执行一次响应函数，这是给throttle函数增加 { leading: true, traling: true }的选项。
function timeHandler(obj) {
var timeHandler = _.throttle(function(e){
console.log("timeHandler", arguments);
}, 1000,{
leading: true,
trailing: false,
})
}
11. debounce (防抖函数)
debounce(fun,delay)
fun:执行的函数
delay:延迟时间（用户在输入后的指定时间后才会执行函数）
防抖函数应用场景：输入框中频繁的输入内容,搜索或者提交信息频繁的点击按钮，触发某个事件监听浏览器滚动（scroll）事件，完成某些特定操作用户缩放浏览器窗口的变化（resize）事件$(‘.elements’).on(‘input’,debounce((e)=>{console.log(e.target.value)},500))
<head>
...
<script src="./js/lodash.js"></script>
</head>
<body>
<p>
请输入搜索的内容：<input type="text">
</p>
</body>
<script>
// 防抖：前面的所有的触发都被取消，最后一次执行 在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次
let input = document.querySelector('input')
// 文本发生变化立即执行
input.oniput = _.debounce(function() {
cnsole.log('ajax发请求')
}, 1000)
</script>
12. isPlainObject
var object = _.isPlainObject({ 'x':0, 'y':0 });
let plain_data = ( object);
console.log(plain_data); // true 用来判断 _.isPlainObject后的参数是否是一个普通对象，是就返回true,否则返回false
13 . flatten
14. uniqBy （数组去重）
const _ = require("lodash");
let y = (['aee', 'bee', 'bee', 'cee', 'eee', 'dee', 'gee', 'dee']);
let gfg = _.uniqBy(y);
console.log(gfg);
['aee', 'bee', 'cee', 'eee', 'dee', 'gee']
15. isUndefined
16. set
17. camelCase
转换字符串
string为驼峰写法。
_.camelCase('Foo Bar');
// => 'fooBar'
//将获取的数据下划线转驼峰 {dev_name: 'aaa'}=>{devName: 'aaa'}
18 . mapKeys
var info = {
'GFG':{ 'user':'amit', 'age':23 },
'codechef':{ 'user':'priya', 'age':21 }
};
// Using the _.mapKeys() method
console.log(_.mapKeys(info,
function(o) { return o.age; }) //返回值作为属性名,且在对象中的位置靠前
);
//输出结果
{21:{'age':21, 'user':"priya"}, 23:{'age':23, 'user':"amit"}}
19 . difference （排他）
difference( array, [values])
将array中的元素与values 进行对比，移除在values中出现的所有值，并返回新数组
_.difference([1,2,3,4,5,6],[1,2,3]) // =>[4,5,6]