立诚勿怠,格物致知
It's all about connecting the dots

一种字符串拼接的高效方法

比较一下下面几种字符串拼接的方法:

// prepare a long array
const arr = []
for (let i = 0; i < 10000; i++) {
  arr.push('item' + i)
}

function testByForLoop1 () {
  const tsStart = +new Date().valueOf()
  let html = '<ul>'
  for (let i = 0, len = arr.length; i < len; i++) {
    html += `<li>${arr[i]}</li>`
  }
  html += '</ul>'
  console.log('testByForLoop1: ' + (+new Date().valueOf() - tsStart))
}

function testByForLoop2 () {
  const tsStart = +new Date().valueOf()
  let html = '<ul>'
  for (let i = 0, len = arr.length; i < len; i++) {
    html += '<li>' + arr[i] + '</li>'
  }
  html += '</ul>'
  console.log('testByForLoop2: ' + (+new Date().valueOf() - tsStart))
}

function testByArrayJoinMethod () {
  const tsStart = +new Date().valueOf()
  let html = '<ul><li>'
  html += arr.join('</li><li>')
  html += '</li></ul>'
  console.log('testByArrayJoinMethod: ' + (+new Date().valueOf() - tsStart))
}

testByForLoop1()
testByForLoop2()
testByArrayJoinMethod()

经过在Chrome浏览器多次尝试,总的来说,testByForLoop1方法(用了ES6字符串模板的for循环)耗时最长,testByForLoop2方法(没用ES6字符串模板的for循环)耗时其次,testByArrayJoinMethod方法(利用了数组的join方法)耗时最短,它们的耗时在数组长度越长时越是差异显著。尤其是testByArrayJoinMethod方法简直是效果拔群。下面是一个截图(截图里有个地方</ul></ul>是当时写错了,上面的代码里以纠正,截图就不换了。。):

处理小数据时怎么方便怎么来,因为在这种情况下可以认为上面三种方法的耗时是一样的,但是如果要处理很长的数据的话,能用数据join方法实现的话,效果不是一般的好。

赞(0) 打赏
文章名称:《一种字符串拼接的高效方法》
文章链接:https://www.orzzone.com/high-efficiency-string-concat.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册