是否在JavaScript中使用或不使用中间变量来优化代码

Question

哪个是更好的优化代码，为什么？ CodeBlock1更具可读性，但是它消耗了两个不需要的变量。 但是CodeBlock2的可读性较差，但看起来非常优化。

function CodeBlock1(x,y,z,n,m,p)
{
var a= x || y || z; 
var b= n || m || p; 
var c = a || b; 
return c 
}

//OR 

function CodeBlock2(x,y,z,n,m,p)
{
return x||y||z || n ||m||p;
}

Answer 1

生成这两种方法的字节码可获得以下结果：

CodeBlock1

[generated bytecode for function: CodeBlock1]
Parameter count 7
Frame size 24
   81 E> 0x1e25e29944ba @    0 : a1                StackCheck
  106 S> 0x1e25e29944bb @    1 : 25 07             Ldar a0
         0x1e25e29944bd @    3 : 92 08             JumpIfToBooleanTrue [8] (0x1e25e29944c5 @ 11)
         0x1e25e29944bf @    5 : 25 06             Ldar a1
  111 E> 0x1e25e29944c1 @    7 : 92 04             JumpIfToBooleanTrue [4] (0x1e25e29944c5 @ 11)
         0x1e25e29944c3 @    9 : 25 05             Ldar a2
         0x1e25e29944c5 @   11 : 26 fb             Star r0
  128 S> 0x1e25e29944c7 @   13 : 25 04             Ldar a3
         0x1e25e29944c9 @   15 : 92 08             JumpIfToBooleanTrue [8] (0x1e25e29944d1 @ 23)
         0x1e25e29944cb @   17 : 25 03             Ldar a4
  133 E> 0x1e25e29944cd @   19 : 92 04             JumpIfToBooleanTrue [4] (0x1e25e29944d1 @ 23)
         0x1e25e29944cf @   21 : 25 02             Ldar a5
         0x1e25e29944d1 @   23 : 26 fa             Star r1
  151 S> 0x1e25e29944d3 @   25 : 25 fb             Ldar r0
         0x1e25e29944d5 @   27 : 92 04             JumpIfToBooleanTrue [4] (0x1e25e29944d9 @ 31)
         0x1e25e29944d7 @   29 : 25 fa             Ldar r1
         0x1e25e29944d9 @   31 : 26 f9             Star r2
  169 S> 0x1e25e29944db @   33 : a5                Return
Constant pool (size = 0)
Handler Table (size = 0)

CodeBlock2

[generated bytecode for function: CodeBlock2]
Parameter count 7
Frame size 0
   81 E> 0x1b1ed00944ba @    0 : a1                StackCheck 
   99 S> 0x1b1ed00944bb @    1 : 25 07             Ldar a0
         0x1b1ed00944bd @    3 : 92 14             JumpIfToBooleanTrue [20] (0x1b1ed00944d1 @ 23)
         0x1b1ed00944bf @    5 : 25 06             Ldar a1
  109 E> 0x1b1ed00944c1 @    7 : 92 10             JumpIfToBooleanTrue [16] (0x1b1ed00944d1 @ 23)
         0x1b1ed00944c3 @    9 : 25 05             Ldar a2
  112 E> 0x1b1ed00944c5 @   11 : 92 0c             JumpIfToBooleanTrue [12] (0x1b1ed00944d1 @ 23)
         0x1b1ed00944c7 @   13 : 25 04             Ldar a3
  117 E> 0x1b1ed00944c9 @   15 : 92 08             JumpIfToBooleanTrue [8] (0x1b1ed00944d1 @ 23)
         0x1b1ed00944cb @   17 : 25 03             Ldar a4
  121 E> 0x1b1ed00944cd @   19 : 92 04             JumpIfToBooleanTrue [4] (0x1b1ed00944d1 @ 23)
         0x1b1ed00944cf @   21 : 25 02             Ldar a5
  126 S> 0x1b1ed00944d1 @   23 : a5                Return 
Constant pool (size = 0)
Handler Table (size = 0)

第一个比较“复杂”，因为堆上有中间存储，而不是像第二个一样使用堆栈。 CodeBlock1使用更多的空间和更多的指令。

因此， CodeBlock2是否“更加优化”？ 这取决于您要优化的内容。

• CodeBlock1：使用调试工具更易于阅读和调试
• CodeBlock2：占用更少的内存并执行更少的指令

试试这个自己使用node --print-bytecode index.js ，假设名称的脚本是index.js

Answer 2

基本上，您必须考虑到a || b || c || .... || X a || b || c || .... || X a || b || c || .... || X （x个比较数），在最坏的情况下，您需要检查X次，而检查一次则更少（a是正确的）。

这是因为|| 起作用，它将在第一个TRUE语句处停止。

所以

function CodeBlock1(x,y,z,n,m,p){
    var a= x || y || z;  //this will check 1, 2 o 3 times
    var b= n || m || p;  //this will check 1, 2 o 3 times
    var c = a || b; //this will check 1 or 2 times.

    //worse case you will check 3 + 3 + times.
    return c;
}


function CodeBlock2(x,y,z,n,m,p){
    // this will check 1, 2, 3, 4, 5 or 6 times
    return x || y|| z || n || m || p;
}

所以基本上是最坏的情况下CodeBlock2是6 times和坏CodeBlock1是8也正在定义多个变量对CodeBlock1所以也许这将增加更多的负担。