js数组循环用法总结大全详解及区别

发布于:2019-12-14 16:46:11

js数组循环方法有while,do while,for,foreach,for in(对象,数组不推荐),map,filter,reduce,some,every,for..of。js循环中可用break、continue、return 和 throw来跳出或终止循环。面对循环,可谓是有很多的选择。下面是对这些循环各自用法的总结大全详解及区别。

js数组循环用法总结大全详解及区别

在讲循环的之前,先知道一下循环结构的执行步骤 

1、声明循环变量;

2、判断循环条件;

3、执行循环体操作;

4、更新循环变量;

5、然后循环执行2-4,直到条件不成立,跳出循环。

一、for循环。

用于对数组的循环。 for(变量声明;条件;变量更新){ 执行循环体 }

1.通常写法,声明变量也可以有多个赋值。

let arr = [2,3,4,5];

for(let i =0;i<arr.length;i++){
    //执行循环体
}

//for(let i =0,len = arr.length;i<len;i++){
    //执行循环体
//}

2.声明变量位置和变量更新位置可以省略,但条件位置一定不能省略。且;号不能少。

let arr = [2,3,4,5];
let i =0;
for(;i<arr.length;){
    //执行循环体
    i++;
}

3.可用break结束循环,continue跳出当前循环体.

let arr = [2,3,4,5];
let i =0;
for(;i<arr.length;i++){
    if(arr[i]==3){
        continue;//跳出当前循环体    
    }else if(arr[i] == 4){
        break;//结束整个循环
    }
    console.log(arr[i]);
}

二、while和do while循环。

1.条件表达是中可以是js中所有数据类型。但是最终都会转为真假,转换规则如下。

 Boolean:true为真,false为假;

 String:空字符串为假,所有非空字符串为真;

 Number:0为假,一切非0数字为真;

 null/Undefined/NaN:全为假;

 Object:全为真。

2.只要为假,则退出循环。

3.while循环示例。

while(条件){
     //执行循环体
 }
let arr = [2,3,4,5];

let i = 0;
while(i<arr.length){
    console.log(i,arr[i]);
    i++;        
}

//i=0时,循环结束。
let i = arr.length-1;
while(i){
  console.log(i,arr[i]);
  i--;

}

3.do..while,无论条件是否满足,都会执行一次循环。所以比其他循环相同条件下会多执行一次。

  do{
     //执行循环体
  }while(条件);
//其他跟while一样

3.可用break结束循环,continue跳出当前循环体。

(function a(){
    //
    let arr1 = [2,3,4,5];
    let j = 0;
    do{
        console.log(arr1[j]);
        j++;
        if(j==2){
            continue;
        }else if(j==3){
            break;
        }
        console.log('当前index:'+j);

    }while(j<arr1.length);
})();

结果:

js数组循环用法总结大全详解及区别

三、forEach循环

1.是数组原型上的一个方法。所有的数组对象身上都有这个方法,用于对数组的循环。

arr.forEach(function(currentValue,index,arr){
     //执行循环体
 })

2.有三个参数,currentValue为当前循环值,index当前索引即当前值currentValue所在数组下标,arr为数组本身。

3.forEach遇到条件判断,没法中途结束循环,返回值永远是undefined。可用try{}catch(e){}来捕获forEach循环,然后在循环体中当满足一定条件下抛出错误来结束循环。

try{
  [2,3,5,6].forEach((v,index)=>{
    if(v == 3){
        throw new Error(v);
    }
    console.log('循环:',v);
 })
}catch(e){
    //TODO handle the exception
    console.log('结果:',e.message);//3
}

4。如果类数组用forEach来循环,则需要做处理:

let nodeList = document.querySelectorAll("div");
//可用以下几种方法处理:
//[].slice.call()
[].slice.call(nodeList).forEach((v)=>{});
//Array.prototype.slice.call()
Array.prototype.slice.call(nodeList).forEach((v)=>{});

//es6扩展运算符。
[...nodeList].forEach((v)=>{});

//Array.from()
let list = Array.from(nodeList)

因为类数组对象上除了length,没有数组其他的方法。如果要跟数组一样用数组方法则要经过以上处理。

四、map循环。

map返回处理过后的新数组。

let res =arr.map((currentValue,index,arr)=>{
      //可对每一个当前currentValue进行处理,最后res为处理后的新数组。
      return currentValue/2
  });

let r = [2,4,6].map(v=>{
    return v/2;
});
//返回值r  [1,2,3]

四、filter循环。

