数组扁平化，柯里化，防抖，节流，对象拷贝

[libin1991]

数组扁平化 数组扁平化：使用递归实现 function flattenDepth(array, depth=1) { let result = []; array.forEach (item => { let d = depth; if(Array.isArray(item) && d > 0){ result.push(...(flattenDepth(item, --d))) } else { result.push(item); } }) return result; } console.log(flattenDepth([1,[2,[3,[4]],5]]])) console.log(flattenDepth([1,[2,[3,[4]],5]],2)) console.log(flattenDepth([1,[2,[3,[4]],5]],3)) 将每一项遍历，如果某一项为数组，则让该项继续调用，这里指定了depth作为扁平化的深度，因为这个参数对数组的每一项都要起作用。 柯里化 参数够了就执行，参数不够就返回一个函数，之前的参数存起来，直到够了为止。 function curry(func) { var l = func.length; return function curried() { var args = [].slice.call(arguments); if(args.length < l) { return function() { var argsInner = [].slice.call(arguments) return curried.apply(this, args.concat(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) 节流和防抖 函数节流和函数防抖都是对大量频繁调用代码的一种优化。 防抖 不管你触发了多少次，都等到你最后触发后过一段你指定的时间才触发。简单地说，即函数在特定的时间内不被再调用后执行。 实际应用场景 监听窗口大小重绘的操作。 在用户拖拽窗口时，一直在改变窗口的大小，如果我们在 resize 事件中进行一些操作，消耗将是巨大的。而且大多数可能是无意义的执行，因为用户还处于拖拽的过程中。 可以使用 函数防抖 来优化相关的处理。 // 普通方案 window.addEventListener('resize', () => { console.log('trigger'); }) //函数防抖方案 let debounceIdentify = 0; window.addEventListener('resize', () => { debounceIdentify && clearTimeout(debounceIdentity) debounceIdentity = setTimeout(() => { console.log('trigger') }, 300) }) 我们在 resize 事件中添加了一个 300 ms 的延迟执行逻辑。 并且每次事件触发时，都会重新计时，这样保证，函数的执行肯定是在距离上次 resize 事件被触发的 300 ms 后。 两次 resize 事件间隔小于 300 ms 的都被忽略了，这样就会节省很多无意义的事件触发。 输入框的联想 几乎所有的搜索引擎都会对你输入的文字进行预判，并在下方推荐相关的结果。 但是这个联想意味着我们需要将当前用户所输入的文本传递到后端，并获取返回数据，展示在页面中。 如果遇到打字速度快的人，在一小段时间内，会连续发送大量的 ajax 请求到后端。并且当前的数据返回过来后，其实已经失去了展示的意义，因为用户可能从 you 输入到了 young ，这两个单词的相关结果肯定不一样的。 所以我们就在监听用户输入的事件那里做函数防抖处理，在 XXX 秒后发送联想搜索的 ajax 请求。 /** * 函数防抖的实现 * @param {Function} func 要实现函数节流的原函数 * @param {Number} delay 结束的延迟时间 * @return {Function} 添加节流功能的函数 */ function debounce (func, delay) { let debounceIdentify = 0 return (...args) => { debounceIdentify && clearTimeout(debounceIdentify) debounceIdentify = setTimeout(() => { debounceIdentify = 0 func.apply(this, args) }, delay) } } 基本版的： function debounce(func, wait){ var timer; return function(){ var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function(){ func.apply(context, args) }, wait) } } function debounce(func, wait, leading, trailing) { var timer, lastCall = 0, flag = true return function() { var context = this var args = arguments var now = + new Date() if (now - lastCall < wait) { flag = false lastCall = now } else { flag = true } if (leading && flag) { lastCall = now return func.apply(context, args) } if (trailing) { clearTimeout(timer) timer = setTimeout(function() { flag = true func.apply(context, args) }, wait) } } } 类似函数防抖操作 在一些与用户的交互上，比如提交表单后，一般都会显示一个loading框来提示用户，他提交的表单正在处理中。 但是发送表单请求后就显示loading是一件很不友好的事情，因为请求可能在几十毫秒内就会得到响应。 这样在用户看来就是页面中闪过一团黑色，所以可以在提交表单后添加一个延迟函数，在XXX秒后再显示loading框。 这样在快速响应的场景下，用户是不会看到一闪而过的loading框，当然，一定要记得在接收到数据后去clearTimeout. let identify = setTimeout(showLoadingModal, 500) fetch('XXX').then(res => { // doing something // clear timer clearTimeout(identify) }) 节流 不管怎么触发，都是按照指定的时间间隔来执行。简单地说，就是限制函数在一定时间内调用的次数。 在程序中，可以通过限制函数的调用频率，来抑制资源的消耗。 需要实现一个元素拖拽的效果，可以在每次 move 事件中进行重绘 DOM，但是这样做，程序的开销是非常大的。 所以这里用到函数节流的方法，来减少重绘的次数。 //普通方案 $dragable.addEventListener('mousemove', () => { console.log('trigger') }) // 函数节流的实现方案 let throttleIndentify = 0; $dragable.addEventListener('mousemove', () => { if(throttleIndentify) return; throttleIndentify = setTimeout(() => throttleIdentify = 0, 500); console.log('trigger'); }) 这样做的效果是，在拖拽的过程中，能保证 500 ms 内，只能重绘一次 DOM。 在同时监听了 mousemove 后，两者最终的效果是一致的，但是在拖拽的过程中，函数节流 版触发事件的次数会减少很多，资源相应地会消耗更少。 通用的函数节流实现 // ES6 版 function throttle (func, interval) { let identify = 0; return (...args) => { if (identify) return; identify = setTimeout(() => identify = 0, interval); func.apply(this, args) } } function throttle(func, wait){ var timer; return function() { var context = this; var args = arguments; if(!timer) { timer = setTimeout(function() { timer = null; func.apply(context, args) },wait) } } } function throttle(func, wait, leading, trailing) { var timer, lastCall = 0, flag = true return function() { var context = this var args = arguments var now = + new Date() flag = now - lastCall > wait if (leading && flag) { lastCall = now return func.apply(context, args) } if (!timer && trailing && !(flag && leading)) { timer = setTimeout(function () { timer = null lastCall = + new Date() func.apply(context, args) }, wait) } else { lastCall = now } } } 类似函数节流的操作 平时开发中经常会做的 ajax 请求获取数据，这里可以用到类似函数节流的操作。 在我们发送一个请求到后台时，当返回的数据还没有接收到，我们会添加一个标识，来表明当前有一个请求正在被处理，如果这时用户再触发 ajax 请求，则会直接跳过本次函数的执行。 同样的还有滑动加载更多数据，如果不添加类似的限制，可能会导致发送更多条请求，渲染重复数据。 对象拷贝 对象拷贝分为深拷贝和浅拷贝 JSON.parse(JSON.stringify(obj)) 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} } } var objects = { c: { 'a': 1, e: [1, {f: 2}] }, d: { 'b': 2 } } var shallow = clone(objects, true) console.log(shallow.c.e[1]) // { f: 2 } console.log(shallow.c === objects.c) // false console.log(shallow.d === objects.d) // false console.log(shallow === objects) // false