Go to comments

Lodash Function函数方法

_.now()

获取当前的时间点(毫秒数)

console.log(_.now()); // 1651751621647


记录延迟函数调用的毫秒数

_.defer(function(stamp) {
  // 当前毫秒 减去 实参传进来的时间戳
  console.log(_.now() - stamp)
}, _.now());

下面是Function扩展的一些方法

一、绑定函数

_.bind()

看一下原生的bind方法就可以了

var greet = function(greeting, punctuation) {
  return greeting + ' ' + this.user + punctuation;
};
 
var object = { 'user': '远远的地方' };
 
var bound = _.bind(greet, object, 'holle');

console.log( bound('!') ); // holle 远远的地方!

二、科里化

_.curry()

var abc = function(a, b, c) {
  return [a, b, c];
};
 
var curried = _.curry(abc);
 
console.log( curried(1)(2)(3) ); // [1, 2, 3]
 
console.log( curried(1, 2)(3) ); // [1, 2, 3]
 
console.log( curried(1, 2, 3) ); // [1, 2, 3]

console.log( curried(1)(_, 3)(2) ); // [1, 2, 3]

三、性能优化

1、防抖函数

_.debounce()

<button>发送</button>

<script>

	function sendMail(text){
	  console.log(text);
	}

	var btn = document.getElementsByTagName('button')[0];

	var sendFun = _.debounce(sendMail, 300);
	 
	btn.onclick = function(){
		sendFun('发送了');
	};

</script>

2、节流函数

_.throttle()

<button>发送</button>

<script>

	function sendMail(text){
	  console.log(text);
	}

	var btn = document.getElementsByTagName('button')[0];

	var sendFun = _.throttle(sendMail, 3000);
	
	btn.onclick = function(){
		console.log('没有节流~~~');
		sendFun('节流了');
	}

</script>

四、推迟

_.defer()

推迟调用函数,在第二次事件循环的时候调用 

_.defer(function(text) {

    console.log(text);

}, '第二次事件循环(这是实参)');

console.log('第一次事件循环');

defer里面的function要等整script标签里所有的代码都走完后才执行


比如在CSS3中通过transition动态的让某些属性过渡,假设添加过渡的transtiton以及过渡的css属性都要通过js完成

1). 方法里填transition,方法下面直接设置left = 20的值。这个时候是没有过渡效果的的,因为都是同时发生的

2). 要先填上transition,然后再让属性left = 20动,有一个先后的顺序

3). 这种情况可以通过defer解决问题


PS: deferred是推迟的意思

五、延迟

_.delay()

函数延迟执行,这个方法就是一个延迟执行的定时器

_.delay(function(now) {
	
	console.log(now - _.now()); // 输出3005(数字不是特别精准)

}, 3000, _.now()); // 延迟3秒,最后一个参数是实参


PS: later是后来的意思

六、翻转参数

_.flip()

调用函数时翻转参数

function fn(){
  return arguments;
}

var fn= _.flip(fn); // 把函数fn改造一下在丢给fn

console.log(fn(1,2,3,4)); // [4, 3, 2, 1]

七、取反

_.negate()

结果取反函数

function fn(n) {
  return n % 2 == 0;
}


// 按照fn函数的原规则过滤偶数出来
console.log(_.filter([1, 2, 3, 4, 5, 6], fn)); // [2, 4, 6]


// _.negate(fn))规则取反,过滤出奇数
console.log(_.filter([1, 2, 3, 4, 5, 6], _.negate(fn))); // [1, 3, 5]

按照negate方法过滤,过滤的形式是"_.negate(fn)"取反,结果是偶数取反后是奇数

八、函数只能被调用一次

_.once()

函数只能调用一次

function fn(){
  console.log('bababa...');
}

var initialize = _.once(fn); // 把fn函数改造了,改成生命只有一次

initialize(); // bababa...
initialize();
initialize();

保证函数只能被调用一次,跟jQuery里的once方法是一样的

九、实参占位符

_partial()

函数参数占位符

var greet = function(greeting, name){
  return greeting + ' ' + name;
}
 
var sayHelloTo = _.partial(greet, 'hello');
console.log(sayHelloTo('fred')); // 'hello fred'
 

var greetFred = _.partial(greet, _, 'fred'); // 使用了占位符。
console.log(greetFred('hi')); // 'hi fred'



Leave a comment 0 Comments.

Leave a Reply

换一张