原生js switch语句

一、我们在流判断的时候,我们大多数的情况我使用if  else 语句。但是对于一些大量的逻辑的判断的时候,我们不建议使用if elseif语句 这种语句的效率执行不高,因为他每个expression 都需要进行计算判断,而switch case语句,在效率上更比if语句更高

其原理他本身根据生成的静态表,通过索引进行匹配效率高于if语句。

执行流程:

switch (expression){

case value1:

statement

break

case value2:

statement

break

.......

default:

statement

}

首先执行switch内的expression,计算值,然后进行case进行判断。匹配到case,执行对应的statement  如果有break,则跳出switch语句,如果没有则执行剩下的case语句,最后执行default 内的语句。如果带有break的,当匹配执行完case的时候,不会执行default 语句。如果

没有匹配到case最后执行default语句。

需要注意:switch语句的case匹配是全等匹配。不存在类型转换这点不同于if语句。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <script type="text/javascript">
 8     var  date=new Date();
 9     switch(date.getDate()){
10         case 1:
11         alert(1);
12         case 2:
13         alert(2);
14         case 3:
15         alert(3);
16         case 4:
17         alert(4)
18         case 5:
19         alert(5)
20         default:
21         alert(‘default‘)
22     }
23 </script>
24 </body>
25 </html>

如上switch语句,如果没有break的语句。在执行完的匹配的执行语句的时候,还会执行default语句。

加上break则匹配到case语句之后,不会执行default语句。此时default语句相当于if中的else部分。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <script type="text/javascript">
 8     var  date=new Date();
 9     switch(date.getDate()){
10         case 1:
11         alert(1);
12         break;
13         case 2:
14         alert(2);
15         break;
16         case 3:
17         alert(3);
18         break;
19         case 4:
20         alert(4);
21         break;
22         case 5:
23         alert(5);
24         break;
25         default:
26         alert(‘default‘)
27     }
28 </script>
29 </body>
30 </html>

一般的情况下 我们会用switch做一些值 的判断,当然我们可以进行逻辑的判断

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <script type="text/javascript">
 8 var num=24;
 9 switch(true){
10     case num>24:
11     alert("大于24!");
12     break;
13     case num<24&&num>20:
14     alert("大约20,小于24!");
15     break;
16     case num===24:
17     alert("等于24");
18     break;
19     default:
20     alert("判断不了")
21 }
22 </script>
23 </body>
24 </html>

原文地址:https://www.cnblogs.com/evilliu/p/9745096.html

时间: 2024-11-05 18:44:45

原生js switch语句的相关文章

原生js witch语句

一.我们在流判断的时候,我们大多数的情况我使用if  else 语句.但是对于一些大量的逻辑的判断的时候,我们不建议使用if elseif语句 这种语句的效率执行不高,因为他每个expression 都需要进行计算判断,而switch case语句,在效率上更比if语句更高 其原理他本身根据生成的静态表,通过索引进行匹配效率高于if语句. 执行流程: switch (expression){ case value1: statement break case value2: statement

if...else if...else和switch语句的注意点,以及和js的if...else if...else的不同

java if...else if...else 语句 if 语句后面可以跟 elseif-else 语句,这种语句可以检测到多种可能的情况. 使用 if,else if,else 语句的时候,需要注意下面几点: if 语句至多有 1 个 else 语句,else 语句在所有的 elseif 语句之后. if 语句可以有若干个 elseif 语句,它们必须在 else 语句之前. 一旦其中一个 else if 语句检测为 true,其他的 else if 以及 else 语句都将跳过执行.(这点

原生JS实现简易转盘抽奖

我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述HTML与CSS,而JS基本每行都有注释,但这里CSS 也是起到了至关重要的一步,那就是控制背景色,以及结果的显示与隐藏,效果先给出,如下: 代码给出: <!DOCTYPE html> <html lang="zh"> <head> <meta ch

利用原生JS实现网页1920banner图滚动效果

内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920banner图的切换效果,并针对低分辨率电脑设备进行了适配,实现了JS代码与HTML代码的完全分离,符合w3c的标准使用规范,希望能给各位开发者朋友以帮助和参考.如发现有缺陷和不足,欢迎大家予以指正,如有更好的意见或解决方法,可在评论区交流互动.一下为代码内容: <!DOCTYPE html> <

原生JS写的ajax函数

参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax({}); 调用的方法参照JQuery的ajax,只是 不需要写$.ajax ,只需要写 ajax 就可以了. 代码如下: !function () { var jsonp_idx = 1; return ajax = function (url, options) { if (typeof url

JavaScript入门:005—JS基本语句

JS的基本语句如下.主要看看循环语句和选择语句.循环语句1.for循环 for(var i=1;i<100;i++){ //代码 } 2.do...while循环 var i = 0; do { i++; //代码 }while(i<100); 3.遍历 var array = new Array(); array[0] = "你懂的"; array[1] = "over"; array[2] = "呵呵"; array[3] = &

AJAX请求和跨域请求详解(原生JS、Jquery)

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python:2.7.11 web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

原生JS实现banner图的滚动与跳转

HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> <img src="../../img/14072415363339_0.jpg"><img src="../../img/14072415383924_0.jpg" id="img2" /><img src="..