1. 程式人生 > >JavaScript精華筆記:ES5陣列新增函式的原始碼實現(2)

JavaScript精華筆記:ES5陣列新增函式的原始碼實現(2)

本系列文章中,對forEach、filter、map、every、some、reducereduceRight等函式,講述瞭如何自己編寫程式碼實現它們的功能。
通過閱讀原始碼,自己編寫原始碼,能瞭解編寫思想、熟悉設計模式,能鍛鍊自己編寫元件、框架的能力。
接上篇文章內容,這裡繼續討論如何封裝自己的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;
};

三個陣列方法原始碼編寫如上,供參考。