filter返回过滤过后的新数组。

let res =arr.filter((currentValue,index,arr)=>{

      //表示返回arr数组中的所有偶数。
      return currentValue%2==0;
 });

let r = [2,3,6].filter(v=>{

    return %2==0;
});
//返回值r  [2,6]

五、some循环。

只要数组中只要有一个满足条件,则返回true,如果都不满足则返回false

let res =arr.some((currentValue,index,arr)=>{
  //表示返回arr数组中只要有偶数则返回true,否则返回false。
  return currentValue%2==0;
});
let r = [2,3,6].some(v=>{

    return %2==0;
});

//返回值r  true

六、every循环。

every与some相反。只有所有的值都满足条件,则返回true,只要有一个值不满足则返回false。

let res =arr.every((currentValue,index,arr)=>{
          //表示返回arr数组中所有值都为偶数则返回true,否则返回false。
          return currentValue%2==0;
  });
let r = [2,3,6].every(v=>{
    return %2==0;
});
//返回值r  false

七、js数组循环归并reduce。

reduce(callback,initialValue=null)。依次处理数组的每个成员,最终累计为一个值。

1.如果initialValue不传:

 let arr = [2,3,4];
  let res = arr.reduce((pre,curr)=>{
    console.log(pre,curr);
    return pre+curr;
  });
console.log('res:',res);
//res 9

结果:

js数组循环用法总结大全详解及区别

就arr=[2,3,4]来说总共会执行2次循环。会跳过数组第一个值,从第二个值开始的循环,现当于initialValue=pre=arr[0]=2。

第1循环:return值1= pre +curr;pre 2,curr 3; return值1等于5;

第2次循环:return值2= pre +curr;pre 5,curr 4;即pre为第一次循环的return值5,curr为数组中的第三个值4;return值2等于9;

最后循环结束,整个reduce返回return值2结果为9;

2.如果传入initialValue为10:

 let arr = [2,3,4];

let initialValue=10;

let res= arr.reduce((pre,curr)=>{

    console.log(pre,curr);

    return pre+curr;

},initialValue);

console.log('res:',res);

//res 19

结果:

js数组循环用法总结大全详解及区别

就arr=[2,3,4]来说总共会执行3次循环。即初始化pre=initialValue。

第1循环:

return值1= pre +curr;pre 10,curr 2; return值1等于12;

第2次循环:

return值2= pre +curr;pre 12,curr 3;即pre为第一次循环的return值为12,curr为数组中的第二个值3;return值2等于15;

第3次循环:

return值3= pre +curr;pre 15,curr 4;即pre为第二次循环的return值为15,curr为数组中的第三个值4;return值3等于19;

最后循环结束,整个reduce返回return值3结果为19;

3.上面1、2步是求和,如果reduce内部return中不是求和,如果其他处理方式,其循环运行机制也是一样。

八、for..of循环。

1.可循环数组,类数组如arguments,元素集合nodeList,可以循环所有可迭代对象,字符串,包括Es6中的Map,Set等数据结构。

for(let val of arr){
     //val值
 }

2.循环中如果要实用数组下标怎么办,可通过Object.keys(arr)来循环数组下标,从而处理数组。

for(let index of Object.keys(arr)){
     //index值数组下标
    //arr[index]当前下标值
 }

3.可用break结束循环,continue跳出当前循环体。

九、for..in循环。

1.历对象中可枚举的属性,数组也是属于对象。并且还能遍历出对象中原型prototype上可枚举的属性。数组不推荐。

let arr = [2,3,4]
Object.prototype.getName = function(){
    console.log(this.name);
}
arr.other = 'other';
for(let key in arr){
    console.log(key);//0 1 2 other getName,会把可枚举和原型上课枚举的属性都遍历出来
}

2.可用break结束循环,continue跳出当前循环体。

小结:

1.可用break,continue跳出或终止循环的循环方法有:while循环,do while循环,for循环,for..in循环(数组不推荐),for..of循环

2.如果循环在函数体内,可用return终止循环的循环方法有:while循环,do while循环,for循环,for..in循环(数组不推荐),for..of循环

3.forEach循环不可用break,continue,return结束循环。可通过throw来终止循环。

4.map,filter返回新数组,原数组不影响,循环体内不可用break,continue来结束循环。

5.some,every返回布尔值,true或false。

6.reduce进行数组归并处理,依次处理数组的每个成员,最终累计为一个值,返回数据类型不定。

标签: javascript,JS数组
评论

点赞

收藏

0/500 字数

发布

取消