Javascript ES2015：如何使用赋值简化if语句？

我正在构建一个React组件，它根据条件返回不同的标记。代码如下：

//Header.jsx
从“React”导入React；
常量头=（{…props}）=>{
让标签；
如果（道具h1）
标签='h1'；
否则如果（第h2条）
标签='h2'；
否则如果（第h3道具）
标签='h3'；
否则如果（h4道具）
标签='h4'；
否则，如果（第h5号道具）
标签=‘h5’；
其他的
标签='h6'；
返回(
{儿童}
);
}
导出默认标题

您似乎在寻找（它构成一个表达式，而不是像

if

那样的语句，并且可以在赋值中使用）：

当然，缩进可能会得到改进（如果，则缩进与

匹配），或者您可能希望使用
&&
和
|
短路

但是，对于您在这里所做的工作，我建议使用循环：

const Tag = (() => {
    for (let p of 'h1,h2,h3,h4,h5'.split(','))
        if (props[p])
           return props[p];
    return 'h6';
})();

或者只是将标记名称作为属性本身存储在标记内容旁边，没有理由为一件事使用6个不同的属性：

export default function Header({children, headingLevel}) {
    const tag = 'h'+headingLevel;
    return (
        <tag>
            { children }
        </tag>
    );
}

导出默认函数头（{children，headingLevel}）{
常量标记='h'+头级；
返回(
{儿童}
);
}
为了提高可读性，我认为For循环更好：

let Tag;

for (let i of [1, 2, 3, 4, 5, 6]) {
    if (Tag = props['h' + i]) break;
}

我通过使用regex动态搜索标记解决了我的问题。代码的结尾如下：


//Header.jsx
从“React”导入React；
常量头=（{children，…other}）=>{
让标记=（（）=>{
for（让输入其他）
if（/（h[1-6]）/.exec（key））返回key；
返回'h6'；
})();
返回(
{儿童}
);
}
导出默认标题
您是否可以在大多数情况下为
其他
对象保留相同的键，
如果其他
链和
开关
可以由以下对象替换
var tags={h1:'h1'，h2:'h2'，h3:'h3'，h4:'h4'，h5:'h5'}；var Tag=标签[其他标题]ES6没有给我们任何新的东西，但是标准的ES5简化技术apply@Tushar在现场，使用文字对象（或贴图，或集合，如果您愿意）通常是简化这些长条件的方法。但是，在这种情况下，最好只将标记存储在一个属性中。@iaingallowy实际上没有。Tushar的示例表明该对象有一个
标题
属性，这是一个字符串（
'h1'
，
'h2'
）。使用对象文字将字符串映射到它们自己的值是愚蠢的。Tushar给出了一个概念证明，要求一个属性来管理所有属性，而不是一个实际的答案。好的，去掉最后一个^^^我并没有真正简化，它只允许我使用if作为表达式。这是一个非常糟糕的主意，如果你想调试它们，三元组是最糟糕的。@MateusFelipe:你问的是“所以我尝试了
let Tag=（if（expression）[…]）；
，但它似乎不支持。”，三元运算符就是答案。当然，这不一定是最好的解决办法。@halfzebra:他们怎么了？您的调试器是否功能不足？考虑到这里没有副作用，这应该真的没有问题。@Bergi Chrome DevTools debugger威胁将一组嵌入的ternaries作为一个表达式，这使得调试变得更加困难，比如对变量定义使用single
var
或
let
。我同意，这将适用于这个具体案例，但这是一种简化吗？我的第一个想法：请不要这样做。你为什么要用六个不同的财产名称？我有我的理由。当我使用这个组件时，我会写“代码> <代码>，而不是<代码> <代码>，这更容易、更漂亮、更有组织。你真的应该考虑使用<代码> <代码>（用子类？）或<代码> <代码>。布尔属性根本没有意义。如果执行
，会发生什么情况？事实上，对于您的
for In
循环，甚至不能保证此表达式每次都以相同的级别结束。它返回遇到的第一个hx。我不想创建六个不同的组件。
let Tag;

for (let i of [1, 2, 3, 4, 5, 6]) {
    if (Tag = props['h' + i]) break;
}