javascript中遍历数组的几种方式javascript中遍历数组的几种方式电脑实用技巧分享百家号javascript中遍历数组的几种方式有一个数组｛0,1,2,3,4,5｝通过循环遍历数组打印到页面中，每一行打印一个数字。常用的循环语句有for、while、do-while、for-in，forEach以及jQuery中提供的循环的方法；ES6中提供的很多用来循环对象的方法如map。在 Javascript 中，当某些条件得到满足时，用 break 语句来中断一个循环的运行。（注意：也可用 break 语句退出一个 switch 块。具体Javascript 条件语句）。如果是一个 for 或者 for...in 循环，在更新计数器变量时使用 continue 语句越过余下的代码块而直接跳到循环的下一次重复中。）1.for循环代码如下：&script type="text/javascript">var num=new Array(0,1,2,3,4,5);for (var i=0;i<num.i++){document.write(num[i]+"");}&/script>也可以反向for循环，这里就不写了。在脚本的运行次数已确定的情况下使用 for 循环语法：for (变量=开始值;变量<=结束值;变量=变量+步进值){需执行的代码}这里步进值可以为负。如果步进值为负，需要调整 for 声明中的比较运算符。2.for...in声明遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）//循环数组时for-in循环相对性能很差，其主要用于循环对象。代码如下：&script type="text/javascript">var num=new Array(0,1,2,3,4,5);for(j in num){document.write(num[j]+"");}&/script>For...In 声明用于对数组或者对象的属性进行循环操作。for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。语法：for (变量 in 对象){在此执行代码}“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。3.While 循环代码如下：&script type="text/javascript">var num=new Array(0,1,2,3,4,5);var k=0;while(k<num.length){document.write(num[k]+"");k++;}&/script>while 循环用于在指定条件为 true 时循环执行代码。语法：while (变量<=结束值){需执行的代码}注意：除了<=，还可以使用其他的比较运算符。4.do-while循环&script type="text/javascript">var num=new Array(0,1,2,3,4,5);var k=0;do{document.write(num[k]+"");k++;}while(k<num.length)&/script>do...while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为 true 时，它会继续这个循环。所以可以这么说，do...while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。语法：do{需执行的代码}while (变量<=结束值)5、forEach、map、jquery中$.each()以及ES6所提供的对象遍历方法因文章篇幅问题，将作为单独的几篇文章贴出来。IT技术资料分享个人整理自互联网。每天学一点，基础很重要本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。电脑实用技巧分享百家号最近更新：简介:电脑实用技巧分享- 个人整理自互联网作者最新文章相关文章　　忙了好一段时间，项目上线后终于有那么一点点空档期静下来整理一些问题了。当我们在开发项目的时候，用到遍历的地方肯定少不了，那么我们有那么多的遍历方法，在不同情况下用那种方法会更优雅而且还没bug呢？
　　首先，我在这里先列出几种常见的遍历机制，然后针对部分来做一个我对它的理解，有不同看法的老铁也可以分享一下，下面是我列出来的几种遍历的方法，另外我们常用来中断循环的语句我在这里简单的提一下：
　　a、continue： 中断本次循环；
　　b、return和break直接跳出循环。
var arr = [1, 2, 3]
for(var i = 0; i & arr. i++) {
//do something
// for...of...
for(var i of arr) {
//do something
// for...in..
for(var i in arr) {
//do something
// forEach()
arr.forEach((item, index, arr) =& {
//do something});
arr.map((value,index,array) =& {
　　//do something
　　在开发上一个项目的时候，我在用for...in...这个方法遍历的时候就遇到一个诡异的bug，在android手机是完美的展示，但是在iPhone手机的时候，就出现了遍历后的数据竟然是翻倍的，而且数据是重复的。然后我就想着用array.forEach的方法，来解决问题总该行来吧，在正常逻辑的情况下是可以解决问题的，但是，在稍微复杂的逻辑了，有时候我们要中断forEach遍历时，这时候就会显得软弱无力了，因为在forEach的遍历机制里是不支持中断遍历的，然后我只能寻求其他的解决方案了。
　　下面我在这对上述列举的遍历方法逐个逐个的分析一下，有些分析不到位的，或者有不同的看法的老铁们请分享你的看法：
　　1. 普通的for循环
var arr = [1, 2, 3]
for(var i = 0; i & arr. i++) { // 这里的i是代表数组的下标
console.log(i); // 0, 1, 2
　　最简单的一种，正常用的话也不会出现什么问题，想中断也可以中断，性能上也还可以。
　　2. 优化版的for循环
var arr = [1, 2, 3]
for(var i = 0, len = arr. i & i++) { // 这里的i是代表数组的下标
console.log(i); // 0, 1, 2 };　
　　使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。这种方法基本上是所有循环遍历方法中性能最高的一种，并且这一类型的for循环可以通过用break来中断循环，如下图所示：
　　3. for...of...遍历(这种遍历支持ES6)
var arr = [1, 2, 3]
for(var item of arr) { // item代表数组里面的元素
console.log(item); // 1, 2, 3
　　1、 这是最简洁、最直接的遍历数组元素的语法
　　2、&这个方法避开了for-in循环的所有缺陷
　　3、 与forEach()不同的是，它可以正确响应break、continue和return语句
　　4、性能要好于forin，但仍然比不上普通for循环
　　4. forEach()
var arr = [1, 2, 3];
arr.forEach((item, index, arr) =& { // item为arr的元素，index为下标，arr原数组
console.log(item); // 1, 2, 3
console.log(index); // 0, 1, 2
console.log(arr); // [1, 2, 3]
　　这种遍历便捷还是挺便捷的，看起来优雅，对目标数组的操作很人性化，要元素给元素，要下标给下标，但是当某种情况你想中断遍历的时候，你就会感觉它就像鸡肋，食之无味，弃之可惜。由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。而且forEach的性能也会比普通的for循环弱。又下面的例子我们可以看到，我们常用的return false是可以终止代码继续往下执行的，但是在forEach遍历中，并没有终止循环，所以在用forEach的时候，要考虑使用场景了。
　　5.some()
var arr = [1, 2, 3];
arr.some((item, index, arr) =& { // item为数组中的元素，index为下标，arr为目标数组
console.log(item); // 1, 2, 3
console.log(index); // 0, 1, 2
console.log(arr); // [1, 2, 3]
　　some作为一个用来检测数组是否满足一些条件的函数存在，同样是可以用作遍历的函数签名同forEach，有区别的是当任一callback返回值匹配为true则会直接返回true，如果所有的callback匹配均为false，则返回false。
　　some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true&, 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
　　7. every()
var arr = [1, 2, 3];
arr.every((item, index, arr) =& { // item为数组中的元素，index为下标，arr为目标数组
return item & 0; // true
return index == 0; // false
　　every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
　　every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回&false&，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
　　 8. for...in...遍历
var arr = [1, 2, 3]
for(var item in arr) { // item遍历数组时为数组的下标，遍历对象时为对象的key值
console.log(item); // 0, 1, 2
　　for...in更多是用来遍历对象，很少用来遍历数组， 不过 item 对应与数组的 key值，建议不要用该方法来遍历数组，因为它的效率是最低的。
　　9. filter()
var arr = [1, 2, 3];
arr.filter(item =& { // item为数组当前的元素
return item & 1; // [2, 3]
　　filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
　　10.&map()　
var arr = [1, 2, 3];
arr.map(item =& { // item为数组的元素
console.log(item); // 1, 2, 3
return item * 2; // 返回一个处理过的新数组[2, 4, 6]
　　map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
　　map() 方法按照原始数组元素顺序依次处理元素。
　　这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach
　　上述简单的介绍了各种遍历的方法。
　　在前面我有提到一个苹果手机遍历出现数据重复的bug，那么我在这里做一个用for...in...案例，首先来看看代码：
for (let item in this.currentForm) {
　　var subFormDataObj = {};
if (this.currentForm[item].isRequired === 2 && !this.currentForm[item].subjectValue && this.currentForm[item].subjectType != 5) {
this.isSubmit = true;
this.hideLoading();
this.Toast('尚有数据未完成，提交失败！');
return false;
if (this.expressionTest(this.currentForm[item].subjectValue)) {
this.Toast('内容不能含有表情符，请重新输入！');
this.isSubmit = true;
this.hideLoading();
return false;
if (this.currentForm[item].subjectName.indexOf('手机号') & -1) {
if(!this.checkPhone(this.currentForm[item].subjectValue)) {
this.isSubmit = true;
this.hideLoading();
return false;
subFormDataObj.subjectId = this.currentForm[item].subjectId;
subFormDataObj.subjectValue = this.currentForm[item].subjectV
subFormDataObj.picture = this.currentForm[item].
subFormDataObj.isRequired = this.currentForm[item].isR
if (this.currentForm[item].subjectType == 5) {
if (this.listPicStr == '') {
this.isSubmit = true;
this.hideLoading();
this.Toast('尚有数据未完成，提交失败！');
return false;
// subFormDataObj.picture = "data:image/base64," + this.listPicStr.replace(/data:image\/base64,/g,'') || '';
subFormData.push(subFormDataObj);
alert(JSON.stringify(subFormData));
　　我们看一下安卓手机和苹果手机alert出来的数据有什么区别：在截图中我们就可以发现，苹果手机整体遍历了2轮，这样个结果是不是很诡异？是的我也觉得很诡异，怎么来解决呢，很多很学会想到一些方法，比如用数组去重的方法，并且es6的去重方法很优雅（var newArr = Array.from(new Set(subFormData))），或者其他去重的方法，这样做并没有什么不好，比较方法有千千万，喜欢就好。当时因为考虑到里面的逻辑问题，我就直接改了一行代码，用了最普通的方法，因为性能上会有优势，所以我就用了普通的for循环解决了这个问题。
　　换了一种遍历方法后，这个问题就解决了，在这里简单的做了一些开发时遇到的坑做了一些总结，有不同看法的各路大神，跪求分享！！！
阅读(...) 评论()JavaScript数组的各种遍历方式总结JavaScript数组的各种遍历方式总结最好的中国人百家号遍历数组是任何一门语言必不可少的功能，本文主要介绍JavaScript中遍历数组的各种方法。首先定义一个数组，如下图所示：1、every函数：arr.every(callback(currentValue, index, array)[, thisArg])测试数组的所有元素是否都通过了指定函数的测试callback 用来测试每个元素的函数。thisArg 可选，如果为 every 提供一个 thisArg 参数，在该参数为调用 callback 时的 this 值。如果省略该参数，则 callback 被调用时的 this 值，在非严格模式下为全局对象，在严格模式下传入 undefined。currentValue：元素值，index：元素的索引，array：原数组every 不会改变原数组。当callback函数返回false时，循环结束，示例如下：打印结果如下：2、some函数：arr.some(callback(currentValue, index, array)[, thisArg])currentValue：元素值，index：元素的索引，array：原数组some 不会改变原数组。与every不通的是，当callback函数返回true时，循环结束，示例如下：打印结果如下：3、forEach函数：arr.forEach(callback(currentValue, index, array)[, thisArg])为每个元素都执行callback函数，直接修改原数组，没有返回值，循环过程中不能停止，示例如下：打印结果如下：4、map函数：arr.map(callback (currentValue, index, array)[, thisArg])返回一个经过处理的新数组,不会破坏原来的数组，需要注意的是callback函数里面需要返回currentValue，也就是说map是通过每次循环返回的值作为元素组成新数组的，并且在循环过程中不能停止，示例如下：打印结果如下：5、filter函数：arr.filter(callback (element, index, arrArg)[, thisArg])对数组中的每个元素都执行一次指定的函数（callback），并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为 true 的原数组元素。示例如下：打印结果如下：6、reduce函数：arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值，返回函数累计处理的结果。参数说明：callback：执行数组中每个值的函数，包含四个参数accumulator 上一次调用回调返回的值，或者是提供的初始值（initialValue）currentValue 数组中正在处理的元素currentIndex 数据中正在处理的元素索引，如果提供了 initialValue ，从0开始；否则从1开始initialValue 可选项，其值用于第一次调用 callback 的第一个参数。如果没有设置初始值，则将数组中的第一个元素作为初始值。空数组调用reduce时没有设置初始值将会报错。示例如下：打印结果如下：7、for循环：for循环是使用频率较高的方法，效率也较高。数据量较大时，建议用此种方法。它可以通过break语句跳出循环，也可以通过continue语句跳过当前循环，示例如下：打印结果如下：需要注意的是for循环里面不支持return语句，如下写法会报错：打印结果如下：for方法还有两种变体如下，但是效率不高：这种方式效率最低需要ES6支持，性能要好于forin，但仍然比不上普通for循环js数组遍历函数虽然比较多，但各有各的用途，还希望大家在写项目代码的过程中多多尝试一下。如果不知选哪个，或者比较注重效率的话，最佳的选择还是普通for循环。本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。最好的中国人百家号最近更新：简介:为您提供科技信息、产品评价的第一手资料。作者最新文章相关文章您所在的位置： &
javascript中的each遍历
时间： 编辑：wulala9 来源：本站整理
each的用法
&1.数组中的each
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1
2.遍历Dom元素中
&script type="text/javascript" src="/jquery/jquery."&&/script&
&script type="text/javascript"&
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
&button&输出每个列表项的值&/button&
&li&Coffee&/li&
&li&Milk&/li&
&li&Soda&/li&
依次弹出Coffee，Milk，Soda
&3.each和map的比较
下面的例子是获取每一个多框的ID值；
each方法：
定义一个空数组，通过each方法，往数组添加ID值；最后将数组转换成字符串后，alert这个值；
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
var str = arr.join(",");
alert(str);
将每个:checkbox执行return this.id；并将这些返回值，自动的保存为jQuery对象，然后用get方法将其转换成原生Javascript数组，再使用join方法转换成字符串，最后alert这个值；
$(function(){
var str = $(":checkbox").map(function() {
return this.
}).get().join();
alert(str);
当有需一个数组的值的时候，用map方法，很方便。
&4.jquery中使用each
例遍数组，同时使用元素索引和内容。（i是索引，n是内容）
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
例遍对象，同时使用成员名称和变量内容。（i是成员名称，n是变量内容）
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
例遍dom元素，此处以一个input表单元素作为例子。&如果你dom中有一段这样的代码&&input name="aaa" type="hidden" value="111" /&&&input name="bbb" type="hidden" value="222" /&&&input name="ccc" type="hidden" value="333" /&&&input name="ddd" type="hidden" value="444"/&&然后你使用each如下
$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值
5.each中根据this查找元素
实现效果&回复&两个字只有在鼠标经过的时候才显示出来
&ol class="commentlist"&
&li class="comment"&
&div class="comment-body"&
&p&嗨，第一层评论&/p&
&div class="reply"&
&a href="#" class=".comment-reply-link"&回复&/a&
&ul class="children"&
&li class="comment"&
&div class="comment-body"&
&p&第二层评论&/p&
&div class="reply"&
&a href="#" class=".comment-reply-link"&回复&/a&
&/div&&/li&
js代码如下
$("div.reply").hover(function(){
$(this).find(".comment-reply-link").show();
},function(){
$(this).find(".comment-reply-link").hide();
实现效果，验证判断题是否都有选择
&ul id="ulSingle"&
&li class="liStyle"&
1.&&阿斯顿按时&label id="selectTips" style="display: none" class="fillTims"&请选择&/label&
&!--begin选项--&
&li class="liStyle2"&
&span id="repSingle_repSingleChoices_0_labOption_0"&A
&/span&.阿萨德发&input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" /&
&input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /&&/li&
&li class="liStyle2"&
&span id="repSingle_repSingleChoices_0_labOption_1"&B
&/span&.阿萨德发&input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" /&
&input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" /&&/li&
&li class="liStyle2"&
&span id="repSingle_repSingleChoices_0_labOption_2"&C
&/span&.阿斯顿&input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" /&
&input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /&&/li&
&!--end选项--&
//验证单选题是否选中
$("ul#ulSingle&li.liStyle").each(function (index) {
//选项个数
var count = $(this).find("ul&li&:checkbox").
var selectedCount = 0
for (var i = 0; i & i++) {
if ($(this).find("ul&li&:checkbox:eq(" + i + ")").attr("checked")) {
selectedCount++;
if (selectedCount == 0) {
$(this).find("label#selectTips").show();
$(this).find("label#selectTips").hide();
6.官方解释以下是官方的解释：&jQuery.each(object, [callback])&概述&通用例遍方法，可用于例遍对象和数组。&不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。&参数&objectObject&需要例遍的对象或数组。&callback (可选)Function&每个成员/元素执行的回调函数。
热门关键字js 获取函数的所有参数和遍历JavaScript某个对象所有的属性名称和值的方法
获取所有参数
function test(){
for(var i=0;i&arguments.i++)
document.write(arguments[i]);
遍历某个对象所有的属性名称和值的方法
&script language="javascript"&
var obj = new Object();
obj.myname = "我是对象";
obj.pro2 = "23";
obj.pro3 = "abcdeg"; php程序员站
for (items in obj){
document.write("属性:"+items+"的值是 ("+ obj[items] +")");
document.write("&br&");
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.037 (s). 13 q(s)}