JavaScript精華筆記:ES5陣列新增函式的原始碼實現(2)
阿新 • • 發佈:2018-12-15
本系列文章中,對forEach、filter、map、every、some、reduce和reduceRight等函式,講述瞭如何自己編寫程式碼實現它們的功能。
通過閱讀原始碼,自己編寫原始碼,能瞭解編寫思想、熟悉設計模式,能鍛鍊自己編寫元件、框架的能力。
接上篇文章內容,這裡繼續討論如何封裝自己的map、every、some函式。
實現map 原始碼編寫
map() 方法的作用是:返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。map() 方法按照原始陣列的元素順序依次處理元素。
map方法翻譯叫做“對映”,但這個翻譯個人覺得不準確。它的基本用法跟forEach方法類似。
注意:
- map() 不會對空陣列進行檢測。
- map() 不會改變原始陣列。
其語法規則為:
array.map(function(currentValue,index,arr), thisValue)
名詞解釋:
- currentValue 必選。當前元素的值
- index 可選。當前元素的索引值
- arr 可選。當前元素屬於的陣列物件
- thisValue 可選。物件作為該執行回撥時使用,傳遞給函式,用作 “this” 的值。
原始碼編寫
Array.prototype.myMap = function (func) {
var arr = [];
var len = this.length;
var _this = arguments[1] || window;
for (var i = 0; i < len; i++) {
arr.push(func.apply(_this, [this[i], i, this]));
}
return arr;
};
實現every 和 some原始碼編寫
every()和some()方法的作用很簡單,前者是全真才為真,一假則為假,後者則是一真則真,全假則為假。
every() 方法:用於檢測陣列所有元素是否都符合指定條件(條件通過函式提供),使用指定的函式檢測陣列中的所有元素:
- 如果陣列中檢測到有一個元素不滿足,則整個表示式返回 false ,且剩餘的元素不會再進行檢測。
- 如果所有元素都滿足條件,則返回 true。
注意
- every() 不會對空陣列進行檢測。
- every() 不會改變原始陣列。
它的語法規則為:
array.every(function(currentValue,index,arr), thisValue)
原始碼編寫如下,都有用到apply函式來改變this指向:
Array.prototype.myevery = function (func) {
var flag = true;
var len = this.length;
var _this = arguments[1] || window;
for (var i = 0;i < len; i++){
if(func.apply(_this,[this[i],i,this]) == false){
flag = false;
break;
}
}
return flag;
};
some()方法:方法用於檢測陣列中的元素是否滿足指定條件(函式提供)。它會依次執行陣列的每個元素:
- 如果有一個元素滿足條件,則表示式返回true, 剩餘的元素不會再執行檢測。
- 如果沒有滿足條件的元素,則返回false。
總結下來就是 :一真則真,全假則為假。
所以其原始碼就相對於every做一點小變動就行了:
Array.prototype.mySome = function (func) {
var flag = false;
var len =this.length;
var _this = arguments[1];
for (var i = 0;i < len;i ++){
if (func.apply(_this,[this[i],i,this]) == true){
flag = true;
break;
}
}
return flag;
};
三個陣列方法原始碼編寫如上,供參考。