ES3 splice slice join sort （IE5、IE6）
数组扩展方法 ES5（在ES3的基础上增加、修正）

forEach

可能会改变原数组(直接操作了arr[i]，没有使用深拷贝)
参数1：回调函数（如果不使用箭头函数，则内部this指向window）
参数2：用来改变参数1内部的this指向，和call一样，null/undefined指向window，原始值会被包装

data.forEach(function (ele, index, array) {this[index].innerHTML = ele.course
}, oLI)

重写forEach

思路

function myForEach(callback, obj) {var arr = thisfor (var i = 0; i < arr.length; i++) {callback.call(obj, arr[i], i, arr)}
}
Array.prototype.myForEach = myForEach
// 注意：要改变this指向，不能写箭头函数
arr.myForEach(function (ele, index, array) {console.log(this.name, ele, index, array)
}, { name: 1 })

filter 筛选、过滤

可能会改变原数组
返回一个新的数组
思路，回调函数return true时，将元素添加到数组
所以，都不符合的情况下，filter会返回空数组

var arr = [{ name: 'Stephy Huang' },{ name: 'William Wong' },{ name: 'Jessica Jung' },{ name: 'Krystal Jung' },
]
function myFilter(callback) {var obj = arguments[1]
var arr = this
var resArr = []
for (var i = 0; i < arr.length; i++) {if (callback.call(obj, arr[i], i, arr)) {resArr.push(arr[i])}
}return resArr
}
Array.prototype.myFilter = myFilter
var res = arr.myFilter(function (ele, index, array) {return ele.name.includes('Jung')
})
console.log(res)

重写时进行优化：使用深拷贝，否则操作newArr，会改变原数组arr；或是直接在callback修改ele，也会修改arr
深拷贝同样可以用于map方法的重写优化

map

可能会改变原数组
思路，将callback的返回值加入数组，最终返回数组

var arr = [{ name: 'Stephy Huang' },{ name: 'William Wong' },{ name: 'Jessica Jung' },{ name: 'Krystal Jung' },
]
function myMap(callback) {var obj = arguments[1]var arr = thisvar resArr = []for (var i = 0; i < arr.length; i++) {var item = arr[i]var res = callback.call(obj, item, i, arr)resArr.push(res)}return resArr
}
Array.prototype.myMap = myMap
var res = arr.myMap(function (ele, index, array) {if (ele.name.includes('Jung')) {return ele}// 对于不符合条件的，函数默认return undefined
})
console.log(arr)
console.log(res)

练习

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p class="J_nav"><a href="javascript:;" data-field="all">全部小说</a><a href="javascript:;" data-field="free">免费小说</a><a href="javascript:;" data-field="vip">vip小说</a></p><ul class="J_list"></ul><div id="J_data" style="display: none;">[{"id":1,"name":"飞狐外传","chargeFlag":0},{"id":2,"name":"雪山飞狐","chargeFlag":0},{"id":3,"name":"连城诀","chargeFlag":0},{"id":4,"name":"天龙八部","chargeFlag":1},{"id":5,"name":"射雕英雄传","chargeFlag":1},{"id":6,"name":"白马啸西风","chargeFlag":0},{"id":7,"name":"鹿鼎记","chargeFlag":1}]</div><script type="text/html" id="J_tpl"><li>{{name}}</li></script><script type="text/javascript">// 模块化; (function () {// onload  = init;// init → 点击事件var oNav = document.getElementsByClassName('J_nav')[0],oList = document.getElementsByClassName('J_list')[0],data = JSON.parse(document.getElementById('J_data').innerHTML),tpl = document.getElementById('J_tpl').innerHTML;var init = function () {bindEvent()oList.innerHTML = renderList(filterData('all'))}function bindEvent() {oNav.addEventListener('click', navClick, false)}function navClick(e) {var e = e || window.event,tar = e.target || e.srcElement,tagName = tar.tagName.toLowerCase();if (tagName === 'a') {var field = tar.getAttribute('data-field')oList.innerHTML = renderList(filterData(field))}}function filterData(field) {var chargeFlagswitch (field) {case 'free':chargeFlag = 0break;case 'vip':chargeFlag = 1break;default:break;}return data.filter((ele) => {return typeof chargeFlag !== 'undefined' ? ele.chargeFlag === chargeFlag : true})}function renderList(data) {var list = ''data.forEach((item) => {list += tpl.replace(/{{(.*?)}}/g, function (node, key) {return {name: item.name}[key]})})return list}init()})()</script>
</body></html>

ES5 数组扩展方法 forEach/filter/map的使用与重写相关推荐

数组中的forEach和map的区别
大多数情况下,我们都要对数组进行遍历,然后经常用到的两个方法就是forEach和map方法. 先来说说它们的共同点相同点都是循环遍历数组中的每一项 forEach和map方法里每次执行匿名函数都支 ...
Swift 基础高阶函数 forEach filter map compactMap compactMapValues flatMap reduce sort sorted shuffled ...
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
***PHP 遍历数组的方法foreach
foreach http://php.net/manual/zh/control-structures.foreach.php (PHP 4, PHP 5) foreach 语法结构提供了遍历数组的 ...
js笔记（三）ES5、ES5新增的数组的方法、字符串的方法、字符编码、对象的序列化和反序列化、bind
数组方法.字符串方法总结大目录小目录一.ES5严格模式 1. 严格模式: 2. 严格模式的行为变更: 二.ES5新增的数组的方法 1. 判断是否为数组:Array.isArray(): 2. 判 ...
js数组合并es5和es6方法
es5数组合并方法 var a1[2,2,3]; var a2[4,4,4]; a1.concat(a2); //[2,2,3,4,4,4] es6合并数组 var a1[2,2,3]; var a2 ...
javascript操作数组的方法大全
javascript操作数组的方法大全一.ES5数组的方法 1.Array.isArray() 用来判断是否为数组 var arr = [1, 2, 3, 4, 5]; var obj = {}; ...
splice方法_[7000字]JavaScript数组所有方法基础总结
基础决定一个人的上限,很多时候我们感叹别人在实现一个功能时使用方法的精妙,并且反思,为什么别人想的出来自己却想不出来?我觉得主要是因为对于基础的掌握上有很大的差距.本文总结数组的所有方法的基础使用,希 ...
从零开始学前端：字符串和数组的方法 --- 今天你学习了吗？（JS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:作用域.执行顺序 - 今天你学习了吗?(JS:Day9) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
JavaScript 数组遍历方法的对比
前言 JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句代码: var ...

ES5 数组扩展方法 forEach/filter/map的使用与重写

forEach

重写forEach

filter 筛选、过滤

map

练习

ES5 数组扩展方法 forEach/filter/map的使用与重写相关推荐

最新文章

热门文章