JS模擬實現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個數(shù)組方法,這些方法只有在ie9及以上瀏覽器中可以被使用,下面是對于這些方法的模擬實現(xiàn)。
一、Array.isArray(element)
該方法用于判斷傳入的對象是否為數(shù)組類型,返回true和false。
Array.newIsArray = function(element){ return Object.prototype.toString.call(element).slice(8,-1).toLocaleLowerCase() === 'array'; }
二、.indexOf(element)
該方法用于查找傳入對象在數(shù)組中的位置,并返回該位置,若沒有找到則返回-1,該方法不能用于尋找undefined。
indexOf方法可以和~符配合使用。按位運算符~會將傳入數(shù)字取反并減一,所以-1就會變成0,這時候把它放在判斷條件中會被隱式轉(zhuǎn)換為false。
Array.prototype.newIndexOf = function(element){ var index = -1; for(var i = 0; i < this.length; i++){ if(this[i] === element && this[i] !== undefined){ index = i; break; } } return index; }; var a = [1,2,3,4,,,5]; console.log(a.newIndexOf(undefined));
三、lastIndexOf(element)
該方法與indexOf(element)作用和返回值相同,唯一不同的地方是它是從右向左尋找。
Array.prototype.newLastIndexOf = function(element){ var index = -1; for(var i = this.length - 1; i >= 0; i--){ if(this[i] === element && this[i] !== undefined){ index = i; break; } } return index; }; var a = [1,2,3,4,5,2,,,3]; console.log(a.newLastIndexOf(undefined));
四、forEach(function(element, index, array){})
遍歷數(shù)組,參數(shù)為一個回調(diào)函數(shù),有三個傳參:當(dāng)前元素、當(dāng)前元素索引、整個數(shù)組,該方法會跳過保留缺失成員,不會破壞原數(shù)組。
Array.prototype.newForEach = function(fn){ for(var i = 0; i < this.length; i++){ if(i in this){ fn(this[i], i, this); } } }; var a = [1,2,3,undefined,undefined,4,5,2,3]; a.forEach(function(e, i, arr){ console.log(e, i, arr); })
五、every(function(element, index, array){})
使用傳入的回調(diào)函數(shù)遍歷數(shù)組,當(dāng)所有回調(diào)都返回true時,every方法返回true,否則返回false。該方法會跳過保留缺失成員,不會破壞原數(shù)組。
Array.prototype.newEvery = function(fn){ var status = true; for(var i = 0; i < this.length; i++){ if(i in this){ if(!(status = !!fn(this[i], i, this))){ break; } } } return status; }; var a = [1,2,3,4,5,2,undefined,,3]; console.log(a.newEvery(function(){ console.log(arguments); return 1; }));
六、some(function(element, index, array){})
使用傳入的回調(diào)函數(shù)遍歷數(shù)組,當(dāng)有回調(diào)返回true時,some方法返回true,否則返回false。該方法會跳過保留缺失成員,不會破壞原數(shù)組。
Array.prototype.newSome = function(fn){ var status = false; for(var i = 0; i < this.length; i++){ if(i in this){ if(status = !!fn(this[i], i, this)){ break; } } } return status; }; var a = [1,2,3,4,5,2,undefined,,3]; console.log(a.newSome(function(){ console.log(arguments); return 0; }));
七、map(function(element, index, array){})
使用傳入的回調(diào)函數(shù)遍歷數(shù)組,使用遍歷數(shù)組返回的內(nèi)容組成一個新的數(shù)組,該方法會跳過空元素,但是最終結(jié)果保留缺失成員的位置,不會破壞原數(shù)組。
Array.prototype.newMap = function(fn){ var array = new Array(this.length); for(var i = 0; i < this.length; i++){ if(i in this){ array[i] = fn(this[i], i, this); } } return array; }; var a = [1,2,3,4,5,2,undefined,,3]; console.log(a.newMap(function(element, index, array){ console.log(arguments); return element; }))
八、filter(function(element, index, array){})
使用傳入的回調(diào)函數(shù)遍歷數(shù)組,最終返回一個新數(shù)組,該數(shù)組中包含所有回調(diào)函數(shù)返回true的元素,不會破壞原數(shù)組。
Array.prototype.newFilter = function(fn){ var array = []; for(var i = 0; i < this.length; i++){ if((i in this) && fn(this[i], i, this)){ array.push(this[i]); } } return array; }; var a = [1,2,3,4,5,2,undefined,,3]; console.log(a.newFilter(function(element, index, array){ console.log(arguments); return element; }))
九、reduce(function(accumulator, currentValue, currentIndex, array){})
使用傳入的回調(diào)函數(shù)遍歷數(shù)組,返回最后一個回調(diào)函數(shù)調(diào)用的返回值,跳過缺失成員,不會破壞原數(shù)組。
Array.prototype.newReduce = function(fn){ if(this.length === 0){ throw new TypeError('Reduce of empty array with no initial value'); } var result; for(var i = 0; i < this.length; i++){ if(i in this){ if(!result){ result = this[i]; }else{ result = fn(result, this[i], i, this); } } } return result; }; var a = [,,1,2,3,4,,6,7]; console.log(a.newReduce(function(a,b){ console.log(arguments); return a + b; }))
十、reduceRight(function(accumulator, currentValue, currentIndex, array){})
該方法作用于reduce相同,唯一區(qū)別是它是從右往左開始遍歷。
Array.prototype.newReduceRight = function(fn){ if(this.length === 0){ throw new TypeError('Reduce of empty array with no initial value'); } var result; for(var i = this.length - 1; i >= 0; i--){ if(i in this){ if(!result){ result = this[i]; }else{ result = fn(result, this[i], i, this); } } } return result; }; var a = [,,1,2,3,4,,6,7]; console.log(a.newReduceRight(function(a,b){ console.log(arguments); return a + b; }))
以上所述是小編給大家介紹的JS模擬實現(xiàn)ECMAScript5新增的數(shù)組方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript 上萬關(guān)鍵字瞬間匹配實現(xiàn)代碼
發(fā)一篇之前寫的文章,平時還是經(jīng)常用到的,尤其是河蟹詞特別多的聊天系統(tǒng)里2013-07-07JavaScript獲取radio選中值的幾種常用方法小結(jié)
這篇文章主要介紹了JavaScript獲取radio選中值的幾種常用方法,結(jié)合實例形式總結(jié)分析了javascript獲取radio選中值的常見實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2023-06-06JS實現(xiàn)無縫循環(huán)marquee滾動效果
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)無縫循環(huán)marquee滾動效果,兼容IE, FireFox, Chrome,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05