javascript

Question

我在写es模板。我想让代码尽可能简单，最好避免使用 (function(){return XXX})()

上下文：当一个列表什么都没有时，什么都不打印，否则打印带有 ul 标签的列表。

${
  // same filter 2 times
  arr.filter( d=>d.prop1=="a" ).length==0
    ? ""
    : `<ul> ${ arr.filter( d=>d.prop1=="a" ).map(d=>`<li>${d.text}</li>`) } </ul>`
}

或

${
  // function makes it bulky
  (function(){
    let arr2 = arr.filter( d=>d.prop1=="a" );
    if( arr2.length == 0 ){
      return ""
    }else{
      return `<ul> ${ arr2.map(d=>`<li>${d.text}</li>`) } </ul>`
    }
  })()
}

再来一个上下文，有时候问题是这样的：

 const NAMES = [
   { name:"John" },
   { name:"Michael", nickname:"Mike" },
 ];

 NAMES.map( n=>`name: ${n.name} ${ n.nickname? "("+n.nickname+")":"" }` ).join("\n")
 // can simplify n.nickname? "("+n.nickname+")":"" ?

有人想出一种方法来简化这些吗？谢谢

Answer 1

使用 array.some 比检查过滤数组的长度要快一点。

${
    ARR.some(o => !!o.attr) 
    ? `<ul>${ARR.filter(o => !!o.attr).map(o => (`<li>${o.attr}</li>`))}</ul>` 
    : ""
}

此外，由于大多数模板不打印 false 值，您可以使用 &&.

进行简化

${ ARR.some(o => !!o.attr) && `<ul>${ARR.filter(o => !!o.attr).map(o => (`<li>${o.attr}</li>`))}</ul>` }

如果你不想保持重复的条件，使用变量是必要的，所以我不知道除了使用函数之外还有什么其他方法。使用上面的技巧，您可以稍微减小函数大小。

${
    ((arr) => {
        arr = arr.filter(o => !!o.attr);
        return !!arr.length && `<ul>${arr.map(o => (`<li>${o.attr}</li>`))}</ul>`;
    })(ARR)
}

对于NAMES，你可以只使用backsticks。

NAMES.map(o => (`Name: ${o.name}${o.nickname ? ` (${o.nickname})` : ""}`))

Answer 2

您可以将 filter 值赋给 object，然后在 ?: 的条件部分应用 length。然后你可以在 true 部分使用 object 得到 map.

您的代码如下所示。

(a = arr.filter(d => d.prop1 == "a")).length ? `<ul> ${ a.map(d=>`<li>${d.prop1}</li>`) } </ul>` : "";

在下面试试。

function getTemplate(arr) {
  return (a = arr.filter(d => d.prop1 == "a")).length ? `<ul> ${ a.map(d=>`<li>${d.prop1}</li>`) } </ul>` : "";
}

console.log(getTemplate([{prop1: 'a'}])); // output : <ul> <li>a</li> </ul>
console.log(getTemplate([{prop1: 'b'}])); // output :

与NAMES

类似

使用 (n.nickname || "") 如果值为 null 或 undefined.
最后用 '' 替换 () 这样如果没有昵称那么它的末尾会有 () 并且我们可以用 replace 删除它。

const NAMES = [{
    name: "John"
  },
  {
    name: "Michael",
    nickname: "Mike"
  },
];

// Use (n.nickname || "") which will return "" in case of value is null or undefined. 
// At last replace () with empty string so if there is no nickname then it would have () at end and we can remove it with replace.
let result = NAMES.map(n => `name: ${n.name} ${"(" + (n.nickname || "") + ")" }`.replace(' ()', '')).join("\n");

console.log(result);

javascript - 简化：如果 Var 为空则为“”，否则用文本将 Var 括起来

javascript - simplify: if Var is empty-ish then "", else enclose Var with text

template-literals