代码之家 › 专栏 › 技术社区 › WillD

以编程方式构造用于if()语句的条件

javascript

WillD · 技术社区 · 7 年前

让我们假设一下我有这样的东西:

if (document.getElementById('div1').innerHTML &&
    document.getElementById('div2').innerHTML &&
    document.getElementById('div3').innerHTML &&
    document.getElementById('div4').innerHTML &&
    document.getElementById('div5').innerHTML &&
    ...
    document.getElementById('div100').innerHTML)

显然,输入和维护这样一个大的条件语句是有问题的。

我想要一些解决方案,比如:

var conditional = "";
for(var i = 1; i <= 100; i++){
  conditional += "document.getElementById('div" + i +"').innerHTML";
  if(i < 100) {
    conditional += " && ";
  }
}
if(interpretStringAsJSExpression(conditional)){
    console.log("all my divs have content");
}

在javascript中是否可能出现类似的情况?

已经提交了很好的答案,我相信我和其他人会从中受益。然而,纯粹出于好奇,是否可以在字符串中存储和运行JavaScript表达式或命令?

就像我在我的例子中提出的那样: interpretStringAsJSExpression(conditional)

7 回复 | 直到 7 年前

Peter Mortensen Pieter Jan Bonestroo 7 年前

正如其他答案所说,您可以更容易地解决您的条件问题。

但是,为了回答你的新问题

纯粹出于好奇心,是否可以储存和运行字符串中的javascript表达式或命令?

是的,您可以将JavaScript代码写入一个字符串,然后使用 eval . 如果你关心安全或性能,你不应该这样做。

Barmar 7 年前

您可以在循环中进行测试。

var allOK = true;
for (var i = 1; i <= 100; i++) {
    if (!document.getElementById("div"+i).innerHTML) {
        allOK = false;
        break;
    }
}
if (allOK) {
    console.log("all my divs have content");
}

还可以给所有的div一个公共类,然后使用内置迭代器。

var allDivs = document.getElementsByClassName("divClass");
if (Array.from(allDivs).every(div => div.innerHTML)) {
    console.log("all my divs have content");
}

ibrahim mahrir 7 年前

为什么要解释一个字符串?还有其他的方法 for 循环:

var conditionResult = true;
for(var i = 1; conditionResult && (i < 101); i++) {
    conditionResult = conditionResult && document.getElementById('div' + i).innerHTML;
}

if(conditionResult) {
    // Do something here
}

这个 对于 循环条件 conditionResult && (i < 101) 将中断循环一次 conditionResult 决定是不稳定的;在这种情况下不需要保持循环。

也可以使用数组方法,如 some 和 every 如果数组中有元素:

var arr = [/* array of DOM elements */];

var conditionResult = arr.every(elem => elem.innerHTML);   // This is equivalent to (innerHTML && innerHTML && ...)

var conditionResult = arr.some(elem => elem.innerHTML);    // This is equivalent to (innerHTML || innerHTML || ...)

Eaten by a Grue kackleyjm 7 年前

你可以设定 condition 到 true 检查每一个,设置 条件 如果有任何错误,则返回false并中断循环。

var conditional = true;
for(var i = 1; i <= 100; i++){
  if (!document.getElementById('div' + i).innerHTML) {
        condition = false;
        break;
    }
}

user2182349 7 年前

使用 document.queryselectorall文件 对于这种类型的操作

// Get all the divs that have ids which start with div
var theDivs = document.querySelectorAll('[id^="div"]');
var i,l,el,divsWithContent = [];

// Loop through all theDivs
l = theDivs.length;
for(i = 0; i < l; i++) {
    // el is the div 
    el = theDivs[i];
    
    // Test to make sure the id is div followed by one or more digits
    if (/^div\d+$/.test(el.id)) {
        // If the div has something in it other than spaces, it's got content
        if (el.textContent.trim() !== "") {
            // Save the divs with content in the array
            divsWithContent.push(el.id);
        }
    }
}

// Show the results 
document.getElementById("result").textContent = divsWithContent.join("\n");

<h1>Div test</h1>
<div id="div1">This</div>
<div id="div2">that</div>
<div id="div3"></div>
<div id="div4">and</div>
<div id="div5">the other thing</div>
<h2>Divs with content</h2>
<pre id="result"></pre>

裁判: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

blue_note 7 年前

你可以把 document.getElementById('divXX').innerHTML 数组中的项,然后使用

items.reduce((a, b) => a && b);

这样,你就可以改变个人 div 表达式中的元素,而不必重新创建整个列表

S. Foster 7 年前

除此之外的另一个选择 eval 是使用 Function 构造函数。 Function 更为灵活,允许您保存已编译的代码,而不必 埃瓦 每一次。然而,它们都有类似的安全风险。

var conditional = "";
for(var i = 1; i <= 6; i++){
  conditional += "document.getElementById('div" + i +"').innerHTML";
  if(i < 6) {
    conditional += " && ";
  }
}
const f = new Function('return (' + conditional + ') !== ""');

console.log(f());

<div id="div1">1</div>
<div id="div2"></div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5"></div>
<div id="div6">6</div>