有一个更好的方法吗？在多个函数中重用相同的循环？

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);
    }
}

但正如提到的那样，如果您不介意让catsArray可用于您的所有功能，则使用@squint是实现此目标的标准且更快捷的方式。

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);
    };
}