js原生map实现的方法总结

前端之家收集整理的这篇文章主要介绍了js原生map实现的方法总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

js原生方法map实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <Meta charset="UTF-8">
  6. <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <Meta name="author" content="杨欣">
  9. <title>map</title>
  10. </head>
  11.  
  12. <body>
  13.  
  14. <script>
  15. Array.prototype.my_map = function (callback) {
  16. if (!Array.isArray(this) || !this.length || typeof callback !== 'function') {
  17. return []
  18. } else {
  19. let result = [];
  20. for (let index = 0; index < this.length; index++) {
  21. const element = this[index];
  22. result.push(callback(element,index,this))
  23. }
  24. return result
  25. }
  26. }
  27.  
  28. let arr = [1,2,3,4,5]
  29. let res = arr.my_map((ele,i) => {
  30. return ele + 10
  31. })
  32. console.log(res)
  33. </script>
  34. </body>
  35.  
  36. </html>

补充知识点

我们平时用的是已经封装好的map方法,如果让我们自己封装一个map,应该如何实现。

万变不离其宗,其实遍历数组的核心还是for循环。因此下面封装一个map方法

思路:

1.在原型上添加一个方法
2.传一个函数和this
3.call 方法传的参数和封装好的map方法的参数是一样的。

  1. Array.prototype.fakeMap = function(fn,context) {
  2. let arr = this;
  3. let temp = [];
  4. for(let i=0;i<arr.length;i++){
  5. let result = fn.call(context,arr[i],i,arr);
  6. temp.push(result);
  7. }
  8. return temp;
  9. }

以上就是本次介绍的全部相关知识点,如果大家有任何补充可以联系我们的小编。

猜你在找的JavaScript相关文章