jQuery资料之for 循环

本文详细介绍了JavaScript中的for循环、for in、forEach、map和for...of,以及jQuery的each方法。强调了各种循环在遍历数组和对象时的适用场景和注意事项,如for...in主要用于遍历对象,不适用于数组;forEach和map适合处理数组,但forEach无法中途退出。同时,文章提到了for...of是ES6新引入的迭代协议,可用于遍历可迭代对象,并且可以与break、continue和return配合使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

◆ 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更适用的遍历方法:

  1. 先获取某个集合对象
var d=$(“div”);
  1. 遍历集合对象的每一个元素
$.each(d,function (index,domEle){
	......
});

d:要遍历的集合
index:索引值
domEle:获取的每一个dom对

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值