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为假的情况就有(空字符串，0，null，undefined).当语句2为这些情况时就会终止循环。即上面的代码可以改为
for(var i = 0, a;a = arr[i++];) { //... }注意这里只有一个=号，所以这不是判断句，是赋值语句，就是把arr[i++]赋给a，然后判断a是不是真值。只说当i++已经超过数组的长度时，循环肯定要停止才行，而这里真的就停止了，为什么？因为a=arr[i++] ，如果取到了超出数组本身长度的项，只会取得一个undefined，而undefined是假值，循环条件就判断失败了。
当然这也写还是有弊端的当语句2的条件如当a为(空字符串，0，null，undefined)中任意一个值时都会终止循环。所以还是根据实际情况来。

 **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

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

相关文章