原生js witch语句

一、我们在流判断的时候,我们大多数的情况我使用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/tyblwmbs/p/10909875.html

时间: 2024-10-15 08:47:46

原生js witch语句的相关文章

原生js switch语句

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

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

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

蓝鸥原生JS:js的历史及JavaScript的优缺点

蓝鸥原生JS:js的历史及JavaScript的优缺点 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 JS介绍 js的历史 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司. 由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言.你没看错,这哥们只用了1

蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 js的引入方式 在一对 script 标签中引入js代码 通过这种方式引入,可以把js代码和html代码写在同一个文件中,但是注意:最好把js代码写在body之后,文档的加载顺序是从上到下加载的,先把页面内容渲染出来,再加入用户交互,这样用户体验会大大加强. 示例代码: <html lang="en

原生js使用forEach()与jquery使用each遍历数组,return false 的区别

原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.each(a, function(index,val) { console.log('index='+index); if(index==2){ return false; } console.log('val='+val); }); 结果如下: 从运行的效果可以看出,return 相当于循环中的br

原生JS 表单提交验证器

一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部流行的框架,如bootstrap,由于我负责的模块 仅仅是其中的一部分,因此少数服从多数,无奈只能抛弃bootstrap等提供的布局,样式以及验证等一些列如此方便的组件,(他们拒绝使用的原因也令人发省). 那么问题就来了. 二.设计理念 我们都知道,在抛开外部框架,仅仅用JS+css+html 去开发一个页面,是很复杂的,尤其是在没有美工,前台的情况下.其实bootstrap 在一定程度上

原生js简单轮播图 代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

原生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> <