首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 五大常见函数

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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
肯尼亚购物网站(2) 阿根廷购物网站(9) 比利时购物网站(33) 台湾购物网站(77) 澳大利亚购物网站(309) 意大利购物网站(128) 挪威购物网站(7) 法国购物网站(144) 丹麦购物网站(22) 瑞典购物网站(55)
You might like
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
详解angular2 控制视图的封装模式
2018/12/27 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
介绍Python中的一些高级编程技巧
2015/04/02 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
新驾驶员个人自我评价
2014/01/03 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
广播节目策划方案
2014/05/23 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
作风建设年度心得体会
2014/10/29 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
红旗渠导游词
2015/02/09 职场文书
年会主持人开场白台词
2015/05/29 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript