如何从列表中移除undefined并避免其出现在输出结果中？

当目标DOM元素不存在时，jQuery的.html()方法会返回undefined，直接拼接这些变量就会把undefined转成字符串"undefined"显示在页面上。以下是几种实用的解决方法：

方法一：用短路求值设置默认空字符串 #

给每个变量添加|| ''，当.html()返回undefined（或其他假值）时，自动替换为空字符串：

var item1 = $(result).find('.item:nth-child(2) a').html() || '',
    item2 = $(result).find('.item:nth-child(3) a').html() || '',
    item3 = $(result).find('.item:nth-child(4) a').html() || '',
    item4 = $(result).find('.item:nth-child(5) a').html() || '';

$('div').html(item1+item2+item3+item4);

方法二：数组过滤后拼接 #

把所有项存入数组，用filter剔除undefined后再拼接，适合条目较多的场景：

var items = [
  $(result).find('.item:nth-child(2) a').html(),
  $(result).find('.item:nth-child(3) a').html(),
  $(result).find('.item:nth-child(4) a').html(),
  $(result).find('.item:nth-child(5) a').html()
].filter(item => item !== undefined);

$('div').html(items.join(''));

如果需要同时过滤空字符串，可以把过滤条件改成return item;，会自动排除所有假值（undefined、null、''、0等）

方法三：先检查元素存在性再取值 #

先判断目标元素是否存在，存在才获取HTML内容，否则设为空字符串，同时避免重复查询DOM：

var $item1 = $(result).find('.item:nth-child(2) a'),
    $item2 = $(result).find('.item:nth-child(3) a'),
    $item3 = $(result).find('.item:nth-child(4) a'),
    $item4 = $(result).find('.item:nth-child(5) a');

var item1 = $item1.length ? $item1.html() : '',
    item2 = $item2.length ? $item2.html() : '',
    item3 = $item3.length ? $item3.html() : '',
    item4 = $item4.length ? $item4.html() : '';

$('div').html(item1+item2+item3+item4);

内容的提问来源于stack exchange，提问作者myo