js原生map實現(xiàn)的方法總結
js原生方法map實現(xiàn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="author" content="楊欣"> <title>map</title> </head> <body> <script> Array.prototype.my_map = function (callback) { if (!Array.isArray(this) || !this.length || typeof callback !== 'function') { return [] } else { let result = []; for (let index = 0; index < this.length; index++) { const element = this[index]; result.push(callback(element, index, this)) } return result } } let arr = [1, 2, 3, 4, 5] let res = arr.my_map((ele, i) => { return ele + 10 }) console.log(res) </script> </body> </html>
補充知識點
我們平時用的是已經(jīng)封裝好的map方法,如果讓我們自己封裝一個map,應該如何實現(xiàn)。
萬變不離其宗,其實遍歷數(shù)組的核心還是for循環(huán)。因此下面封裝一個map方法。
思路:
1.在原型上添加一個方法
2.傳一個函數(shù)和this
3.call 方法傳的參數(shù)和封裝好的map方法的參數(shù)是一樣的。
Array.prototype.fakeMap = function(fn,context) { let arr = this; let temp = []; for(let i=0;i<arr.length;i++){ let result = fn.call(context,arr[i],i,arr); temp.push(result); } return temp; }
以上就是本次介紹的全部相關知識點,如果大家有任何補充可以聯(lián)系腳本之家的小編。
相關文章
微信小程序城市定位的實現(xiàn)實例(獲取當前所在國家城市信息)
這篇文章給大家認真介紹了微信小程序城市定位的實現(xiàn)實例,主要實現(xiàn)了獲取當前所在國家城市信息的相關資料,文中介紹的非常詳細,相信對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-05-05在JavaScript中使用inline函數(shù)的問題
在JavaScript中使用inline函數(shù)的問題...2007-03-03layui實現(xiàn)圖片虛擬路徑上傳,預覽和刪除的例子
今天小編就為大家分享一篇layui實現(xiàn)圖片虛擬路徑上傳,預覽和刪除的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript使用concat連接數(shù)組的方法
這篇文章主要介紹了JavaScript使用concat連接數(shù)組的方法,實例分析了javascript中concat函數(shù)操作數(shù)組的技巧,需要的朋友可以參考下2015-04-04JavaScript中var let const的用法有哪些區(qū)別
在ES6(ES2015)出現(xiàn)之前,JavaScript中聲明變量就只有通過var關鍵字,函數(shù)聲明是通過function關鍵字,而在ES6之后,聲明的方式有var、let、const、function、class,本文主要討論var、let和const之間的區(qū)別2021-10-10CutePsWheel javascript libary 控制輸入文本框為可使用滾輪控制的js庫
實現(xiàn)類似于Photoshop控制面板輸入文本數(shù)字的效果,所以名稱叫做PsWheel。用于控制輸入數(shù)字類型文本框實現(xiàn)鼠標滾輪上下滑動改變值,支持正整數(shù)、小數(shù)類型輸入文本。2010-02-02