web前端自定義函數工具庫

時間 2021-07-22

標籤 javascript java 數組 app 函數測試 this spa prototype 欄目 HTML 简体版

原文原文鏈接

一、call函數封裝實現

// 手寫call函數 function call(Fn,obj,...arg){ // 若是obj爲null或者undefined，則指向window if(obj === undefined || obj === null){ // globalThis是ES11的新特性，指向全局 obj = globalThis } //爲obj添加臨時方法 obj.temp = Fn // 調用 temp 方法 let result = obj.temp(...arg) // 刪除obj 的 temp delete obj.temp return result } function add(a,b){ console.log(this); return a + b + this.c } let obj = { c:521 } globalThis.c = 1314 console.log(call(add,obj,10,20)); //551 console.log(call(add,null,10,20)); //1344

// 手寫call函數 Function.prototype.call = function(obj,...arg){ // 若是obj爲null或者undefined，則指向window if(obj === undefined || obj === null){ // globalThis是ES11的新特性，指向全局 obj = globalThis } //爲obj添加臨時方法 obj.temp = this // 調用 temp 方法 let result = obj.temp(...arg) // 刪除obj 的 temp delete obj.temp return result } function add(a,b){ console.log(this); return a + b + this.c } let obj = { c:521 } globalThis.c = 1314 console.log(add.call(obj,10,20)); //551 console.log(add.call(null,10,20)); //1344

二、apply函數封裝實現

// 手寫apply函數 Function.prototype.apply = function(obj,arg){ if(obj === null || obj === undefined){ obj = globalThis } obj.temp = this let result = obj.temp(...arg) delete obj.temp return result } function add(a,b){ console.log(a+b+this.c); } let obj = { c:1314 } globalThis.c = 520 add.apply(obj,[10,20]) //1344 add.apply(null,[10,20]) //550

三、bind函數封裝實現（bind不會馬上執行）

