Pug(Jade) Mixin传入条件无效，如何筛选broadcast为true的数组对象？

你的代码之所以会显示所有对象，核心问题是你传给Mixin的'item.broadcast'是一个字符串，而非真正的条件判断逻辑。在Mixin里的if condition语句中，非空字符串在JavaScript里会被视为true，所以所有item都会被渲染出来。

修复方案：传递判断函数而非字符串 #

我们可以让Mixin接收一个过滤函数，用这个函数来检查每个item是否满足条件。这种方式逻辑清晰，还能灵活适配未来的过滤规则修改。

修改后的Mixin代码：

mixin techs(filterFn)
  - var data = trs.tech.data;
  ul.techs
    // 先过滤数组再循环，数据量大时性能更优
    each item in data.filter(filterFn)
      li
        .h2= item.title

调用Mixin的代码：

如果你的环境支持ES6+语法，用箭头函数可以简洁传递判断逻辑：

+techs(item => item.broadcast)

如果环境不支持箭头函数，改用普通函数即可：

+techs(function(item) { return item.broadcast; })

为什么这样能行？ #

• data.filter(filterFn)会遍历原数组，只保留让filterFn(item)返回true的元素，也就是broadcast为true的对象。
• 之后循环渲染过滤后的数组，就能精准显示你需要的内容。

可选写法（循环内直接判断） #

如果你不想提前过滤数组，也可以在循环中直接调用函数判断：

mixin techs(filterFn)
  - var data = trs.tech.data;
  ul.techs
    each item in data
      if filterFn(item)
        li
          .h2= item.title

调用方式和上面一致，效果相同，只是提前过滤数组在数据量较大时性能表现更好。

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