jQuery.append nothing - 三元运算符答案

【问题标题】：jQuery.append nothing - ternary operatorjQuery.append nothing - 三元运算符
【发布时间】：2014-05-04 14:47:53
【问题描述】：

我有一个网页，根据一些布尔标志，它将各种元素附加到 HTML 页面。

为了使代码简洁，我尽量使用三元运算符 - 以节省大量 if 语句。

但是，我想知道在使用三元运算符时，如果我的三元运算符失败，不向动态创建的元素附加任何元素（如果这有意义的话）的最佳做法是什么。即：

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : /*What here???*/)
);

我有以下三个解决方案，但我不知道哪个最好，是否应该避免：

附加一个空的 jQuery 对象——这似乎是正确的做法，因为这意味着两个结果都是 jQuery 对象类型：

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : $())
);

一个空字符串，无论如何这似乎是错误的，因为它们不是同一类型：

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : '')
);

追加null - 这似乎合乎逻辑，但我不想引起任何类型的错误：

$('<div>').append(
    (myBooleanFlag ? $('<p>Some child element</p>') : null)
);

那么你说哪个最好？

【问题讨论】：

使用if stmt，如if(myBooleanFlag ){$('<div>').append( ('<p>Some child element</p>') );
老实说，我相信if 语句比(foo ? $("<bar />") : undefined) 更具可读性。

【解决方案1】：

但是，我想知道在使用三元运算符时，不附加任何元素的最佳做法是什么

最佳做法是不要在不合适的情况下使用三元运算符。如果您不知道第三个操作数中的内容，那么很明显这种情况不适合使用三元运算符。

虽然您可以使用空白字符串：

$('<div>').append(
    (myBooleanFlag ? '<p>Some child element</p>' : '')
);

...使用if更清晰、更简洁、更高效：

if (myBooleanFlag) {
    $('<div>').append('<p>Some child element</p>');
}

我不愿提及它，但适用于此处的另一个 JavaScript 习惯用法是使用 && 运算符和表达式语句：

myBooleanFlag && $('<div>').append('<p>Some child element</p>');

这是可能的，因为在 JavaScript 中，表达式可以是语句。由于&&被短路，如果myBooleanFlag为假，则append调用不会被触发。

有些人真的很喜欢这种语法。其他人发现很难阅读和调试。它基本上是这种形式的隐藏if：

if (myBooleanFlag) $('<div>').append('<p>Some child element</p>');

...这违反了所有通常的编码约定，即始终使用 {} 和条件等。但同样，这是一种风格。

旁注：你可以只使用上面正例中的字符串，在传递给append之前不需要在上面使用$(...)，所以我在上面省略了它。

旁注 2：在将条件作为参数传递给函数时，不需要在条件周围加上括号。

【讨论】：

【解决方案2】：

var result =  myBooleanFlag ? $('<p>Some child element</p>') : null;

$('<div>').append(result);

【讨论】：

【解决方案3】：

您可以改用if 语句：

if(myBooleanFlag ){
    $('<div>').append('<p>Some child element</p>');
}

【讨论】：

【解决方案4】：

1) 用 $() 附加 div，会因为括号内没有对象而报错

2) 用 '' 附加 div 是正确的方法。

3) 用 null 附加 div 是不正确的方法，因为 null 也被视为字符串

所以用第二个

【讨论】：

【解决方案5】：

我不建议在这里使用三元运算符。

无论您的myBooleanFlag 的值是多少，您将始终调用append() 方法，即使它根本没有必要。那么，即使您没有要附加的内容，为什么还要调用 jQuery 函数两次呢？

直接的if 语句足以满足您的目的（并且更具可读性）

if (myBooleanFlag){
    $('<div>').append('...');
}

如果你想要一个替代的更短的语法（甚至比三元运算符更短），你可以改用这个表达式/语句

myBooleanFlag && $('<div>').append('...');

append() 只有在myBooleanFlag 为true 时才会执行，因此当标志为false 时不会调用jQuery。

【讨论】：