当前位置：网站首页>Common methods of lodash Library

Common methods of lodash Library

2022-07-29 03:40:00 【Brave cow, rush】

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 // The object to be obtained , Assign to table , Realize data backfilling 
   }
 }

2 . isNumber

isNumber( 3) //true
isNumber('3') //false

3. isArray

isArray([1,1,1]) //true
isArray('1') //flase

4. get

_.get(object, path, [defaultValue])
according to object Object's path Path get value . If the parsing value yes undefined Will defaultValue replace .
object (Object): The object to retrieve .
path (Array|string): The path to get the property .
[defaultValue] (*): If the resolution value is undefined , This value will be returned .

 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 ( Be similar to 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 ( Delete the blank space )

8. isFunction

9. isString

10 .throttle ( Throttling function )

Create a throttling function , stay wait Execute at most... In seconds func Primary function .

Use scenarios ： Listen for page scrolling Events

Mouse movement events

Users frequently click the button to operate

Want the response function to execute once at the first moment of event triggering , The response function is also executed the last time the event is triggered , This is for throttle Function addition { leading: true, traling: true } The option to .

function timeHandler(obj) {
    
  var  timeHandler = _.throttle(function(e){
    
        console.log("timeHandler", arguments);
    }, 1000,{
    
        leading: true,
        trailing: false,
    })
}

11. debounce ( Anti shake function )

debounce(fun,delay)
fun: Executed function
delay: Delay time （ The user will execute the function after the specified time after input ）
Application scenario of anti shake function ： Frequent entries in the input box , Search or submit information by clicking the button frequently , Trigger an event to listen for browser scrolling （scroll） event , To complete certain operations, the user zooms in and out of the browser window （resize） event $(‘.elements’).on(‘input’,debounce((e)=>{console.log(e.target.value)},500))

<head>
	...
	<script src="./js/lodash.js"></script>
	</head>
<body>
	<p>
		 Please enter the content of the search ：<input type="text">
	</p>
</body>
<script>
	//  Shake proof ： All previous triggers are cancelled , Last execution   It will not trigger until after the specified time , That is, if you trigger continuously and quickly , It's only going to be executed once 
	let input = document.querySelector('input')
	//  If the text changes, execute immediately 
	input.oniput = _.debounce(function() {
    
		cnsole.log('ajax Send the request ')
	}, 1000)
</script>

12. isPlainObject

var object = _.isPlainObject({
     'x':0, 'y':0 });   
let plain_data = ( object);  
console.log(plain_data);  // true  Used to determine  _.isPlainObject Whether the parameter after is an ordinary object , Is to return true, Otherwise return to false

13 . flatten

14. uniqBy （ Array weight removal ）

  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

Convert string string by Hump writing .

_.camelCase('Foo Bar');
// => 'fooBar'
// Underline the obtained data to hump  {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; }) // Return value as property name , And in front of the object 
);
// Output results 
{
    21:{
    'age':21, 'user':"priya"}, 23:{
    'age':23, 'user':"amit"}}

19 . difference （ Exclusive ）

difference( array, [values])
take array Elements in and values Contrast , Remove in values All values that appear in , And return the new array

_.difference([1,2,3,4,5,6],[1,2,3]) // =>[4,5,6]

原网站

版权声明
本文为[Brave cow, rush]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/210/202207290338099872.html