Есть ли лучший способ сделать это? Повторное использование одного и того же цикла в нескольких функциях?

Question

Эти три функции используют один и тот же цикл отдельно.

Должен ли я удалить петли из каждой функции и поместить их в один большой цикл? Есть ли другой лучший способ?

function createArrayOfNames(catsArray) { 
     var catNames = []; 
     for (var i = 0; i<catsArrayLength; i++) { 
      catNames.push(cats[i].name); 
     } 
     return catNames; 
    } 

    // 
    function createArrayOfListElements(listElement, catNames) { 
     for(i = 0; i<catsArrayLength; i++) { 
      var listElements = []; 
      var listElement = listElement; 
      listElement.innerHTML = catNames[i] 
      listElements.append(listElement); 
     } 
     return listElements; 
    } 

    //Adds cat names to the catList unordered list (inside the catListContainer div) 
    function addCatListToView(listElements, catNames) { 
     for(i = 0; i<catsArrayLength; i++) { 
      getElementById('allCats').append(listElements[i]); 
     } 
    } 

Answer 1

Да, создание функции итерации было бы хорошим способом сделать ваш код более удобочитаемым.

function iterateCats(callback) { 
    for(i = 0; i<catsArrayLength; i++) { 
     callback(i); 
    } 
} 

Но, как @squint упоминалось выше, если вы не возражаете, что делает ваш catsArray доступны для всех функций, используя forEach это стандарт и быстрый способ для достижения этой цели.

Answer 2

Вы можете использовать Map и forEach, чтобы немного почистить код. Кроме того, будьте осторожны, вы сбросили var listElements = []; на каждой итерации.

function createArrayOfNames(catsArray) { 
    return catsArray.map(function (c) { 
     return c.name 
    }); 
} 

function createArrayOfListElements(catNames) { 

    var listElements = []; 

    catNames.forEach(function(name) { 
     var listElement = new listElement(); 
     listElement.innerHTML = name; 
     listElements.append(listElement); 
    }); 

    return listElements; 
} 

function addCatListToView(listElements) { 

    var catElements = getElementById('allCats'); 

    listElements.forEach(function(element) { 
     catElements.append(element); 
    }; 
}