js原生map實(shí)現(xiàn)的方法總結(jié)

更新時(shí)間：2020年01月19日 11:48:33 作者：Samsara315

在本篇文章里小編給大家整理了關(guān)于js原生map實(shí)現(xiàn)的方法以及實(shí)例分析內(nèi)容，需要的朋友們可以參考下。

js原生方法map實(shí)現(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>

補(bǔ)充知識(shí)點(diǎn)

我們平時(shí)用的是已經(jīng)封裝好的map方法，如果讓我們自己封裝一個(gè)map，應(yīng)該如何實(shí)現(xiàn)。

萬變不離其宗，其實(shí)遍歷數(shù)組的核心還是for循環(huán)。因此下面封裝一個(gè)map方法。

思路：

1.在原型上添加一個(gè)方法
2.傳一個(gè)函數(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;
}

以上就是本次介紹的全部相關(guān)知識(shí)點(diǎn)，如果大家有任何補(bǔ)充可以聯(lián)系腳本之家的小編。

您可能感興趣的文章:

原生js
map

相關(guān)文章

JavaScript中閉包之淺析解讀(必看篇)
下面小編就為大家?guī)硪黄狫avaScript中閉包之淺析解讀(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
javascript檢測(cè)瀏覽器的縮放狀態(tài)實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript檢測(cè)瀏覽器的縮放狀態(tài)實(shí)現(xiàn)代碼,需要的朋友可以參考下
2014-09-09
JS 實(shí)現(xiàn)banner圖片輪播效果(鼠標(biāo)事件)
js實(shí)現(xiàn)banner圖片輪播效果，通過鼠標(biāo)點(diǎn)擊左右可切換圖片，具體實(shí)現(xiàn)代碼大家參考下本文
2017-08-08
學(xué)會(huì)javascript之迭代器
本文主要講解javascript之迭代器，在 JavaScript 中，迭代器是一個(gè)對(duì)象，它定義一個(gè)序列，并在終止時(shí)可能返回一個(gè)返回值。需要詳細(xì)了解相關(guān)知識(shí)的小伙伴可以參考一下這篇文章
2021-09-09
js使用DOM設(shè)置單選按鈕、復(fù)選框及下拉菜單的方法
這篇文章主要介紹了js使用DOM設(shè)置單選按鈕、復(fù)選框及下拉菜單的方法,較為詳細(xì)的分析了單選按鈕、復(fù)選框及下拉菜單的具體用法及實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
JavaScript 無縫上下左右滾動(dòng)加定高定寬停頓效果(兼容ie/ff)
JavaScript 指定寬度高度的無間斷滾動(dòng)實(shí)現(xiàn)代碼，這樣的效果適合作為焦點(diǎn)新聞的輪播顯示。
2010-03-03
游覽器中javascript的執(zhí)行過程(圖文)
在講這個(gè)問題之前，先來補(bǔ)充幾個(gè)知識(shí)點(diǎn)，如果對(duì)此已經(jīng)比較了解可以直接跳過
2012-05-05
在js中做數(shù)字字符串補(bǔ)0(js補(bǔ)零)
這篇文章主要介紹了在js中做數(shù)字字符串補(bǔ)0(js補(bǔ)零),需要的朋友可以參考下
2017-03-03
JavaScript requestAnimationFrame動(dòng)畫詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript requestAnimationFrame動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
JavaScript實(shí)現(xiàn)星級(jí)評(píng)分
本文主要分享了JavaScript實(shí)現(xiàn)星級(jí)評(píng)分的實(shí)例代碼，具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01