如果找到一个键，则循环遍历一个数组，跳过该键的索引，但最终想返回并添加该索引以跳过其他键

Question

所以这有点难以解释，但基本上是在尝试以更有效的方式执行以下代码...

products.forEach(function(item, index){
    if(item.sale == false ) {
        nonSaleItems += createEl(item);
    } else {
        saleItems += createEl(item);
    }
});

items.innerHTML += nonSaleItems;
items.innerHTML += saleItems;

products 是一个对象数组，其中一个键是“sale”，“sale”是“false”或“true”。这背后的想法是首先 post 所有 none 销售项目，然后是销售项目 - 因此首先是 nonSaleItems 的 innerHTML，然后是 saleItems。

此代码完美运行，但我觉得必须有一种更有效/更简洁的方法来代替 nonSaleItems 和 saleItems 两个变量，然后是两个 innterHTML。

只是好奇是否有人对如何简化或改进它有更好的想法？

Answer 1

您已经对所有产品进行了一次循环，这是 a) 必要的，并且 b) 尽可能高效。

您能做的最好的事情就是让您的代码不那么冗长。在这种情况下，我使用三元来决定是使用 saleItems 还是 nonSaleItems 作为 += createEl(...):

的左值

products.forEach(function(item, index){
    ( item.sale ? saleItems : nonSaleItems ) += createEl(item);
});

items.innerHTML += nonSaleItems;
items.innerHTML += saleItems;

编辑：

上面的代码将不起作用，因为三元计算结果为右值，而不是左值。参见 Javascript Ternary Operator lvalue。

但是，您可以使用三元来评估一个对象，它可以被取消引用（参见）：

let saleItems = { html: '' }, nonSaleItems = { html: '' }
products.forEach(function(item, index){
    ( item.sale ? saleItems : nonSaleItems ).html += createEl(item);
});

items.innerHTML += nonSaleItems.html;
items.innerHTML += saleItems.html;

或者，只有一个对象，但使用三元来确定密钥：

let html = { sale: '', nonSale: '' };
products.forEach(function(item, index){
    html[(item.sale ? 'sale' : 'nonSale')] += createEl(item);
});

items.innerHTML += html.nonSale;
items.innerHTML += html.sale;

如果找到一个键，则循环遍历一个数组，跳过该键的索引，但最终想返回并添加该索引以跳过其他键

Loop through an array if it finds a key, skip the index for that key, but eventually want to go back and add that index skipping the other keys

javascript

html

arrays

object

innerhtml