您好,登錄后才能下訂單哦!
小編給大家分享一下JS怎么模擬實(shí)現(xiàn)ECMAScript5新增的數(shù)組方法,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
ECMAScript5 新增了十個(gè)數(shù)組方法,這些方法只有在ie9及以上瀏覽器中可以被使用,下面是對(duì)于這些方法的模擬實(shí)現(xiàn)。
一、Array.isArray(element)
該方法用于判斷傳入的對(duì)象是否為數(shù)組類型,返回true和false。
Array.newIsArray = function(element){ return Object.prototype.toString.call(element).slice(8,-1).toLocaleLowerCase() === 'array'; }
二、.indexOf(element)
該方法用于查找傳入對(duì)象在數(shù)組中的位置,并返回該位置,若沒有找到則返回-1,該方法不能用于尋找undefined。
indexOf方法可以和~符配合使用。按位運(yùn)算符~會(huì)將傳入數(shù)字取反并減一,所以-1就會(huì)變成0,這時(shí)候把它放在判斷條件中會(huì)被隱式轉(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ù)為一個(gè)回調(diào)函數(shù),有三個(gè)傳參:當(dāng)前元素、當(dāng)前元素索引、整個(gè)數(shù)組,該方法會(huì)跳過保留缺失成員,不會(huì)破壞原數(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時(shí),every方法返回true,否則返回false。該方法會(huì)跳過保留缺失成員,不會(huì)破壞原數(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時(shí),some方法返回true,否則返回false。該方法會(huì)跳過保留缺失成員,不會(huì)破壞原數(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)容組成一個(gè)新的數(shù)組,該方法會(huì)跳過空元素,但是最終結(jié)果保留缺失成員的位置,不會(huì)破壞原數(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ù)組,最終返回一個(gè)新數(shù)組,該數(shù)組中包含所有回調(diào)函數(shù)返回true的元素,不會(huì)破壞原數(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ù)組,返回最后一個(gè)回調(diào)函數(shù)調(diào)用的返回值,跳過缺失成員,不會(huì)破壞原數(shù)組?!?br/>
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; }))
看完了這篇文章,相信你對(duì)“JS怎么模擬實(shí)現(xiàn)ECMAScript5新增的數(shù)組方法”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。