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>