Maison >interface Web >js tutoriel >Comment implémenter une carte native en js

Comment implémenter une carte native en js

王林
王林avant
2020-03-26 10:12:302869parcourir

Comment implémenter une carte native en js

Implémentation de la carte de méthode native JS, le code est le suivant :

<!DOCTYPE html>
<html>

<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 !== &#39;function&#39;) {
        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>

(Tutoriel recommandé : Tutoriel js)

Points de connaissances supplémentaires :

Nous utilisons généralement la méthode de la carte encapsulée. Si nous encapsulons nous-mêmes une carte, comment devons-nous la mettre en œuvre.

Le même principe reste vrai. En fait, le cœur du parcours d'un tableau est la boucle for. Par conséquent, une méthode cartographique est résumée ci-dessous.

L'idée est la suivante :

1. Ajouter une méthode sur le prototype

2. Passer une fonction et cela

3. Les paramètres passés par la méthode d'appel sont les mêmes que ceux de la méthode map encapsulée.

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;
}

Tutoriel vidéo recommandé :

Tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer