当我们的网页中存在同一组的复选框时，我们需要使用JS来遍历取值，如果这个复选框很多数量达到上千个时，我们就需要考虑执行效率的问题，毕竟JS是运行在客户端的，对客户端机器的要求颇高。下面给出实现js遍历数组的3种方法以及他们各自的执行效率。详细介绍如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery</title>
<style type="text/css">
#info {
color:#FF0000;
height:150px;
}
</style>
</head>
<body>
<div id="div1">
<input value="5000" type="text" id="txt1"/><input type="button" id="btn1" value="生成 checkbox"/>
<div id="info">
<input type="button" id="btnTest1" onclick="fun1(this)" value="第一种"/><span></span><br/>
<input type="button" id="btnTest1" onclick="fun2(this)" value="第二种"/><span></span><br/>
<input type="button" id="btnTest1" onclick="fun3(this)" value="第三种"/><span></span><br/>
</div>
<div id="box"></div>
</div>
</body>
<script type="text/javascript">
var g=function(id) {return document.getElementById(id);};
g("btn1").onclick=function() {
var val=g("txt1").value-0;
if(!isNaN(val)) {
var box=g("box");
box.innerHTML="";
for(var i=0;i<val;i++) {
var chk=document.createElement("input");
chk.type="checkbox";
box.appendChild(chk);
}
}
}
//这里为了简单就没有判断type
var fun1=function(obj) {//第一种直接在for中取数组长度
var chks=g("box").getElementsByTagName("input");
var b=!chks[0].checked;
var d=new Date();
for(var i=0;i<chks.length;i++) {
//chks[i].checked=b;
}
obj.nextSibling.innerHTML=new Date()-d;
}
var fun2=function(obj) {//第二种
var chks=g("box").getElementsByTagName("input");
var b=!chks[0].checked;
var d=new Date();
for(var i=0;chks[i];i++) {
//chks[i].checked=b;
}
obj.nextSibling.innerHTML=new Date()-d;
}
var fun3=function(obj) {//第三种将数组的长度放到一个局部变量中
var chks=g("box").getElementsByTagName("input");
var b=!chks[0].checked;
var length=chks.length;
var d=new Date();
for(var i=0;i<length;i++) {
//chks[i].checked=b;
}
obj.nextSibling.innerHTML=new Date()-d;
}
</script>
</html>
结果：
当有5000个复选框时,多次测试结果：
第一种：每次循环读取 chks 集合的属性 length；
第二种：每次循环定位 chks[i]；
第三种：每次循环读取 变量 length。
测试结果
第一种：406 ms
第二种：16 ms
第三种：0 ms
第三种直接读取变量速度最快，第二种集合定位次之，第一种最慢，每种之间相差一个数量级。第一种之所以慢是因为访问集合的length属性时需要遍历prototype，从而获取length，这就增加了不必要的开销，因为length只是终止条件，并未参与实际运算。
分享到：
相关推荐
js 实现 JavaScript遍历数组! 值得下载看看!资源免费,大家分享!!
本示例中，我们关注的是如何遍历数组并将其中的字符串元素用逗号连接起来，同时如何获取循环中的最大索引或最后一个索引。下面我们将详细探讨这些知识点。 首先，我们来看如何遍历数组并进行字符串拼接。在这个例子...
本篇文章将深入探讨如何使用 JavaScript 实现递归遍历数组，这是一项前端开发者必须掌握的基础技能。 首先，我们要了解什么是递归。递归是一种编程技术，它通过函数或方法调用自身来解决问题。在遍历数组时，递归...
js中怎样遍历数组？介绍的是js中怎样遍历数组？
js遍历数组、判断是否存在字符串.xlsm
在给定的代码示例中，我们探讨了JavaScript中三种不同的方法来遍历数组或类数组对象，并评估了它们的性能。这段代码主要是通过创建一个简单的HTML页面，并在这个页面上实现了一个功能：根据用户输入的数字，动态生成...
主要介绍了JavaScript遍历数组的三种方法map、forEach与filter,结合实例形式详细分析了javascript针对数组遍历的map、forEach与filter三种方法相关操作技巧与注意事项,需要的朋友可以参考下
在JavaScript中，遍历数组和对象是两种不同的操作，因为它们的数据结构和访问方式有所区别。数组是一种有序的元素集合，通常用于存储一系列数值或对象，而对象则是一种键值对的集合，常用于表示复杂的数据结构。 1....
本资源列举了数组所常用的一系列方法案例分析，包括：for 循环、for...of 循环、forEach 方法、reduce 方法、map 方法、filter 方法、some 方法以及 every 方法案例。不仅对它们各自的语法进行了精准剖析，还通过...
在JavaScript（JS）中，数组是一种非常重要的数据结构，它允许我们存储多个数据项，并通过索引来访问这些数据。在给定的代码片段中，展示了几种常见的数组操作，包括求最大值、求最小值、倒序遍历数组、数组元素连接...
js 二维数组 遍历 轻松实现实现 二维数组输出 包含高级for循环
本文实例讲述了JavaScript遍历数组和对象的元素。分享给大家供大家参考，具体如下： 博主最近一直在学习JavaScript，今天给大家分享如何遍历JavaScript中的数组和对象的元素，这篇文章相当于做一篇小的笔记，希望能...
本文实例分析了JS遍历数组及打印数组的方法。分享给大家供大家参考，具体如下： 一直头痛与JS的打印数组，也没看到什么比较好的方法，写一个简单的方法备用。 // 遍历数组 var dd = { 'a' : '111111', 'b' : '...
`forEach`方法提供了一种简洁的方式来遍历数组，它会为数组的每个元素调用一个提供的函数： ```javascript arr.forEach((value, index, array) => { console.log(value, index); }); ``` 3. `map` `map`方法并不...
* 在遍历数组时，需要小心处理数组边界的情况，以免出现溢出错误。 遍历二维数组是一种非常重要的技术，在实际应用中非常常见。通过本文，我们希望您能够更好地理解 Javascript 中的二维数组遍历，并更好地应用于...
最常用的遍历数组的方法就是for循环。以下是一个示例，展示如何遍历数组并将每个元素打印到控制台： ```javascript var arr = ['blue', 2, true, 4, 5, 6, 7]; for (var i = 0; i ; i++) { console.log(arr[i]); }...
嵌套的复杂数组对象，删除深层嵌套后返回新数组。 如：var data = [ { id: '1', name: 'www' }, { id: '2', name: 'qqq' }, { id: '3', name: 'eee', children: [ { id: '4', name: ...
本篇文章将详细介绍JavaScript中几种遍历数组的方法，并通过代码实例进行演示。 1. **for循环**：这是最基础的遍历数组的方式，通过索引来访问数组的每个元素。 ```javascript let arr = ["A", "B", "C", "D", "E...
在JavaScript编程中，遍历数组是一项常见的操作，用于访问数组中的每个元素。有两种常见的方法来实现这个任务：使用`for`循环和`for...in`循环。然而，根据描述和提供的代码示例，这里强烈推荐使用`for`循环来遍历...