当前位置：网站首页>lodash库常用方法

lodash库常用方法

2022-07-29 03:38:00 【勇敢牛牛，冲冲冲】

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]

原网站

版权声明
本文为[勇敢牛牛，冲冲冲]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_44613011/article/details/125970525