用es5实现es8(一)

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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,839评论 18 399
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,281评论 0 4
  • 属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 上面代码表明,ES6允...
    呼呼哥阅读 2,956评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,268评论 19 139
  • 第一章 陈芸在内衣店里挑选了好一会儿,最终选择那条黑色的。她不喜欢黑色,可她知道家明喜欢。他说过她穿黑色内衣很性感...
    曹静郑州阅读 2,250评论 33 47