for 循环，jQuery循环遍历详解

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  为 indexconsole.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    无论怎样，总返回undefinedvar 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  为 valueconsole.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对
});

for 循环，jQuery循环遍历详解相关推荐

java的for的执行顺序_对java for 循环执行顺序的详解
如下所示: for(表达式1;表达式2;表达式3) { //循环体 } 先执行"表达式1",再进行"表达式2"的判断,判断为真则执行 "循环体&quo ...
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档中对数组的 ...
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
原文:http://www.codeceo.com/article/jquery-plugin-develop.html 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我 ...
jquery方法属性详解
jquery方法属性详解! 1.jquery简介 jquery是什么,作用是什么? jquery用来简化js操作DOM元素 jquery不能用DOM的方法,DOM不能用jquery的方法各种选择器的 ...
[zz]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩 ...
jQuery选择器代码详解（一）——Sizzle方法
对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家.我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法. 若需要转载,请写明 ...
jQuery 选择器(checked)详解
jQuery 选择器(:checked)详解 jQuery的:checked选择器用于匹配所有选中的表单域元素,将其封装为jQuery对象并返回. 选中的表单域是指具有checked属性的radio和 ...
图遍历详解（C语言版）
文章目录一.定义二.方法 1.深度优先遍历 2.广度优先遍历三.实现 1.无向图或强连通有向图遍历 2.非连通图遍历结语附录一.定义从给定图中任意指定的顶点(称为初始点)出发,按照某种搜 ...
二叉树层次遍历算法 python_二叉树的遍历详解：前、中、后、层次遍历(Python实现)...
二叉树的遍历详解:前.中.后.层次遍历(Python实现) 二叉树是一种常见的数据结构,而它的常见遍历方法有前序遍历.中序遍历.后续遍历.层次遍历--掌握这几种遍历方法是很有必要的. 假设我们二叉树节 ...

for 循环，jQuery循环遍历详解

for 循环，jQuery循环遍历详解相关推荐

最新文章

热门文章