function bind(Fn,obj,...args){ if(obj === null || obj === undefined){ obj = globalThis } //bind返回一個函數，調用的時候執行方法 return function(...args2){ // 調用call方法 obj.temp = Fn let result = obj.temp(...args,...args2) delete obj.temp return result } } function add(a,b){ console.log(arguments); console.log(a+b+this.c); } let obj = { c:1314 } globalThis.c = 520 bind(add,obj,10,20)() //1344 bind(add,null,10,20)(30,40) //550

四、函數節流

throttle節流javascript

語法：throttle(callback,wait)java

功能：建立一個節流函數，在wait毫秒內最多執行callback一次數組

理解：在函數須要頻繁觸發時：函數執行一次後，只有大於設定的執行週期後纔會執行第二次，適合屢次事件按時間作平均分配觸發app

場景：窗口調整（resize）、頁面滾動（scroll）、DOM元素的拖拽功能實現（mousemove）、搶購瘋狂點擊（click）函數

<script> window.addEventListener(‘scroll‘,throttle(function(){ console.log(Date.now()); },500)) function throttle(callback,wait){ // 定義開始時間 let start = 0 // 返回結果是一個函數 return function(e){ let now = Date.now() if(now - start > wait){ callback.call(this,e) start = now } } } </script>

五、函數防抖

語法：debounce(callback,wait)測試

功能：建立一個防抖動函數，該函數會從上一次被調用後，延遲wait毫秒後調用callbackui

理解：觸發了一次函數會在延遲wait毫秒後調用callback，但再次點擊，會清空掉再次計算this

場景：input框輸入時spa

<body> <input type="text"> <script> let input = document.querySelector(‘input‘) // input.onkeydown = function(e){ // console.log(e.keyCode); // } input.onkeydown = debounce(function(e){ console.log(e.keyCode); },1000) function debounce(callback,time){ //定時器變量 let timeId = null // 返回值必定是個函數，不然沒法觸發回調 return function(e){ //timeId !== null 證實已經有一個timeif在跑，先清除掉再繼續跑 if(timeId !== null){ clearTimeout(timeId) } //啓動定時器 timeId = setTimeout(()=>{ callback.call(this,e) // 重置定時器變量 timeId = null },time) } } </script> </body>

六、數組函數map封裝實現

map（）方法建立一個新數組，其結果是該數組中的每一個元素是調用一次提供的函數後的返回值prototype

const arr = [1,2,3,4,5] Array.prototype.map = function (callback) { let result = [] for(let i = 0;i<this.length;i++){ result.push(callback(this[i],i)) } return result } let arr2 = arr.map((item,index) => { return item *10 }) console.log(arr2);

七、數組函數reduce封裝實現

reduce():從左到右爲每一個數組元素執行一次回調函數，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，並返回最後一次回調函數的返回值

const arr = [1,2,3,4,5] // 示例 let result = arr.reduce((res,value)=>{ return res + value },0) //0爲res初始值,value爲arr的值 console.log(result); //15 Array.prototype.reduce = function(callback,value){ let result = value for(let i = 0;i<this.length;i++){ result = callback(result,this[i]) } return result } // 演示 let arr2 = arr.reduce((res,value)=>{ return res + value },5) console.log(arr2);

八、數組函數filter封裝實現

filter()：將全部在過濾函數中返回true的數組元素放進一個新數組中而且返回

const arr = [1,2,3,4,5] Array.prototype.filter2 = function(callback){ let arr = [] for(let i = 0;i<this.length;i++){ if(callback(this[i],i)){ arr.push(this[i]) } } return arr } let res = arr.filter2((item=>{ return item > 2 })) console.log(res);

八、數組函數find封裝實現

find():找到第一個知足測試函數的元素並返回那個元素的值，若是找不到，則返回undefined

const arr = [1,2,3,2005,4,1001] // find() Array.prototype.find = function(callback){ for(let i = 0;i<this.length;i++){ if(callback(this[i],i)){ return this[i] } } return undefined } let res = arr.find((item=>{ return item > 3000 })) console.log(res);

九、數組函數findIndex封裝實現

findIndex():找到第一個知足測試函數的元素並返回那個元素的索引，若是找不到，則返回-1

// findIndex() Array.prototype.findIndex2 = function(callback){ for(let i = 0;i<this.length;i++){ if(callback(this[i],i)){ return i } } return -1 } let res = arr.findIndex2((item=>{ return item > 1000 })) console.log(res);

十、數組函數every封裝實現

every():若是數組中的每一個元素都知足測試函數，則返回true，不然返回false

const arr = [1,2,3,4,5] Array.prototype.every2 = function(callback){ for(let i = 0;i<this.length;i++){ let result = callback(this[i],i) if(!result){ return false; } } return true } const result = arr.every2(item=>{ return item > 0 }) console.log(result);

十一、數組函數some封裝實現

some():若是數組中至少有一個元素知足測試函數，則返回true，不然返回false

Array.prototype.some2 = function(callback){ for(let i = 0;i<this.length;i++){ let result = callback(this[i],i) if(result){ return true } } return false; } const result = arr.some2(item=>{ return item > 6 }) console.log(result);

十二、數組去重

方法1：利用foreach()和indexOf()

方法2：利用froecah() + 對象容器

方法3：利用ES6語法：from + Set 或者 ... + Set

const arr = [1,2,3,4,5,2,4] // 方法1 ：forEach + indexOf function unique(arr){ if(!Array.isArray(arr)){ return } let result = [] arr.forEach(item=>{ if(result.indexOf(item) === -1){ result.push(item) } }) return result } let result = unique(arr) console.log(result); // 方法2 forEach() + 對象容器 function unique2(arr){ let result = [] //聲明空對象 const obj = {} arr.forEach(item => { if(obj[item] === undefined){ obj[item] = true result.push(item) } }) console.log(obj); return result } let result2 = unique2(arr) console.log(result2); //方法3：利用ES6語法：from + Set 或者 ... + Set function unique3(arr){ return [...new Set(arr)] // let result = Array.from(new Set(arr)) // return result } let result3 = unique3(arr) console.log(result2);

1三、數組合並和切片

數組合並concat（）

let arr = [1,2,3] Array.prototype.concat2 = function(...args){ let result = [...this,...args] return result } const result = arr.concat2([4,5,6],7,8) console.log(result);

數組切片slice（）

Array.prototype.slice2 = function(begin,end){ if(this.length === 0){ return []; } //判斷begin begin = begin || 0 if(begin >= this.length){ return []; } //判斷end end = end || this.length if(end <begin){ end = this.length } let result = [] this.forEach((item,index)=>{ if(index >= begin && index < end){ result.push(item) } }) return result } let sliceResult = arr.slice2(1,6) console.log(sliceResult);

http://www.ssnd.com.cn 化妝品OEM代加工

1四、數組扁平化

語法：flatten(array)

取出嵌套數組（多維）中的全部元素放到一個新數組（一維）中

例如：[ 1,[ 3,[ 2,4 ]]] -> [1,2,3,4]

方法1：遞歸 + reduce() + concat()

方法2： ,,, + some() + concat()

let arr = [1,2,[3,4,[5,6]],7] // 方法1 function falttenl(arr){ let result = [] arr.forEach(item => { if(Array.isArray(item)){ result = result.concat(falttenl(item)) }else{ result = result.concat(item) } }); return result } console.log(falttenl(arr)); // 方法2 function flatten2(arr){ let result = [...arr] while(result.some(item => Array.isArray(item))){ result = [].concat(...result) } return result } console.log(flatten2(arr));