JavaScript：优化函数以创建垂直时间线

我创建了一个简单的函数来迭代for循环并显示垂直时间线。 到目前为止，我能对自己创作的作品发表一些看法吗

到目前为止，有没有改进/优化我创建的内容的方法

理想情况下，我所追求的是尽量减少重复、多余呼叫等的方法

这是我的工作代码：

功能时间线（开始，缩写，小时）
{
var a=0，
开始
缩写，
小时，
时间=document.getElementById（'timeline'）；
小时=（！小时）？12：小时；
对于（a=a+start；a 12）
{
time.innerHTML++='
'+（a-12）+':00'+
（缩写==‘AM’？‘PM’：‘AM’）+
“
”；
time.innerHTML++='
'+（a-12）+'：30'+
（缩写==‘PM’？‘AM’：‘PM’）+
“
”；
}
其他的
{
time.innerHTML+='
'+a+':00'+
（缩写=='AM'？（a==12）？'PM'：'AM'：'PM'）+
“
”；
time.innerHTML+='
'+a+':30'+
（缩写=='AM'？（a==12）？'PM'：'AM'：'PM'）+
“
”；
}
}
}
时间线（上午9点、12点）；

接受的函数参数包括：

• 开始：开始时间（0-12）
• 缩写：Am/PM缩写
• 小时数：要显示的小时数

---

不要每次都使用

innerHTML+=

，使用数组存储html部分，然后使用

join

方法将它们连接到字符串，并将字符串分配给

innerHTML

而不是innerHTML，使用：

createElement

-创建新的li元素

insertAfter

-将其插入末尾

将新节点添加到现有节点。 这比将innerHTML添加到现有innerHTML要快。

请参阅：

功能时间线（开始，缩写，小时）
{
var a=0，
abbr=abbr | | AM'，
小时=小时| | 12，
时间=document.getElementById（'timeline'），
timelineHTML=[]；
对于（a=a+start；a，如果要触摸元素的innerHTML，通常认为一次触摸所有元素是最佳选择。此外，您现有的for循环每次都必须处理该加法，最好事先定义循环的结束点

var newHTML = '';
var finish = hours+start;

for(a=a+start; a <= finish; a++)
{
    if(a > 12)
    {
        newHTML += '<li>' + (a-12) + ':00 ' + ( abbr == 'AM' ? 'PM' : 'AM' ) + '</li>';
        newHTML += '<li>' + (a-12) + ':30 ' + ( abbr == 'PM' ? 'AM' : 'PM' ) + '</li>';
    }
    else
    {
       newHTML += '<li>' + a + ':00 ' + ( abbr == 'AM' ? (a==12) ? 'PM' : 'AM' : 'PM' ) + '</li>';
       newHTML += '<li>' + a + ':30 ' + ( abbr == 'AM' ? (a==12) ? 'PM' : 'AM' : 'PM' ) + '</li>';
   }
}

time.innerHTML += newHTML;

var newHTML=''；
var完成=小时+开始；
对于（a=a+start；a 12）
{
newHTML+='
'+（a-12）+':00'+（缩写=='AM'？'PM'：'AM'）+'
'；
newHTML+='
'+'（a-12）+'：30'+（缩写=='PM'？'AM'：'PM'）+'
'；
}
其他的
{
newHTML+='
'+a+':00'+（缩写=='AM'？（a==12）？'PM'：'AM'：'PM'）+'
'；
newHTML+='
'+a+'：30'+（缩写=='AM'？（a==12）？'PM'：'AM'：'PM'）+'
'；
}
}
time.innerHTML+=newHTML；
其他人都谈到了广泛的笔划（尤其是@Lapple），所以这里有几个非常小的低挂项目：

hours = (!hours) ? 12 : hours;

可缩短为：

hours = hours || 12;

…对于大多数JavaScript程序员来说，这是一个更具可读性的习惯用法

编辑回复：您的评论：
我不知道这个特殊的习语有什么名字。就像JavaScript在布尔表达式上使用的大多数编程语言一样，即给定
X | | | Y
，如果解释器已经知道表达式的值将来自
X
（因为
X
是“真实的”），它从不费心计算
Y
。所以你可以做一些类似
true | | delete_everything（）
的事情，确信
delete_everything
永远不会被调用。同样，在
X&&Y
中，如果
X
是“虚假的”，那么
Y
将永远不会被计算

这对你来说可能都是老生常谈了。不过JavaScript所做的不太常见的是你可以称之为“最后一个值”的评估（这是维基百科页面使用的术语，但我不确定它是否是一个通用术语）。在Java中，不是从布尔表达式返回
true
或
false
，而是从C中返回
1
或
0
，在JavaScript中，它只返回最后计算的值

取表达式
hours | | 12
。如果
hours
是
undefined
（JavaScript中的falsy值），那么解释器将只返回第二个操作数（因为在
或
中，当第一个操作数为falsy时，表达式的“真实性”始终等于第二个操作数的真实性）。但是，如果
hours
是真实的--例如，
9
或
“banana”
，则表达式在求值后将短路并返回该值。要重复我自己，但在代码中：

var hours; // declared but has the value undefined

console.log( hours || 12 ); // `hours` (undefined) is falsy
// => 12                    // so return the second operand

hours = 9;
console.log( hours || 12 ); // `hours` is truthy--short-circuit & return `hours`
// => 9

hours = "banana";
console.log( hours || 12 ); // `"banana"` is also truthy
// => "banana";

console.log( 12 || hours ); // `12` is truth--short-circuit & return `12`
// => 12

顺便说一句，在Ruby等具有
| |=
运算符的语言中，这种习语有一种更简短的形式，非常常见：

hours = nil          # `nil` is like `null`

hours = hours || 12  # just like in JavaScript
# => 12

# but the below is equivalent:

hours = nil

hours ||= 12
# => 12

因此，在Ruby中，类似这样的方法并不少见：

def foo(bar, baz = nil) # `baz` defaults to `nil` when no 2nd argument is given
  baz ||= get_default_baz()

  puts bar + baz        # `puts` is like `print` or `echo` in other languages
end

def get_default_baz     # a trivial example
  "WXYZ"
end

foo('ABC', 'DEF')
# => ABCDEF

foo('ABC')
# => ABCWXYZ

（结束编辑）
在这里：

var a = 0,
    start,
    abbr,
    hours,
    time = document.getElementById('timeline');

hours = (!hours) ? 12 : hours;

…您在第4行声明
hours
，然后在第7行分配它，此时您可以同时执行这两项操作：

var a = 0,
    // ...
    hours = hours || 12
    // ...
;

为什么要用与参数相同的名称声明变量？为什么要将a初始化为0，然后稍后添加start？（只需将其初始化为从第一个位置开始）你可以在循环之前加上开始数小时，而不是每次迭代都要加和。你应该把它贴到<代码> CoDeVIEW。StkChanchange < /Cord>谢谢@约旦！好事情要考虑和改变。@ Wang2我不知道存在。谢谢。时间线将显示25小时以上的错误结果，例如13:00、14:00等。@ Luke Dennis谢谢！我喜欢等待卸载直到完成的想法。@Lapple这一点很好。但是，时间线并不意味着要超过24小时标记…从技术上讲是晚上11:59。但这一点很好。我应该结合一些逻辑来说明这一点，要么在午夜停止，要么再增加一天的增量。@Lapple下面的代码示例确实需要考虑考虑到25+！
var a = 0,
    start,
    abbr,
    hours,
    time = document.getElementById('timeline');

hours = (!hours) ? 12 : hours;

var a = 0,
    // ...
    hours = hours || 12
    // ...
;