JS高级应用--防抖、节流、数组扁平化、柯里化、对象拷贝

防抖

浏览器resize、scroll、keypress、mousemove等事件触发时，会不断的调用绑定在事件上的回调函数，浪费资源、降低性能，为了优化体验，对这类事件调用次数限制。
作用：在短时间内多次触发同一函数，只执行最后一次，或者只在开始执行。
例：用户拖拽改变窗口大小，触发resize事件。

function debounce(func, delay, immediate) {
	var timer = null;
	return function(){
		var context = this;
		var args = arguments;
		if(timer) clearTimeout(timer);
		if(immediate) {
			var doNow = !timer;
			timer = setTimeout(function(){
				timer = null;
			},delay);
			if(doNow){
				func.apply(context, args);
			}
		}else{
			timer = setTimerout(function(){
				func.apply(context, args);
			}, delay)
		}
	}
}

应用示例

var run = function() {
	console.log("I'm run")
}
window.addEventListener('resize', debounce(run,2000))

节流

交流是指在一段时间内只允许函数执行一次
应用场景：输入框的联想，可以限定客户在输入时，只在每两秒响应一次（或两秒发送一次搜索请求）

var throttle = function(func, delay){
	var timer = null;
	return function(){
		var context = this;
		var args = arguments;
		if(!timer){
			timer = setTimeout(function(){
				func.apply(context, args);
				timer = null;
			},delay);
		}
	}
}

数组扁平化

function flatten(array, depth = 1) {
	let result = [];
	array.forEach(item=>{
		let d = depth;
		if(Array.isArray(item) && d>0){
			result.push(...(flatten(item, --d)))
		} else {
			result.push(item)
		}
	})
	return result
}

柯里化

function curry(func) {
	var l = func.length;
	return function curried() {
		var args = [].slice.call(arguments);
		if (args.length < 1) {
			return function() {
				var argsInner = [].slice.call(arguments)
				return curried.apply(this, args.contact(argsInner))
			}
		} else {
			return func.apply(this, args)
		}
	}
}
var f = function(a, b, c) {
	return console.log([a, b, c])
}
var curried = curry(f);
curried(1)(2)(3)

对象拷贝

function clone(value, isDeep) {
	if (value === null) return null;
	if (typeof value !== 'object') return value
	if (Array.isArray(value)) {
		if (isDeep) {
			return value.map(item => clone(item, true))
		}
		return [].concat(value)
	} else {
		if (isDeep) {
			var obj = {}
			Object.keys(value).forEach(item => {
				obj[item] = clone(value[item], true)
			})
			return obj
		}
		return { ...value }
	}
}