當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/10 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 ES5 数组扩展方法 forEach/filter/map的使用与重写小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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的使用与重写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CentOS 7.4 64位 .tar.
下一篇：惠普HP CM1312nfi彩色激光打印