简单for循环循环与>>算子的区别

Question

我在vue.js中找到了这段代码。但是，使用snippet-1而不是snippet-2来编写模板重复有什么好处呢？

Snippet -1- Source

const repeat = (str, n) => {
    let res = ''
    while (n) {
      if (n % 2 === 1) res += str
      if (n > 1) str += str
      n >>= 1
    }
    return res
  }

代码片段-2

const repeat = (str, n) => {
  let res = ''
  while (n--) {
    res += str;
  }
  return res
}

Answer 1

这是不同的迭代次数。

在第二个代码片段中，您有n迭代。但是在第一个代码片段中，您有大致的log n迭代。这意味着函数的复杂性从O(n)一直到O(log n)，这对于巨大的n来说可能很重要。

它怎麽工作?作为一个开始，这里的逻辑以一种过于简单的方式进行了总结:如果我们将迭代次数减半，我们可以将添加到结果中的内容加倍。

所以>> 1的工作原理有点像integer division by 2。整数除法意味着对于5 / 2，结果是2。但这意味着我们错过了迭代！？

对于每个奇数，我们在将其加倍到结果之前添加当前字符串，因此在继续之前，我们可以在结果中保存该迭代的总和(当前字符串)。因此，知道我们的迭代是节省下来的，我们就以同样的方式向下迭代，每一步都将剩余的迭代减半，同时将我们很快添加到结果中的内容加倍。

通过这种重复，我们跳过了很多迭代，这是降低复杂性的关键。

对于n = 5

1 'str: ' 'kk' 'res: ' 'k'
2 'str: ' 'kkkk' 'res: ' 'k'
3 'str: ' 'kkkk' 'res: ' 'kkkkk'

对于n = 10

1 'str: ' 'kk' 'res: ' ''
2 'str: ' 'kkkk' 'res: ' 'kk'
3 'str: ' 'kkkkkkkk' 'res: ' 'kk'
4 'str: ' 'kkkkkkkk' 'res: ' 'kkkkkkkkkk'

对于n = 11

1 'str: ' 'kk' 'res: ' 'k'
2 'str: ' 'kkkk' 'res: ' 'kkk'
3 'str: ' 'kkkkkkkk' 'res: ' 'kkk'
4 'str: ' 'kkkkkkkk' 'res: ' 'kkkkkkkkkkk'

Answer 2

Javascript中的字符串连接具有连接性( historically created a lot of discussion )，多年来已经尝试了许多方法(平面连接、字符串数组连接等)。

看看how the method is actually used，我们可以看到它被进一步包装在一个循环中：

tree.map((vm, i) => `${
    i === 0 ? '---> ' : repeat(' ', 5 + i * 2)
}...`

这意味着任何性能差异都会被进一步放大。

考虑到在高迭代次数时性能差异很大，在这方面选择性能而不是可读性似乎是合理的：

​

​

Answer 3

它真的会更快

can see here

const takeTime = (f,...arg) => {
  const st = Date.now()
  const result = f(...arg)
  const et = Date.now()
  return {time: et - st, result}
}

console.log(takeTime(repeat1.bind(null,"string",1000000)))
console.log(takeTime(repeat2.bind(null,"string",1000000)))

在这个例子中，我在chrome 76中有100毫秒的差异。

谢谢你！