Question

我是使用JavaScript的初学者，我希望优化代码创建单个函数，而不是重复几乎相同的操作20次......

所以我有20个像这样的循环：

// loop through the log array
for(var i = 0; i < textParsed.length; i++) {
    if (textParsed[i].includes("Action: Performing tests from category: Boot and services")){
        var content = document.createTextNode(textParsed[i]); // create a textnode to the document
        var li = document.createElement('li'); // create an arbitrary li element
        li.appendChild(content); // append the created textnode above to the li element
        ul.appendChild(li); // append the created li element above to the ul element
        for (var j = i+1; j < textParsed.length; j++) {
                if(textParsed[j].includes("Action: Performing")){
                    break;
                }
                else{
                    content = document.createTextNode(textParsed[j]); // create a textnode to the document
                    var li2 = document.createElement('li'); // create an arbitrary li element
                    li2.appendChild(content); // append the created textnode above to the li element
                    ul.appendChild(li2); // append the created li element above to the ul element
                }
        }    
    }
}
div.appendChild(ul); // finally the ul element to the div with an id of placeholder

for(var i = 0; i < textParsed.length; i++) {
    if(textParsed[i].includes("Action: Performing tests from category: Accounting")){
        var content = document.createTextNode(textParsed[i]); // create a textnode to the document
        var li = document.createElement('li'); // create an arbitrary li element
        li.appendChild(content); // append the created textnode above to the li element
        ul2.appendChild(li); // append the created li element above to the ul element
        for (var j = i+1; j < textParsed.length; j++) {
                if(textParsed[j].includes("Action: Performing")){
                    break;
                }
                else{
                    content = document.createTextNode(textParsed[j]); // create a textnode to the document
                    var li2 = document.createElement('li'); // create an arbitrary li element
                    li2.appendChild(content); // append the created textnode above to the li element
                    ul2.appendChild(li2); // append the created li element above to the ul element
                }
        } 
    }
}
div2.appendChild(ul2);

for(var i = 0; i < textParsed.length; i++) {
    if(textParsed[i].includes("Action: Performing tests from category: Users, Groups and Authentication")){
        var content = document.createTextNode(textParsed[i]); // create a textnode to the document
        var li = document.createElement('li'); // create an arbitrary li element
        li.appendChild(content); // append the created textnode above to the li element
        ul3.appendChild(li); // append the created li element above to the ul element
        for (var j = i+1; j < textParsed.length; j++) {
                if(textParsed[j].includes("Action: Performing")){
                    break;
                }
                else{
                    content = document.createTextNode(textParsed[j]); // create a textnode to the document
                    var li2 = document.createElement('li'); // create an arbitrary li element
                    li2.appendChild(content); // append the created textnode above to the li element
                    ul3.appendChild(li2); // append the created li element above to the ul element
                }
        } 
    }
}
div3.appendChild(ul3);

有没有办法创建一个只有一个而不是create＆gt;的函数20用于几乎相同代码的语句？

**每个for语句只有一个小差异：ul每次都在增加。 **

Answer 1

将所有这些逻辑分解为单个函数听起来不错！

我建议将ul作为参数传递给所述函数。然后你会有以下几点：

{
  "code": 400
  "message": "Unable to process JSON"
}

您的函数调用将如下所示：

function loop(ul){
     // Add loop logic here
}

Answer 2

您的includes参数会更改每个循环。

因此，如果您创建一个包含所有这些字符串的数组，则可以迭代只是不要忘记用ul初始化document.createElement('ul')以在每个外循环迭代开始时获取空列表。

假设你想要一个div：

[
 'Action: Performing tests from category: Boot and services',
 // ...
].forEach(addListTo(div));

function addListTo(div) {
  return function(str) {
    var ul = document.createElement('ul');
    //.. filter and build your ul based on the str value
    div.appendChild(ul);
  }
}

或者您想获得ul s的列表：

var ulList = strList.map(getUl);

function getUl(str) {
  var ul = document.createElement('ul');
  //.. filter and build your ul based on the str value
  return ul;
}

Answer 3

假设您有一个包含这些ul的对象，或者如果您创建了一个，则可以使用索引访问ul。 f.eks。

ul_list = {
    ul1: {someobject},
    ul2: {someobject},
    ul3: {someobject}
}

可以使用此表示法访问这些

ul_list["ul1"]

在您的foor循环中，您可以执行此操作

ul_list["ul" + number_of_ul]

Answer 4

您可以将其放入函数中并将参数传递给它

function appendChild(div, ul) {
    // loop through the log array
    for(var i = 0; i < textParsed.length; i++) {
        if (textParsed[i].includes("Action: Performing tests from category: Boot and services")){
            var content = document.createTextNode(textParsed[i]); // create a textnode to the document
            var li = document.createElement('li'); // create an arbitrary li element
            li.appendChild(content); // append the created textnode above to the li element
            ul.appendChild(li); // append the created li element above to the ul element
            for (var j = i+1; j < textParsed.length; j++) {
                if(textParsed[j].includes("Action: Performing")){
                    break;
                }
                else{
                    content = document.createTextNode(textParsed[j]); // create a textnode to the document
                    var li2 = document.createElement('li'); // create an arbitrary li element
                    li2.appendChild(content); // append the created textnode above to the li element
                    ul.appendChild(li2); // append the created li element above to the ul element
                }
           }    
       }
    }
   div.appendChild(ul); 
}

appendChild(div, ul);
appendChild(div2, ul2);
appendChild(div3, ul3);

如何创建涵盖所有案例的单一功能？

4 个答案: