leftPad源码解读

这两天在看leftPad的源码,我觉得这代码写得真真是极好的,短短的几十行代码,我从中学到了不少好东西,所以迫不及待的想跟大家分享一下。leftPad一直被很多程序员不停的重构,不断的寻找提升性能的办法(这帮较真儿的程序员。。)。现在我们就直接看这段神秘的代码干了啥。

其实leftPad只是封装了一个这样的函数:

const leftPad = require('left-pad')

leftPad('foo', 5)
// => "  foo"

leftPad('foobar', 6)
// => "foobar"

leftPad(1, 2, '0')
// => "01"

leftPad(17, 5, 0)
// => "00017"

好了看到这里你肯定想说:“擦,这么简单?这代码还需要解读?坑我了吧!”
不要着急,听我慢慢说。我们先来想一下,如果我们不看他的源码,我们自己会怎么实现这个函数呢?首先,我们会去获取需要填充在左侧的pad的length是多少,然后去循环,将规定的填充字符一个一个的填充在左侧。按照这个思路,我们实现的代码是这样的:

function leftPad(str, len, ch){
  //将str转成string
  str = str + '';
  //获取左侧需要填充部分长度
  len = len - str.length;
  //如果len为负数则直接返回str
  if(len <= 0) return str;
  //如果我们没有给出ch参数,ch默认为一个空格
  if(!ch && ch !== 0) ch = '  ';
  //将ch转为字符串类型,因为有可能参数一个数值
  ch = ch + '';
  //开始循环len,将ch一个一个的添加到str的前面
  while(len--){
    str = ch + str;
  }
  return str;
}

因为要讨论这段代码的性能问题,所以不得不提一下,这里的循环时间复杂度是O(n),一次简单的循环嘛。
好了,看到这里,都跟我们平时实现一个函数的思路是一样的。但是精彩的就在他的源码的实现思路。
首先,leftPad的作者并没有从一开始就循环添加pad。而是将len<10的部分缓存在了一个数组里边,这里考虑到用户在使用时取10以下的len比较多,当len小于10的时候,就直接从这个cache数组中取值,那时间复杂度这里就是O(1)。代码如下:

var cache = [
  '',
  ' ',
  '  ',
  '   ',
  '    ',
  '     ',
  '      ',
  '       ',
  '        ',
  '         '
];

//函数中
function leftPad (str, len, ch) {
  //......前面部分和一般实现思路一样
  if (ch === ' ' && len < 10) return cache[len] + str;
}

那么大于10的呢?难道就开始原始的循环了么?没这么简单。想要提升性能,很容易想到的就是减少循环的次数,如果,我们不去改变len,那么,len的长度是多少,我们就得循环多少次,相应的ch就添加多少个pad。这里源码的实现思路是这样的,每次循环,len除以2,len变成了原来的一半,那么循环次数相应减少到原来的一半,那么ch相应应该增加到原来的两倍的长度ch=ch+ch,这样每次循环都将len减少到原来的一半。这样就将原本O(n)的复杂度减少到了O(log(n))。好了,直接看loop部分的代码:

while (true) {
  if (len & 1) pad += ch;
  len >>= 1;
  if (len) ch += ch;
  else break;
}

其实这里实现跟我说的是一样的,只是一般同学不怎么喜欢按位与和移位运算符这种操作。不管怎么说,直接去操作二进制数,都会比我们使用一般运算符号操作十进制性能快。这里是啥意思呢?if (len & 1)是用来判断是否是奇数,如果为奇数len & 1将返回1,如果是偶数则返回0。我们来验证一下是否如我所说。

假如现在的len=5,5转为二进制后是00000101,这个和00000001按位与。

再来个偶数,len=12,12转为二进制后为00001100,和1按位与后得0。

这里判断len如果是奇数,就先给pad一个ch的字符,为什么这里要判断len是否是奇数呢?我们先往下看,len >>= 1这又是什么意思,每次循环都向右移动一位,要知道这是用来做什么的,最简单的方法就是把移位后的得到的数字转为10进制看一下,以len=10为例

可以看出右移一位之后,其实就是相对原来的数除以了2。10向右移一位之后得到的是5。但是需要注意,与一般js里的/符号不同的是,移位的这个方法,会直接保留整数部分,截取掉小数部分。回过来看上一句,当len为奇数的时候,后面除以2就会把小数截取掉,所以先添加一个pad。len除以2之后,ch就要变成原来的两倍长度的字符串。直到len最后为0的时候跳出循环。最后返回pad+str
完整的代码直接看这里:https://github.com/stevemao/left-pad/blob/master/index.js
最后来比较一下性能,下图比较了使用我最开始说得额原始方法,和使用es6的repeat,以及源码实现的性能比较:

可以看出Current,也就是源码实现的性能比前面两者的性能都要好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,321评论 25 707
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,542评论 18 399
  • 有人说,爱上一座城,是因为住着某个喜欢的人。其实不然,爱上一座城,也许是为城里的一道生动风景,为一段青梅往事,为一...
    清风牧雨阅读 169评论 0 0
  • 前两天,简书上一位作者推荐了几本理财书。按照他的推荐书目,我先看完了《小狗钱钱》第一部,便忍不住来写读后感。本以为...
    娓娓嫣语阅读 764评论 4 7