data.filter未定义及多if语句返回数组问题与实现代码说明

之前我也踩过data.filter未定义、或者靠一堆if语句凑数组返回的坑，现在终于整理出一段简洁靠谱的代码，能搞定多变量查询并直接以数组形式返回结果：

function fetchCartItems() {
  // 注意：原代码里的>是HTML转义字符，JS选择器里直接用>就行
  const cellSelector = "#main>#ViewCartWrapper>form>div>.bordered>tbody>tr>td";
  const cartTableCells = document.querySelectorAll(cellSelector);
  
  // 把需要提取的单元格内容统一放进数组，同时做容错处理
  const cartItems = [
    cartTableCells[5]?.innerText || '',
    cartTableCells[9]?.innerText || '',
    // 如果还有更多商品项，直接在这里追加就行，比如cartTableCells[13]?.innerText || ''
  ].filter(item => item.trim()); // 过滤掉空内容和纯空格的项
  
  return cartItems;
}

为什么这么写更省心？ #

• 修复了转义字符问题：>是HTML里的转义写法，在JS选择器中必须换成原生的>才能正确匹配元素
• 容错性拉满：用可选链?.避免DOM元素不存在时的报错，再用|| ''兜底为空字符串，不会因为某个单元格找不到导致整个函数挂掉
• 告别冗余if：直接把要提取的内容放进数组，最后用filter一键过滤无效项，不用写一堆if(item1) { push... }的重复代码
• 扩展性强：后续要加新的商品查询项，直接在数组里加一行就行，维护起来超方便

之前那种要么filter用不了要么代码堆得像面条的情况，大多是没处理好DOM元素的存在性判断和数组初始化逻辑，这个写法刚好补上了这些漏洞~

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