1.for 循环
原生JS最基本的使用:

for (var i=0;i<cars.length;i++)
{
.....
}

for - 循环代码块一定的次数
2.for in
for/in - 循环遍历对象的属性
以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]); // for (variable in object) {...}
// variable
// 在每次迭代时,将不同的属性名分配给变量。
// object
// 被迭代其枚举属性的对象。

for…in 不应该被用来迭代一个下标顺序很重要的 Array .

let array2 = ['a','b','c']
let obj1 = {
name : 'lei',
age : '16'
} for(variable in array2){ //variable 为 index
console.log(variable ) //0 1 2
} for(variable in obj1){ //variable 为属性名
console.log(variable) //name age
}

3.forEach()和map()
JavaScript 提供了 foreach() map() 两个可遍历 Array对象 的方法 forEach和map用法类似,都可以遍历到数组的每个元素,而且参数一致;
forEach() 方法对数组的每个元素执行一次提供的函数。

let a = ['a', 'b', 'c'];
a.forEach(function(element) {
console.log(element);
});
array.forEach(callback(currentValue, index, array){
//do something
}, this) array.forEach(callback[, thisArg])

参数:

callback为数组中每个元素执行的函数,该函数接收三个参数:

currentValue(当前值)
数组中正在处理的当前元素。
index(索引)
数组中正在处理的当前元素的索引。
array
forEach()方法正在操作的数组。
thisArg可选可选参数。当执行回调 函数时用作this的值(参考对象)。
forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到

两者的不同点:
不同点:

forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined;

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组;

var array1 = [1,2,3,4,5];

var x = array1.forEach(function(value,index){

    console.log(value);   //可遍历到所有数组元素

    return value + 10
});
console.log(x); //undefined 无论怎样,总返回undefined var y = array1.map(function(value,index){ console.log(value); //可遍历到所有数组元素 return value + 10
});
console.log(y); //[11, 12, 13, 14, 15] 返回一个新的数组

4.for…of
ECMAScript 6新方法
for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环,以替代 for…in 和 forEach() ,并支持新的迭代协议。for…of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等 for…of 循环仅适用于迭代。 而普通对象不可迭代

let array2 = ['a','b','c']
let obj1 = {
name : 'lei',
age : '16'
} for(variable of array2){ /variable 为 value
console.log(variable ) //'a','b','c'
} for(variable of obj1){ //<strong>普通对象不能这样用</strong>
console.log(variable) // 报错 : main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function

总结 :
:for in总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值
结果for of不能对象用
对于新出来的Map,Set上面
for…in循环会遍历一个object所有的可枚举属性。
for…of会遍历具有iterator接口的数据结构

如果是数组循环:
原始的for循环比较麻烦,forEach,这种写法的问题在于,无法中途跳出forEach循环,break命令或return命令都不能奏效。
for…in数组循环有几个缺点:
数组的键名是数字,但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
for…in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
某些情况下,for…in循环会以任意顺序遍历键名。
总之,for…in循环主要是为遍历对象而设计的,不适用于遍历数组
for…of循环相比上面几种做法,有一些显著的优点:
有着同for…in一样的简洁语法,但是没有for…in那些缺点。
不同于forEach方法,它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

如果是循环对象,用for in

jquery 循环的用法
jQuery的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 4 7

var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});

//这个each就有更厉害了,能循环每一个属性
//输出结果为:1 2 3 4

