用es5實現(xiàn)es8(一)

es8問世想必各位小伙伴都特別興奮,但在低版本的瀏覽器中無法使用又讓人很懊惱,既然這些功能這么棒,那就果斷在自己的項目中實現(xiàn)一套吧。

字符串填充

首先是padStart(padEnd)方法,以下是我寫出的第一個版本,它存在了一個問題,沒有做參數(shù)類型處理。

String.prototype._padEnd = function(n, str) {
    var temp = '',
        pad = '',
        padArr = [];
    //第二個參數(shù)可選,沒有的話默認傳入' '
    if(arguments.length === 1) {
        str = ' ';
    } else {
        if(typeof str === 'string') {
            str = str;
        } else if(typeof str === 'number') {
            str = '' + str;
        } else {
            str = '';
        };    
    }
    if(str.length > n) {
        pad = str.substring(0,n);
    } else {
        for(var i = 0; i < n/str.length; i++) {
            padArr.push(str);
        }
        pad = padArr.join('') + str.substring(0,n%str.length)
    }
    return this + pad;
}

接下來是第二個版本,修補了上個版本發(fā)現(xiàn)的問題

String.prototype._padEnd = function(n, str) {
    var temp = '',
        pad = '',
        padArr = [];
    if(isNaN(arguments[0])) {
        return this.toString();
    }
    if(!arguments.length) {
        return this.toString();
    }
    arguments.length === 1 ? str = ' ' : str = str.toString();
    if(str.length > n) {
        pad = str.substring(0,n);
    } else {
        var count = Math.floor(n/str.length);
        while(count--) {
            padArr.push(str);
        }
        pad = padArr.join('') + str.substring(0,n%str.length)
    }
    return this + pad;
}

對象值遍歷

Object.values()這個方法返回一個對象可枚舉的屬性值

Object.prototype._values = function(obj) {
    var _arr = [];
    for(var key in obj) {
        _arr.push(obj[key]);    
    }
    return _arr;
}

這個方法存在一個問題,每次調(diào)用都會多輸出一個function對象,不難發(fā)現(xiàn),這個function對象正好是_values這個方法,由于for in會遍歷出所有可枚舉的屬性,在創(chuàng)建_values方法的時候它的特性enumerable(可枚舉)默認為true,這時候可以使用hasOwnProperty這個方法來判斷當前遍歷的屬性是否是自有屬性。

Object.prototype._values = function(obj) {
    var _arr = [];
    for(var key in obj) {
        if(obj.hasOwnProperty(key)) {
            _arr.push(obj[key]);
        }
    }
    return _arr;
}

Object.entries()這個方法返回某個對象的可枚舉屬性與對應值的二維數(shù)組

這個方法與Object.values()方法類似,小伙伴們可以當做練習。

Object.prototype._entries = function(obj) {
    var _arr = [];
    for(var key in obj) {
        if(obj.hasOwnProperty(key)) {
            _arr.push([key,obj[key]]);
        }
    }
    return _arr;
}
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內(nèi)部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,754評論 18 399
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,268評論 0 4
  • 屬性的簡潔表示法 ES6允許直接寫入變量和函數(shù),作為對象的屬性和方法。這樣的書寫更加簡潔。 上面代碼表明,ES6允...
    呼呼哥閱讀 2,946評論 0 2
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,868評論 18 139
  • 第一章 陳蕓在內(nèi)衣店里挑選了好一會兒,最終選擇那條黑色的。她不喜歡黑色,可她知道家明喜歡。他說過她穿黑色內(nèi)衣很性感...
    曹靜鄭州閱讀 2,210評論 33 44