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 相关文章推荐
不同浏览器的怪癖小结
Jul 11 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
浅谈React Native 中组件的生命周期
Sep 08 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
深入了解JavaScript词法作用域
Jul 29 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
Cakephp 执行主要流程
2010/03/24 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
js随机生成一个验证码
2017/06/01 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
Python函数学习笔记
2008/10/07 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
毕业生造价工程师求职信
2013/10/17 职场文书
自荐信如何“自荐”
2013/10/24 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
学校食堂管理制度
2015/08/04 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
python神经网络Xception模型
2022/05/06 Python