用es5实现es8(一)

作者: sikoGG | 来源:发表于2017-07-21 16:59 被阅读0次

    es8问世想必各位小伙伴都特别兴奋,但在低版本的浏览器中无法使用又让人很懊恼,既然这些功能这么棒,那就果断在自己的项目中实现一套吧。

    字符串填充

    首先是padStart(padEnd)方法,以下是我写出的第一个版本,它存在了一个问题,没有做参数类型处理。

    String.prototype._padEnd = function(n, str) {
        var temp = '',
            pad = '',
            padArr = [];
        //第二个参数可选,没有的话默认传入' '
        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;
    }
    

    接下来是第二个版本,修补了上个版本发现的问题

    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;
    }
    

    这个方法存在一个问题,每次调用都会多输出一个function对象,不难发现,这个function对象正好是_values这个方法,由于for in会遍历出所有可枚举的属性,在创建_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()这个方法返回某个对象的可枚举属性与对应值的二维数组

    这个方法与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;
    }
    

    相关文章

      网友评论

        本文标题:用es5实现es8(一)

        本文链接:https://www.haomeiwen.com/subject/ahmekxtx.html