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

梦里梦外; 2022-12-17 05:27 160阅读 0赞

### 文章目录 ###

*   *  数据类型判断
     *  利用闭包构造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)