JavaScript 五大常见函数


Posted in Javascript onMarch 23, 2018

在 JavaScript 中有一些问题会被拿出来经常讨论,这些问题每个人都有不同的思路,想要理解这些问题,最好的方法就是自己实现一遍,话不多说,开始正题。

数组扁平化

数组扁平化有很多方法,但最终最好的方法就是递归,实现一个指定深度的扁平化方法,这样基本的套路都会了解。

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]])) // [ 1, 2, [ 3, [ 4 ] ], 5 ]
console.log(flattenDepth([1, [2, [3, [4]], 5]], 2)) // [ 1, 2, 3, [ 4 ], 5 ]
console.log(flattenDepth([1, [2, [3, [4]], 5]], 3)) // [ 1, 2, 3, 4, 5 ]

递归实现很简洁易懂,就是将每一项遍历,如果某一项为数组,则让该项继续调用,这里指定了 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) // => [1, 2, 3]
curried(1, 2)(3) // => [1, 2, 3]
curried(1, 2, 3) // => [1, 2, 3]

上面的代码不难看出,每次判断参数的个数,与被柯里化的函数参数个数比较,如果小于就继续返回函数,否则就执行。

防抖

防抖按照我的理解就是不管你触发多少次,都等到你最后触发后过一段你指定的时间才触发。按照这个解释,写一个基本版的。

function debounce(func, wait) {
 var timer
 return function() {
 var context = this
 var args = arguments
 clearTimeout(timer)
 timer = setTimeout(function() {
  func.apply(context, args)
 }, wait)
 }
}

现在有个要求就是刚开始的时候也触发,最后一次也触发,并且可以配置,先写个测试页面方便测试功能,每次按空格键就会让数字加1,来测试防抖和节流函数。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
 <style>
  #container{text-align: center; color: #333; font-size: 30px;}
 </style>
</head>
<body>
 <div id="container"></div>
 <script>
  var count = 1
  var container = document.getElementById('container')
  function getUserAction(e) {
  // 空格
  if (e.keyCode === 32) {
   container.innerHTML = count++
  }
  }
  // document.onkeydown = debounce(getUserAction, 1000, false, true)
  document.onkeydown = throttle(getUserAction, 1000, true, true)
  function debounce(func, wait, leading, trailing) {}
  function throttle(func, wait, leading, trailing) {}
 </script>
</body>
</html>

通过 leading 和 trailing 两个参数来决定开始和结束是否执行,如果 leading 为 true,则没次按空格都会执行一次,如果 trailing 为 true,则每次结束都会将最后一次触发执行。以防抖函数距离,如果两者都为 true,则第一次按空格会加 1,然后快速按空格,此时里面的 getUserAction 并不会执行,而是等到松手后再执行,加入 trailing 为 false,则松手后不会执行。

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)
 }
 }
}

解释一下,每次记录上次调用的时间,与现在的时间对比,小于间隔的话,第一次执行后之后就不会执行,大于间隔或在间隔时间后调用了,则重置 flag,可以与上面那个基本版的对比着看。

节流

节流就是,不管怎么触发,都是按照指定的间隔来执行,同样给个基本版。

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
 }
 }
}

对象拷贝

对象拷贝都知道分为深拷贝和浅拷贝,黑科技手段就是使用

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

对于基本类型直接返回,对于引用类型,遍历递归调用 clone 方法。

总结

其实对于上面这些方法,总的来说思路就是递归和高阶函数的使用,其中就有关于闭包的使用,前端就爱问这些问题,最好就是自己实现一遍,这样有助于理解。希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
判断javascript的数据类型(示例代码)
Dec 11 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 #Javascript
剖析Angular Component的源码示例
Mar 23 #Javascript
vue利用axios来完成数据的交互
Mar 23 #Javascript
JS动画定时器知识总结
Mar 23 #Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 #Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 #Javascript
浅谈Webpack 持久化缓存实践
Mar 22 #Javascript
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
非主流的textarea自增长实现js代码
2011/12/20 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
require.js中的define函数详解
2017/07/10 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python海龟绘图实例教程
2014/07/24 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python中return语句用法实例分析
2015/08/04 Python
python目录与文件名操作例子
2016/08/28 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
模具设计与制造专业自荐书
2014/07/01 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
药店营业员岗位职责
2015/04/14 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python