使用 for 代替 each(); [复制]

Question

我的代码下面使用 each() 实际上可以很好地工作，但是使用 for 循环是否比使用 each() 更好？使用 for 循环将减少与 each() 相比的时间负载； ?因为将来我仍然会为数据类型添加更多..意味着不仅c1，c2，还会有更多类型即将到来，

我的html，

<div class ="box red" data-type="c1" data-title="c1 content" id="cp-1">
  <div class= "title">c1 content</div>
</div>
<div class ="box green" data-type="c1" data-title="c2 content" id="cp-2">
  <div class= "title">c2 content</div>
</div>

javascript：

 $(document).ready(function() {
        var cp = $('.box');
        //  Unique Id for each
        var idCp = 0;
        for (var i = 0; i < cp.length; i++) 
        {
            idCp++;
            cp[i].id = "cp-" + idCp;
        }

           cp.each(function() {
                var cp = $(this);
                var cpTitle = cp.attr("data-title") + "";

                // different Data type
                if (cp.data('type') == "c1") 
                {
                    cp.addClass('red').css(
                        {
                            "background-color" : "red",
                            "padding": "20px", 
                            "display": "table"}
                        );
                    cp.append('<div class="title">' + cpTitle + '</div>');
                } 

                else if (cp.data('type') == "c2") 
                {
                    cp.addClass('green').css(
                        {
                            "background-color" : "green", 
                            "padding": "20px", 
                            "display": "table"}
                        );
                    cp.append('<div class="title">'+ cpTitle + '</div>');
                } else {
                    return false;
                }
            });
        });

Answer 1

通常，本机语言结构比库函数更快。因此，在性能方面，您最好使用 for 循环，但除非您有数千个元素要迭代，否则两者之间的差异几乎不会被注意到。

在我看来，无论如何，无论您使用的是each 还是for 循环，您的代码都特别无效。下面是我将如何编写它，只使用一个 for 循环，而不是像您那样使用 for 循环和 each 函数调用：

片段：

/* ----- JavaScript ----- */
$(document).ready(function() {
  var
    /* Cache the boxes and create a data object mapping the types to their classes. */
    cp = $(".box"),
    types = {
      c1: "red",
      c2: "green"
    };
    
  /* Iterate over every box. */
  for (var i = 0; i < cp.length; i++) {
    var
      /* Cache the current box and its type. */
      box = $(cp[i]),
      type = box.data("type");
      
    /* Give the box a unique incremental id. */
    cp[i].id = "cp-" + (i + 1);
    
    /* Check whether the type exists in the types object. */
    if (type in types) {    
      /* Add the correct class to the box based on its data type. */
      box.addClass(types[type]);
      
      /* Create a title for the box. */
      box.append("<div class='title'>" + box.data("title") + "</div>");
    }
    else return false;
  }
});

/* ----- CSS ----- */
.box {
  display: table;
  padding: 20px;
}

.red {background-color: red}
.green {background-color: green}

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="box red" data-type="c1" data-title="c1 content" id="cp-1"></div>
<div class ="box green" data-type="c1" data-title="c2 content" id="cp-2"></div>

---

注意：

在编写代码时，您应该在代码性能和代码可读性之间取得平衡，因为可以将慢代码调整为更快，但难以辨认的代码很难维护。

Here 是一个很好的答案，它概述了解决可读性与性能两难的理想方法（在我看来）。我还添加了几个很好的答案，旨在比较 each 和 for 循环的使用：

• $.each() vs for() loop - and performance (Answer 1)
• $.each() vs for() loop - and performance (Answer 2)

Answer 2

您可以在下面查看解释和性能比较。

Speed Question jQuery.each vs. for loop

我也检查了不同的测试。您应该知道的是，通常，本机函数运行得更快，因为库已经在使用它们并执行更复杂的事情。但在某些测试用例中，$.each() 可能比 for 循环更快。