js原生map实现的方法总结
2020-02-13 11:05
756 查看
js原生方法map实现
<!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>
补充知识点
我们平时用的是已经封装好的map方法,如果让我们自己封装一个map,应该如何实现。
万变不离其宗,其实遍历数组的核心还是for循环。因此下面封装一个map方法。
思路:
1.在原型上添加一个方法
2.传一个函数和this
3.call 方法传的参数和封装好的map方法的参数是一样的。
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; }
以上就是本次介绍的全部相关知识点,如果大家有任何补充可以联系脚本之家的小编。
您可能感兴趣的文章:
相关文章推荐
- 使用原生js实现map方法
- JS-原生代码或方法实现特定效果总结(更新中...)
- javascript(js)自动刷新页面的实现方法总结
- JS原生方法实现jQuery的ready()
- js中实现继承6种方法总结
- JavaScript Tag标签切换实现的几种方法 原生js + jquery
- Js实现限制文本框只能输入字母或数字的方法总结
- 原生JS实现元素的getElementsByClassName()方法,适用于多个类名
- JavaScript之JS原生方法实现jQuery的ready()
- JS实现Map,利用JS原生特性(上一篇是仿Java)
- 原生Js 两种方法实现页面关键字高亮显示(2)
- JS原生方法实现jQuery的ready()
- JS原生方法实现瀑布流布局
- 用原生js实现addClass,removeClass,hasClass方法
- 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法
- js---原生JS数组arr遍历方法forEach()和map()遍历的区别以及兼容写法
- JS数字千分位格式化实现方法总结
- javascript(js)自动刷新页面的实现方法总结
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- JS原生方法实现jQuery的ready()