一、引言

本文主要是利用一个例子，讲一下原生js中常用的四种循环方式的使用与区别：

实现效果：

  1. 在网页中弹出框输入0   网页输出“欢迎下次光临”
  2. 在网页中弹出框输入1   网页输出“查询中……”
  3. 在网页中弹出框输入2   网页输出“取款中……”
  4. 在网页中弹出框输入3   网页输出“转账进行中……”
  5. 在网页中弹出框输入其他字符   网页输出“无效按键”

四种循环：

  • for循环
  • while循环
  • for  in 循环
  • for  of 循环

二、for循环

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>for 循环</title>

 </head>

 <body>

 <script>

    var input=parseInt(prompt("请按键:"));

    for(var i=input;i!=;i++){

      if(i==1){

       document.write("查询中...");

       break;

       }else if(i==2){

       document.write("取款中...");

       break;

       }else if(i==3){

       document.write("转账进行中...");

       break;

       }else{

       document.write("无效按键");

      }

      break;

    }

    if(input==0){

     document.write("欢迎下次光临！");

     }

 </script>

 </body>

</html>

三、while循环

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>while 循环</title>

 </head>

 <body>

 <script>

     var input=-1;

     while((input=parseInt(prompt("请按键")))!=){

       if(input==1){

       document.write("查询中...");

       break;

       }else if(input==2){

       document.write("取款中...");

       break;

       }else if(input==3){

       document.write("转账进行中...");

       break;

       }else{

       document.write("无效按键");

      }

      break;

     }

     if(input==0){

     document.write("欢迎下次光临！");

     }

  </script>

 </body>

</html>

四、for in 循环

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>for in 循环</title>

 </head>

 <body>

   <script>

      var input=parseInt(prompt("请按键:"));

      var array=new Array();

      array.push(input);

      for(var key in array){

      if(array[key]==0){

       document.write("欢迎下次光临！");

       }else if(array[key]==1){

       document.write("查询中...");

       break;

       }else if(array[key]==2){

       document.write("取款中...");

       break;

       }else if(array[key]==3){

       document.write("转账进行中...");

       break;

       }else{

       document.write("无效按键");

      }

      break;

      }

    </script>

 </body>

</html>

五、for of循环

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>for of循环</title>

 </head>

 <body>

   <script>

      var input=parseInt(prompt("请按键:"));

      var array=new Array();

      array.push(input);

      for(var val of array){

      if(val==0){

       document.write("欢迎下次光临！");

       }else if(val==1){

       document.write("查询中...");

       break;

       }else if(val==2){

       document.write("取款中...");

       break;

       }else if(val==3){

       document.write("转账进行中...");

       break;

       }else{

       document.write("无效按键");

      }

      break;

      }

   </script>

 </body>

</html>

【温故知新】——原生js中常用的四种循环方式的更多相关文章

  1. iOS中常用的四种数据持久化方法简介

    iOS中常用的四种数据持久化方法简介 iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 ...

  2. js中this的四种使用方法

    0x00:js中this的四种调用模式 1,方法调用模式 2,函数调用模式 3,构造器调用模式 4,apply.call.bind调用模式 0x01:第一种:方法调用模式 (也就是用.调用的)this ...

  3. Vue中常用的几种传值方式

    Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...

  4. 原生 js基础常用的判断和循环

    原生 js基础常用的判断和循环 以下部分是个人实践及和搜集的资料: 最常用的if判断语句: if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 } 原生js的 ...

  5. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

  6. Java中常用的四种线程池

    在Java中使用线程池,可以用ThreadPoolExecutor的构造函数直接创建出线程池实例,如何使用参见之前的文章Java线程池构造参数详解.不过,在Executors类中,为我们提供了常用线程 ...

  7. Android中Activity的四种启动方式

    谈到Activity的启动方式必须要说的是数据结构中的栈.栈是一种只能从一端进入存储数据的线性表,它以先进后出的原则存储数据,先进入的数据压入栈底,后进入的数据在栈顶.需要读取数据的时候就需要从顶部开 ...

  8. Spring中bean的四种注入方式

    一.前言   最近在复习Spring的相关内容,这篇博客就来记录一下Spring为bean的属性注入值的四种方式.这篇博客主要讲解在xml文件中,如何为bean的属性注入值,最后也会简单提一下使用注解 ...

  9. 读书笔记——spring cloud 中 HystrixCommand的四种执行方式简述

    读了<Spring Cloud 微服务实战>第151-154页, 总结如下: Hystrix存在两种Command,一种是HystrixCommand,另一种是HystrixObserva ...

随机推荐

  1. Hadoop架构的初略总结（2）

    Hadoop架构的初略总结(2) 回顾一下前文,我们总结了以下几个方面.我们为什么需要Hadoop:Hadoop2.0生态系统的构成:Hadoop1.0中HDFS和MapReduce的结构模型. 我们 ...

  2. poj3748 位运算 bitset

    位操作 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9064   Accepted: 3626 Description 假 ...

  3. 201621123034 《Java程序设计》第3周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联系.步骤如下: 1.1 写出你 ...

  4. HDU 5687 Problem C（Trie+坑）

    Problem C Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Tota ...

  5. [TC_SRM_460]TheCitiesAndRoadsDivOne

    [TC_SRM_460]TheCitiesAndRoadsDivOne 试题描述 John and Brus have become very famous people all over the w ...

  6. 糗事百科python爬虫

    # -*- coding: utf-8 -*- #coding=utf-8 import urllib import urllib2 import re import thread import ti ...

  7. 微信小程序统一服务消息下发接口 公众号和小程序消息都可以在一个接口推送了

    昨天晚上,2018年9月11日,微信官方又更新了一大波的小程序功能.重点我们来谈谈这个功能,微信叫做统一服务消息下发接口. 这个是官方的文档  统一服务消息 · 小程序https://develope ...

  8. 为图片添加文字 canvas

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. java网络编程（三）：一个类似QQ的聊天程序

    客户端: package QQ; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import ...

  10. [LeetCode] Search Insert Position 二分搜索

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...