jQuery更适用的遍历方法
1)先获取某个集合对象
2)遍历集合对象的每一个元素
var d=$(“div”);
$.each(d,function (index,domEle){
d是要遍历的集合
index就是索引值
domEle 表示获取遍历每一个dom对
});

    $(function(){
        var con=[
            {
                "image1":"img/1524880084962.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879960117.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879605807.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879181488.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            }
            
        ]
        var html="";
        $.each(con, function(k,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
            html+='<li class="shopBox">'+
                    '<div class="shopImg"><img src='+con[k].image1+'/></div>'+
                    '<div class="shopListName">'+con[k].shopName+'</div>'+
                    '<div class="shopPrice">'+
                        '<span class="price">¥'+con[k].price+'</span>'+
                        '<span class="marketPrice">¥'+con[k].markPrice+'</span>'+
                    '</div>'+
                '</li>'
        });
        $(".shop_box").append(html);
    })

注意如果是后台返回的是Json字符串请一定要转换一下:

 //data是后台传过来的字符串
$.each(JSON.parse(data), function (index, obj) { //使用JSON.parse转换为JavaScript对象。 要不控制台报错 index是下标 obj是内容 如果是对象的话就 obj.(名称就可以)
alert(index);
});

如果不使用JSON.parse()来转换  会报   Uncaught TypeError: Cannot use 'in' operator to search for '156'   错误

————————————————
版权声明:本文为CSDN博主「_dalianmiao」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hani_wen/article/details/81878112

[转发]for 循环,jQuery循环遍历详解的更多相关文章

  1. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  2. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  3. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  4. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  5. OpenCV学习C++接口 Mat像素遍历详解

    OpenCV学习C++接口 Mat像素遍历详解

  6. jquery inArray()函数详解

    jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...

  7. jQuery extend方法详解

    先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...

  8. jQuery的观察者模式详解 转载

    jQuery的观察者模式详解 投稿:hebedich 本文主要是介绍了jQuery中on方法及trigger方法,以及围绕这个方法来体验的观察者模式,是篇非常不错的文章,对我们理解观察者模式很有帮助. ...

  9. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  10. jQuery.hasClass() 函数详解

    jQuery.hasClass() 函数详解 hasClass()函数用于指示当前jQuery对象所匹配的元素是否含有指定的css类名. 该函数属于jQuery对象(实例). 语法 JavaScrip ...

随机推荐

  1. Bzoj1305 [CQOI2009]dance跳舞

    Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 2925  Solved: 1221 Description 一次舞会有n个男孩和n个女孩.每首曲子开始时 ...

  2. c语言输出可见字符

    #include <stdio.h> void main() { int i; //可见字符是32-126 ;i<;i++) { putchar(i); } getchar(); }

  3. 163k地方门户网站系统团购定时结束限量控制

    #coding=utf8 #!/usr/bin/env python # 网站自动审核系统 import pymssql import re import sys import datetime im ...

  4. 微信电脑版(Mac和Windows)安装

    内容简介 1.微信Windows版 2.微信Mac版 3.总结优势 微信电脑版 众所周知,腾讯公司(马化腾先生执掌的巨头公司)开发的超成功App:微信.一经推出便引发业界轰动,使用人数更是直逼QQ. ...

  5. Mysql安装与主从配置

    安装MySql 操作系统:Windows Server 2008 R2 Standard MySql版本:mysql-5.7.17-winx64 第一步:解压mysql-5.7.17-winx64.z ...

  6. FreeSWITCH异常原因总结

    最经在玩FreeSWITCH的时候,遇到很多的问题,特此总结一下,希望以后不要犯类似的错误了: 1.Client端无法注册,但是FS运行正常? 解决办法:查看防火墙是否关闭./etc/init.d/i ...

  7. 序列化与反序列化之Kryo

    序列化:把对象转换为字节序列的过程称为对象的序列化. 反序列化:把字节序列恢复为对象的过程称为对象的反序列化. 需要序列化的情况: 当你想把的内存中的对象状态保存到一个文件中或者数据库中时候: 当你想 ...

  8. RN animated帧动画

    效果图: 代码: export default class AnimationFrameScene extends Component { constructor () { super() this. ...

  9. 使用MYSQL数据库实现编程----第二章第三章课堂知识小总结

    第二章1:创建数据库create database myschool 2.数据类型  1.整型 int  2.小数 double  精确度要求高的 ----Decimal(18,4)  2222222 ...

  10. KJBitmap与KJHttp的深度用法

    摘要 本文原创,转载请注明地址:http://kymjs.com/code/2015/09/24/01这篇文章是对KJFrameForAndroid使用的一个深入学习 之前写过一些有关KJFrame的 ...