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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
原生js二级联动效果
Jun 20 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
javascript Canvas动态粒子连线
Jan 01 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
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
解析PHP提交后跳转
2013/06/23 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python的继承知识点总结
2018/12/10 Python
Python高斯消除矩阵
2019/01/02 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
小学门卫岗位职责
2013/12/17 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
商业计划书范文
2019/04/24 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL