• 技术文章 >web前端 >前端问答

    javascript循环语句哪几种

    青灯夜游青灯夜游2021-07-19 11:51:28原创128

    循环语句有:1、for循环;2、“for...in”循环;3、while循环;4、“do…while”循环;5、forEach循环;6、map;7、filter过滤循环;8、“Object.keys”遍历对象的属性。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环。javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历。

    一、for循环

    for 语句主要用于执行确定执行次数的循环。

    for 语句的基本语法如下:

    for([初始值表达式];[条件表达式];[增量表达式]){
       循环体语句;
    }

    说明:

    上述 3 个表达式中的任意一个都可以省略,但需要注意的是,for() 中的;不可以省略。所以如果 3 个表达式都省略时,for 语句变为:for(;;){循环体语句}。此时需要注意的是,如果循环体内没有退出循环的语句,将会进入死循环。

    示例:

         var sum = 0;
         for(var i = 1; i <= 100;i++){        //在for语句中使用var声明循环变量,使代码更简洁
             sum += i;
         }
         alert("1~100的累加和sum=" + sum);

    二、for...in

    for...in循环主要针对于对象的遍历,当想要获取对象的对应键值时,使用for...in还是比较方便的

    var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"];  //定义数组
    var b = [], num = 0;
    for (var i = 0; i < a.length; i ++) {  //遍历数组
        if (typeof a[i] == "number")  //如果为数字,则返回该元素的值
            b.push(a[i]);
        num ++;  //计数器
    }
    console.log(num);  //返回42,说明循环了42次
    console.log(b);  //返回[1,2,4,56]

    三、while循环

    while 语句是最常用的一种循环语句,在程序中常用于只需根据条件执行循环而不需关心循环次数的情况。

    while 语句的基本语法如下:
    while(条件表达式){
         循环体;
    }

    说明:

    while 语句在执行时,首先判断条件表达式的值,如果为真,则执行循环体语句,然后再对条件表达式进行判断,如果值还是为真,则继续执行循环体语句;否则执行 while 语句后面的语句。如果表达式的值在第一次判断就为假(为 false 或 0 或为 null 等值),则一次也不会执行循环体。

    需要注意的是,为了使 while 循环能正常结束,循环体内应该有修改循环条件的语句或其他终止循环的语句,否则 while 循环将进入死循环,即会一直循环不断地执行循环体。

    例如,下面的循环语句就会造成死循环。

    var i=1,s=0;
    whiel(i<=5){
        s+=i;      
    }

    上述代码中 i 的初始值为 1,由于循环体内没有修改 i 变量的值,所以表达式 i<=5 永远为真,因而循环体会一直执行。

    死循环会极大地占用系统资源,最终有可能导致系统崩溃,所以我们编程时一定要注意避免死循环。

         var sum = 1, i = 1;
         var ex = 1;
         while(sum <= 1.5){
             sum += 1/((i + 1)*(i + 1));
             if(sum > 1.5)
                  break;
             i++;
             ex +=" + 1/(" + i + "*" + i + ")";
         }
         alert("表达式的值小于等于1.5时的i=" + i + ",对应的表达式为:" + ex);

    四、do…while循环

    do…while 语句是 while 语句的变形。两者的区别在于,while 语句把循环条件判断放在循环体语句执行的前面,而 do…while 语句则把循环条件判断放在循环体语句执行的后面。

    do…while 语句的基本语法如下:

    do{
      循环体;
    }while (条件表达式);

    “条件表达式”和“循环体”的含义与 while 语句的相同。在此需要注意的是,do…while 语句最后需要使用;结束,如果代码中没有加上;,则 JavaScript 会自动补上。

    do…while 语句在执行时,首先执行循环体语句,然后再判断条件表达式的值,如果值为真(值为 true 或非 0 值),则再次执行循环体语句。do…while 语句至少会执行一次循环体,这一点和 while 语句有显著的不同。

         var sum = 1, i = 1;
         var ex = 1;
         do{
             sum += 1/((i + 1)*(i + 1));
             if(sum > 1.5)
                  break;
             i++;
             ex +=" + 1/(" + i + "*" + i + ")";
         }while(sum <= 1.5);
         alert("表达式的值小于等于1.5时的i=" + i + ",对应的表达式为:" + ex);

    五、forEach

    forEach的使用方法和map使用方法差不多,只是forEach方法不返回值,只用来操作数据,且循环中途是无法停止的,总是会将所有成员遍历完

    let arrObj = [{
        id: 1,
        name: 'xiaohua'
    },{
        id:2,
        name: 'xiaomin'
    },{
        id:3,
        name: 'xiaobai'
    }]
    arrObj.forEach((item,index,arr)=>{
        console.log(arr) // arrObj
        console.log(index)  // 0 1 2
        console.log(item.name) // xiaohua xiaomin xiaobai
    })

    六、map

    map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止的,总是会将所有成员遍历完

    let arr = [1,2,3,4,5]
    let arr2 = arr.map((n)=>{
          return n+1
    })
    console.log(arr2) // [2,3,4,5,6]
    console.log(arr) // [1,2,3,4,5]

    map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

    let arrObj = [{
        id: 1,
        name: 'xiaohua'
    },{
        id:2,
        name: 'xiaomin'
    },{
        id:3,
        name: 'xiaobai'
    }]
    arrObj.map((item,index,arr)=>{
        console.log(arr) // arrObj
        console.log(index)  // 0 1 2
        console.log(item.name) // xiaohua xiaomin xiaobai
    })

    七、filter过滤循环

    filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

    let arrObj = [{
        id: 1,
        name: 'xiaohua'
    },{
        id:2,
        name: 'xiaomin'
    },{
        id:3,
        name: 'xiaobai'
    }]
    let arr2 = arrObj.filter((item,index,arr)=>{
        return (item.name === 'xiaohua')
    })
    console.log(arr2)  // [{id:1,name:'xiaohua}]

    ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string):

    let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
    let arrNew = arr.filter(Boolean);
    console.log(arrNew)  //  [3, 4, 5, 2, 3]

    Boolean 是一个函数,它会对遍历数组中的元素,并根据元素的真假类型,对应返回 true 或 false.

    八、Object.keys遍历对象的属性

    Object.keys方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。

    let obj = {name: 'xiaohua', sex: 'male', age: '28'}
    console.log(Object.keys(obj))
    // ["name", "sex", "age"]

    判断一个对象是否是空对象,可以用Object.keys(obj).length>0

    【推荐学习:javascript高级教程

    以上就是javascript循环语句哪几种的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 循环语句
    上一篇:javascript基于什么的语言 下一篇:javascript的事件类型都有啥
    VIP会员

    相关文章推荐

    • JavaScript三种强制类型转换是什么• javascript有哪几种书写位置• javascript怎么改变input输入框的值• json和javascript对象有什么区别• javascript怎么判断是否包含指定字符串• JavaScript是网页脚本语言吗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网