-
安装lodash
npm i --save lodash
-
引入
import _ from 'lodash'
-
使用
下面介绍几个常用的lodash
1.防抖 debounce
2.节流 throttle
<template>
<div class="loadsh">
<h1>防抖</h1>
<el-button type="success" plain @click="reduction">我是防抖</el-button>
<h1>节流</h1>
<el-input v-model="input" style="width:300px" @input="throttling"></el-input>
</div>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
input:'',
num:Math.random()
}
},
methods: {
//这里以一个点需要注意,在我们写的过程中不能写箭头函数因为那样获取不到this指向
//错误//reduction:_.debounce(()=>{ console.log('我是loadsh的防抖',this.num); },1000),
//防抖
reduction:_.debounce(function(){
console.log('我是loadsh的防抖',this.num);
},1000),
//节流
throttling:_.throttle(function(){
console.log('我是loadsh的节流',this.num);
},1000)
}
</script>
3.数组扁平化 flattenDeep
let arr=[1,[12,[true,5,[6,null,4,[undefined]]]]]
let newArr=_.flattenDeep(arr)
console.log(newArr);
4.数组深拷贝 cloneDeep
let obj={
name: 'zhangsan',
date: new Date(),
regExp: new RegExp("\w+"),
fun: function () { return true;},
err: new Error('error'),
symbol: Symbol(233),
undefined: undefined,
null: null,
nan: NaN,
infinity: Infinity
}
//JSON.parse(JSON.stringify())这样写会有缺陷有的数据他会拷贝不上
let cloneObj=JSON.parse(JSON.stringify(obj))
let cloneObjDeep=_.cloneDeep(obj)
console.log(cloneObj);
console.log(cloneObjDeep);
5.数组拆分 chunk
console.log(_.chunk(["a", "b", "c", "d"], 2)); //['a','b'] ['c','d']
console.log(_.chunk(["a", "b", "c", "d"], 3)); //["a", "b", "c"] ['d']
6.数组合并 concat
let arr1=[1,2,3]
let arr2=['a','b','c','e']
let str='我不是数组'
console.log(_.concat(arr1,arr2));//[1, 2, 3, "a", "b", "c", "e"]
console.log(_.concat(arr1,arr2,str));// [1, 2, 3, "a", "b", "c", "e", "我不是数组"]
7.数组去假 compact
创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”。
console.log(_.compact([0,1,false,2,undefined,3,NaN,4,'']));//[1, 2, 3, 4]
8.数组切片 drop
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(_.drop(arr)); // [2, 3, 4, 5, 6, 7, 8, 9]
console.log(_.drop(arr, 3)); // [4, 5, 6, 7, 8, 9]
console.log(_.drop(arr, 10)); //[]
9.数组排除 difference
创建一个新数组，这个数组中的值，为第一个数字（array 参数）排除了给定数组中的值。
let arr1 = [1, 2, 3, 4, 5, 6];
let arr2 = [5, 6];
console.log(_.difference(arr1, arr2)); //[1, 2, 3, 4]
10.循环执行 times
_.times(5,function(){
console.log("我是lodash重复执行了5次");
})
11.对象去重 assign
let obj1={name:'小李',car:'Benz'}
let obj2={name:'小刘',age:18}
let obj3={name:'小王',sex:'男'}
console.log(_.assign(obj1,obj2,obj3));
//{name: "小王", car: "Benz", age: 18, sex: "男"}
12.ID uniqueId
_.times(10,()=>{
console.log(_.uniqueId());
})
13.数组合并去重 union
let arr=[1,2,3,6]
let arr1=[1,2,3,5]
console.log(_.union(arr,arr1));//[1, 2, 3, 6, 5]
14.数组去重 uniq
let arr3=[1,2,3,4,4,4,6,7,8,9,9]
console.log(_.uniq(arr3));// [1, 2, 3, 4, 6, 7, 8, 9]
15.生成数组 range
console.log(_.range(10));//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
