◆ for 循环:
原生JS最基本的使用:
for (var i=0;i<array.length;i++)
{
.....
}
◆ for in:
循环遍历对象的属性,以任意顺序遍历一个对象的可枚举属性,得到对像的key或数组的下标,。对于每个不同的属性,语句都会被执行。
var obj = {a:1, b:2, c:3};
var array1 = ['a','b','c']
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
for(variable in array1){ //variable 为 index
console.log(variable ) //0 1 2
}
// for (variable in object) {...}
// variable
// 在每次迭代时,将不同的属性名分配给变量。
// object
// 被迭代其枚举属性的对象。
注:for…in 不应该被用来迭代一个下标顺序很重要的 Array 。
for…in数组循环有几个缺点:
- 数组的键名是数字,但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
- for…in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
- 某些情况下,for…in循环会以任意顺序遍历键名。
总之,for…in循环主要是为遍历对象而设计的,不适用于遍历数组
◆ forEach()和map():
avaScript 提供了 foreach() map() 两个可遍历 Array对象 的方法 forEach和map用法类似,都可以遍历到数组的每个元素,而且参数一致;
forEach() 方法对数组的每个元素执行一次提供的函数。forEach无法中途跳出forEach循环,break命令或return命令都不能奏效。
var array1 = ['a', 'b', 'c'];
array1.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] 返回一个新的数组
◆ 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…of循环的优点:
- 有着同for…in一样的简洁语法,但是没有for…in那些缺点。
- 不同于forEach方法,它可以与break、continue和return配合使用。
- 提供了遍历所有数据结构的统一操作接口。
◆ 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]);
});
输出结果为:1 2 3 4
jQuery更适用的遍历方法:
- 先获取某个集合对象
var d=$(“div”);
- 遍历集合对象的每一个元素
$.each(d,function (index,domEle){
......
});
d:要遍历的集合
index:索引值
domEle:获取的每一个dom对