源码中值得借鉴的一些函数

文章目录

数据类型判断利用闭包构造map缓存数据二维数组扁平化方法拦截、函数劫持

数据类型判断

Object.prototype.toString.call()返回的结果为[object,数据类型]，截取第8位到倒数第1位，可以得到数据类型

function toRawType(value){ return Object.prototype.toString.call(value).slice(8,-1) } //执行结果 toRawType(1)//Number toRawType(true)//Boolean toRawType("abc")//String toRawType([])//Array toRawType({})//Object toRawType(function(){})//Function toRawType(undefined)//Undefined toRawType(null)//Null

利用闭包构造map缓存数据

在判断某一值是否在数组中存在时，如果用数组类遍历那么将要循环很多次获取结果，如果把数组转为对象，把标签名设置为对象的key，那么不用依次遍历查找，只需要查找一次就能获取结果，提高了查找效率。

function makeMap(str,expectsLowerCase){ //构建闭包集合map var map = Object.create(null) var list = str.split(',') for(var i = 0; i < list.length; i++){ map[list[i]] = true } return expectsLowerCase ? function(val){return map[val.toLowerCase()]} : function(val){return map[val]} } var isHTMLTag = makeMap('html,body,base,head,link,meta,style,title') console.log('res',isHTMLTag('body'))//true

tips：闭包为什么能缓存数据？ “闭包” 一词来源于以下两者的结合：要执行的代码块（由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（作用域）。 闭包是函数以及函数所处的环境的一个集合体，是一个受保护的空间 工作中，遇到大规模的前端常量数据或接口请求到的数据，可以将其置于闭包中进行缓存 斐波那契等递归调用函数中，使用闭包进行缓存，可以减少代码执行次数，极大的提升效率

var feibonaqi = (function(){ var cache = [] return function(num){ if(num==0||num==1){ cache[num] = 1 return 1; } if(cache[num]){ return cache[num] }else{ cache[num] = feibonaqi(num-1)+feibonaqi(num-2) return cache[num] } } })() console.log(feibonaqi(20))

闭包实现让函数只执行一次

function once(fn){ var called = false; return function(){ if(!called){ called = true fn.apply(this,arguments) } } } function fn(){ console.log(1111) } var click = once(fn) click() click()

二维数组扁平化

function simpleArray(arr){ for(var i = 0; i < arr.length; i++){ if(Array.isArray(arr[i])){ return Array.prototype.concat.apply([],arr) } } return arr /* es6写法 return [].concat(...arr) */ } console.log(simpleArray([1,[2,[3,[4]],5]]))//[1,2,[3,[4]],5]

方法拦截、函数劫持

重写方法，然后将原型指回原方法

var ARRAY_METHOD = [ 'push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice' ]; var array_methods = Object.create(Array.prototype) ARRAY_METHOD.forEach(method=>{ array_methods[method] = function(){ //拦截方法 console.log('调用的是拦截的 ' + method + ' 方法，进行相关处理'); return Array.prototype[method].apply(this,arguments) } }) var arr = [1,2,3] arr.__proto__ = array_methods arr.push(4)