购物网站模板 php,扬州网站建设公元国际,推广公司,搜索网站开发背景ES3 splice slice join sort #xff08;IE5、IE6#xff09; 数组扩展方法 ES5#xff08;在ES3的基础上增加、修正#xff09; forEach
可能会改变原数组(直接操作了arr[i]#xff0c;没有使用深拷贝)参数1#xff1a;回调函数#xff08;如果不使用箭头函数#xf… 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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyp classJ_nava hrefjavascript:; data-fieldall全部小说/aa hrefjavascript:; data-fieldfree免费小说/aa hrefjavascript:; data-fieldvipvip小说/a/pul classJ_list/uldiv idJ_data styledisplay: 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}]/divscript typetext/html idJ_tplli{{name}}/li/scriptscript typetext/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
