javascript中for循环的几种写法与总结

时间:2022-09-08 14:58:09

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。迭代语句又叫循环语句。
JavaScript 支持不同类型的循环:

  1. for - 循环代码块一定的次数
  2. for/in - 循环遍历对象的属性
  3. while - 当指定的条件为 true 时循环指定的代码块
  4. while -do 当指定的条件为 true 时循环指定的代码块
  5. forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
  6. jquery ().each, .each;

    1.for循环的一般写法为:

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环(代码块)开始前执行。一般用于初始化循环中所用的变量
语句 2 定义运行循环(代码块)的条件.位于2ge逗号之间。如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。
语句 3 在循环(代码块)已被执行之后执行
我们来看一个例子
var a
for(var i = 0;i< arr.length;i++) { a = arr[i]; //... }
就是一个常见的,正序循环的for循环。这样写的缺点大家都明白:每次都从arr里取length与i来对比,浪费性能(而且,要是arr的长度是动态变化的,就会出现死循环)。改进这个循环的办法是用变量保存arr.length:
var a
for(var i=0,b=arr.length;i<b;i++){a = arr[i]; }
当然这也也不是最简单的我们可以利用for循环中的语句2.2当语句2为假时。终止循环。语句2为假的情况就有(空字符串,0nullundefined).当语句2为这些情况时就会终止循环。即上面的代码可以改为
for(var i = 0, a;a = arr[i++];) { //... }注意这里只有一个=号,所以这不是判断句,是赋值语句,就是把arr[i++]赋给a,然后判断a是不是真值。只说当i++已经超过数组的长度时,循环肯定要停止才行,而这里真的就停止了,为什么?因为a=arr[i++] ,如果取到了超出数组本身长度的项,只会取得一个undefined,而undefined是假值,循环条件就判断失败了。
当然这也写还是有弊端的当语句2的条件如当a为(空字符串,0nullundefined)中任意一个值时都会终止循环。所以还是根据实际情况来。

**2.for/in - 循环遍历对象的属性**

一般的格式为

for (属性 in 对象)
{
txt=txt + person[x];
}

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
//在此执行代码
txt=txt + person[x];//person[x]分别为John,Doe,25
//x分别为fname,lname,age
}

**1.不按顺序输出**

值得注意的是它不会按照下标的输出,执行时按chrome执行,先把当中的非负整数键提出来,排序好输出,然后将剩下的定义时的顺序输出。如:
"first":"first",
"zoo":"zoo",
"2":"2",
"34":"34",
"1":"1",
"second":"second"
};
for (var i in obj) { console.log(i); };
输出:
1
2
34
first
zoo
second

2.for in循环的对象是原型。如下面3个例子:
例子一:function getNewArray(){
var array=[1,2,3,4,5];
Array.prototype.age=13;
var result = [];
for(var i=0;i<array.length;i++){
result.push(array[i]);
}
alert(result.join(''));
}
例子二:
function getArrayTwo(){
var array=[1,2,3,4,5 ];
var result=[];
for(var i in array){
result.push(array[i]);
}
alert(result.join(''));
}
例子三:
function getNewArrayTwo(){
var array=[1,2,3,4,5 ];
Array.prototype.age=13;
var result=[];
for(var i in array){
result.push(array[i]);
}
alert(result.join(''));
}
例子四:
function finalArray(){
var array=[1,2,3,4,5 ];
Array.prototype.age=13;
var result=[];
for(var i in array){
if(array.hasOwnProperty(i)){
result.push(array[i]);
}
}
alert(result.join(''));
}

例子一二四的结果是12345。而例子三的结果是1234513.建议不要对数组执行for in循环,事实上,在高性能javascript这本书中,也强调了for in循环的不好,因为它总是会访问该对象的原型,看下原型上是否有属性,这在无意中就给遍历增加了额外的压力。例子四是利用如果某个对象具有给定名称的属性,那么Object.prototype.hasOwnProperty(name)返回true。如果该对象是从原型链中继承了该属性,或者根本没有这样的一个属性,则返回false。通过hasOwnProperty限定for in循环在当前中遍历,而不用去考虑它的原型属性。

3. while - 当指定的条件为 true 时循环指定的代码块
一般写法为:
while (条件)
{
需要执行的代码//当条件为真时执行里面的代码。一旦为假时跳出循环
}
4. while -do 当指定的条件为 true 时循环指定的代码块
一般写法为do
{
需要执行的代码
}
while (条件);
跟while不一样的是while -do至少执行一次。应该它是先执行再判断 的;

当然2个相同的是别忘了给他们范围。否则他会一直循环下去的。进入死循环。在结合使用break语句用于跳出循环,跳出循环后如果下面还有代码则继续执行。continue语句则会跳过这一次循环直接进行下一次。

  1. forEach() 方法用于调用数组的每个元素,并将元素传重点内容递给回调函数。
    注意:forEach() 对于空数组是不会执行回调函数的。仅支持ie9+
    一般写法为:
    array.forEach(function(currentValue, index, arr), thisValue)
    1. currentValue 必需项。为当前元素。
    2. index可选。当前元素的索引值。
    3. arr 可选。当前元素所属的数组对象。thisValue 可选。传递给函数的值一般用 “this” 值。
      4.如果这个参数为空, “undefined” 会传递给 “this” 值
      举例说明如下:
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是数组的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出来是21
data.forEach(function(o,p,q){//分别对应:数组元素,元素的索引,数组本身
q[p]=o+1;
})
document.write(data);

注意:forEach无法在所有元素都传递给调用的函数之前终止(而for循环却有break方法),如果要提前终止,必须把forEach放在try块中,并能抛出一个异常。如果forEach()调用的函数抛出foreach.break异常,循环会提前终止:

function foreach(a,b,c){
try{
a.forEach(b,c);
}catch(e){
if(e===foreach.break)return;
else throw e;
}
}
foreach.break=new Error("StopIteration");

}

6. jquery ().each, .each;
6.1 ().each ().each 在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码
}
回调函数是可以传递参数,i就为遍历的索引。

遍历一个数组通常用$.each()来处理 如:

$.each([{name:"limeng",email:"xfjylimeng"},{name:"hehe",email:"xfjylimeng"}],function(i,n)
{
alert("索引:"+i+"对应值为:"+n.name);
});

参数i为遍历索引值,n为当前的遍历对象.


var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
alert(this);
});
输出:one two three four five

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
输出:1 4 7

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

好了就写到这里了。后面会不断完善的

相关文章