时间戳

首页 > 解决方案 > 在 Javascript if 语句中动态生成多个条件

javascript - 在 Javascript if 语句中动态生成多个条件

问题描述

在我的 React 组件的 .map() 函数中，我有一个 if 语句，我需要包含多个由 || 分隔的条件 操作员。问题是，this.state.insights是一个由不同长度组成的数组，具体取决于从我的服务器中提取的 json 数据。 

document.getElementById("adMaskid" + this.props.id).innerHTML = audio_data
    .map((sample, i) => {
        let rectOpacity = 1
        if (i > this.state.insights[0].start && i < this.state.insights[0].end || /
            i > this.state.insights[1].start && i < this.state.insights[1].end) {
            rectOpacity = 1;
        } else {
            rectOpacity = 0;
        };

        let sampleWidth = 100.0 / audio_data.length;
        let sampleHeight = sample * 50.0;

        return `<rect style="transform: scaleY(.9); opacity: ${rectOpacity};"
                x=${sampleWidth * i}
                y=${(25 - sampleHeight)}
                width=${sampleWidth}
                height=${sampleHeight} />`
    )}

我完全不知道如何克服这个障碍。例如，如果 this.state.insights数组由 3 个值组成，那么我将如何动态创建 if 语句以反映看起来像 -

if (i > this.state.insights[0].start && i < this.state.insights[0].end || /
    i > this.state.insights[1].start && i < this.state.insights[1].end ||
    i > this.state.insights[2].start && i < this.state.insights[2].end ||)

无需更改一堆我的底层代码，有没有办法做到这一点？我读过关于使用 eval 语句的信息，但这样做让我希望有一个更好、更安全的解决方案。非常感谢您的任何见解。非常感谢。

标签： javascriptif-statementdynamic

解决方案

 this.state.insights.some(({ start, end }) => i > start && i < end )

只需迭代insights数组，根本不需要eval。

推荐阅读