整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端入门教程之 JS 「switch」语句 javascript学习

witch 语句可以替代多个 if 判断。

switch 语句为多分支选择的情况提供了一个更具描述性的方式。

语法

switch 语句有至少一个 case 代码块和一个可选的 default 代码块。

就像这样:

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}
  • 比较 x 值与第一个 case(也就是 value1)是否严格相等,然后比较第二个 case(value2)以此类推。
  • 如果相等,switch 语句就执行相应 case 下的代码块,直到遇到最靠近的 break 语句(或者直到 switch 语句末尾)。
  • 如果没有符合的 case,则执行 default 代码块(如果 default 存在)。

举个例子

switch 的例子(高亮的部分是执行的 case 部分):

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
    break;
  case 4:
    alert( 'Exactly!' );
    break;
  case 5:
    alert( 'Too big' );
    break;
  default:
    alert( "I don't know such values" );
}

这里的 switch 从第一个 case 分支开始将 a 的值与 case 后的值进行比较,第一个 case 后的值为 3 匹配失败。

然后比较 4。匹配,所以从 case 4 开始执行直到遇到最近的 break。

如果没有 break,程序将不经过任何检查就会继续执行下一个 case。

无 break 的例子:

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
  case 4:
    alert( 'Exactly!' );
  case 5:
    alert( 'Too big' );
  default:
    alert( "I don't know such values" );
}

在上面的例子中我们会看到连续执行的三个 alert:

alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );

任何表达式都可以成为 switch/case 的参数

switch 和 case 都允许任意表达式。

比如:

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;

  default:
    alert("this doesn't run");
}

这里 +a 返回 1,这个值跟 case 中 b + 1 相比较,然后执行对应的代码。

“case” 分组

共享同一段代码的几个 case 分支可以被分为一组:

比如,如果我们想让 case 3 和 case 5 执行同样的代码:

let a = 3;

switch (a) {
  case 4:
    alert('Right!');
    break;

  case 3: // (*) 下面这两个 case 被分在一组
  case 5:
    alert('Wrong!');
    alert("Why don't you take a math class?");
    break;

  default:
    alert('The result is strange. Really.');
}

现在 3 和 5 都显示相同的信息。

switch/case 有通过 case 进行“分组”的能力,其实是 switch 语句没有 break 时的副作用。因为没有 break,case 3 会从 (*) 行执行到 case 5。

类型很关键

强调一下,这里的相等是严格相等。被比较的值必须是相同的类型才能进行匹配。

比如,我们来看下面的代码:

let arg = prompt("Enter a value?")
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );
    break;

  case '2':
    alert( 'Two' );
    break;

  case 3:
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' )
}
  1. 在 prompt 对话框输入 0、1,第一个 alert 弹出。
  2. 输入 2,第二个 alert 弹出。
  3. 但是输入 3,因为 prompt 的结果是字符串类型的 "3",不严格相等 === 于数字类型的 3,所以 case 3 不会执行!因此 case 3 部分是一段无效代码。所以会执行 default 分支。

任务

将 "switch" 结构重写为 "if" 结构

重要程度: 5

将下面 switch 结构的代码写成 if..else 结构:

switch (browser) {
  case 'Edge':
    alert( "You've got the Edge!" );
    break;

  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( 'Okay we support these browsers too' );
    break;

  default:
    alert( 'We hope that this page looks ok!' );
}

解决方案

将 "if" 结构重写为 "switch" 结构

重要程度: 4

用 switch 重写以下代码:

let a = +prompt('a?', '');

if (a == 0) {
  alert( 0 );
}
if (a == 1) {
  alert( 1 );
}

if (a == 2 || a == 3) {
  alert( '2,3' );
}

解决方案

前两个检查为前两个 case,第三个检查分为两种情况:

let a = +prompt('a?', '');

switch (a) {
  case 0:
    alert( 0 );
    break;

  case 1:
    alert( 1 );
    break;

  case 2:
  case 3:
    alert( '2,3' );
    break;
}

请注意:最后的 break 不是必须的。但是为了让代码可扩展我们要把它加上。

有可能之后我们想要再添加一个 case,例如 case 4。如果我们忘记在它之前添加一个 break,那么在 case 3 执行结束后可能会出现错误。所以这是一种自我保险。

者:HXGNMSL来源:CSDN原文:https://blog.csdn.net/HXGNMSL/article/details/89076476

Javascript的历史来源

94年网景公司 研发出世界上第一款浏览器。

95年 sun公司 java语言诞生

网景公司和sun合作。

Javascript ===> javascript

JavaScript和ECMAScript的关系

简单来说ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)

JavaScript的基本结构:

JavaScript的语法:

JavaScript的基础语法

变量的声明及使用

数据类型

运算符

逻辑控制语句

注释

语法规则

变量的声明语法:

var变量名;

例如:

Var num;

然后进行赋值:num = 10;也可以声明时直接赋值:

Var num =10;

在JavaScript中,提供了常用的基本数据类型:

undefined 未定义;

null 空;

string 字符串类型;

boolean 布尔类型;

number 数值类型;

运算符:

算数运算符:+、-、*、/、%、++、–;

比较运算符:>、<、> =、< =、==、!=;

逻辑运算符:&&、||、!;

赋值运算符:=;

逻辑控制语句:

JavaScript的逻辑控制语句也分为两类:条件结构和循环机构。

条件结构

条件机构分为if结构和switch结构:

If…else

Switch

循环结构

JavaScript的循环结构的执行顺序与Java类似,主要包括以下几种结构:

for循环

while循环

do…while循环

for…inx循环

示例:

for(var i=0;i<10;i++){

Document.write(“*”);

}

输出结果:**********

循环中断:

用于循环中断的语句有以下两种:

break.

continue.

与Java用法一样,break是跳出循环,continue是跳入下一次循环。

函数

函数有两种:一种是系统函数,一种是自定义函数

常用的系统函数包括:

parseInt():转换为整数。

parseFloat():转换为浮点型。

isNaN():判断非数字。

Eval():计算表达式值。

自定义函数:

自定义函数的语法

function 函数名(参数1,参数2,…){

…//语句

Return 返回值;//可选

}

函数的调用:

函数的调用方式有以下两种

事件名=函数名(传递的实参值),例如:

“函数名()”

直接使用函数名(传递的实参值),例如:

var recult = add(2,3);

匿名函数

匿名函数的语法

var sumFun=function(num1,num2){

return(nun1,num2);

} ;

在语法中:

var sunFun=function(num1,num2)表示声明一个变量等于某个函数体。

{…};是把整个函数体放在变量的后面,并把末尾添加一个分号。

匿名函数的调用:

由于匿名函数定义的整个语句,可以像赋值一样赋给一个变量进行保存,所以可以使用如下方式调用语法中的匿名函数:

var sum=sumFun(2,3)

BOM概述

使用BOM可以移动窗口,改变状态栏中的文本,执行其他与页面内容不直接相关的动作。它包含的对象主要有以下几种;

Window对象

Window对象是指整个窗口对象,可以通过操作Window对象的属性和方法控制窗口,例如,打开或关闭一个窗口。

History对象

浏览器访问过的历史页面对应History对象,通过History对象的属性和方法实现浏览器的前进或后退的功能。

Location对象

浏览器的地址栏对应Location对象,通过Location对象的属性和方法控制页面跳转。

Document对象

浏览器内的网页内容对应Document对象,通过Document对象的属性和方法,控制页面元素。

Window常用的属性有:

history:有关客户访问过的URL的信息。

location:有关当前URL的信息。

Screen: 有关客户端的屏幕和显示性能的信息。

Window对象常用的方法:

prompt():显示可提示用户输入的对话框。

alert():显示带有一段消息和一个人“确认”按钮的警告框。

confirm():显示带有一段消息以及“确认”按钮“取消”按钮的对话框。

close():关闭浏览器窗口。

open():打开一个新的浏览器窗口,加载给定URL所指定的文档。

setTimeout():用于在指定(以毫秒计)后调用函数或计算表达式。

setTneerval():按照指定的周期 (以毫秒计)数来调用函数或计算表达式。

Window对象常用窗口特征属性

height、width:窗口文档显示区的高度、宽度,以像素计。

left、top:窗口的x坐标y坐标,以像素计。

toolbar:yes|no|1|0:是否显示浏览器的工具栏,默认是yes。

scrollbars =yes|no|1|0:是否显示滚动条,默认是yes。

locationyes|no|1|0:是否显示地址栏,默认是yes。

status|no|1|0:是否添加地址栏,默认是yes。

menubar|no|1|0:是否显示菜单栏,默认是yes。

resizable|no|1|0:窗口是否可调节尺寸,默认是yes。

Window对象的常用事件:

onload:一个页面或一副图像完成加载。

onmouseover:鼠标指针移到某元素之上。

onclick:单击某个对象。

onkeydown:某个键盘按键被按下。

onchange:域的内容被改变。

History对象的方法:

back():加载History对象列表中的上一个URL。

forward():加载History对象列表中的下一个URL。

go():加载History对象列表中的某个具体URL。

Location对象的属性:

host:设置或返回主机名和当前URL的端口号。

hostname:设置或返回当前URL的主机名。

href:设置或返回完整的URL。

Location对象的方法:

reload():重新加载当前文档。

replace():用新的文档替换当前文档。

Document对象常用的属性:

referrer:返回载入当前文档的URL。

URL:返回当前文档的URL。

Document对象的常用方法:

getElementById():返回对拥有指定id的第一个对象的引用。

getElementsByName():返回带有指定名称的对象的集合。

getElementsByTagName():返回带有指定标签名的对象的集合。

write():向文档写文本、HTML表达式代码。

内置对象

系统的内置对象有Date对象、Array对象、String对象和Math对象等。

Date:用于操作日期和时间。

Array:用于在单独的变量名中储存一系列的值。

String:用于支持对字符串的处理。

Math:用于执行数学任务,包含了若干数字常量和函数。

Date对象:

1:创建日期对象

Date对象包含日期和时间两个信息,创建日期对象的基本语法有两种:

创建日期的基本语法1: var 日期实例化=new Date(参数);

创建日期的基本语法2: var 日期实例化=new Date();

Date对象的常用方法:

getDate():从Date对象返回一个月中的某一天,其值介于1到31之间。

getDay():从Date对象返回星期中的某一天,其值介于0到6之间。

getHours():返回Date对象的小时,其值介于0到23之间。

getMinutes():返回Date对象的分钟,其值介于0到59之间。

getSeconds():返回Date对象的秒数,其值介于0到59之间。

getMonth():返回Date对象的月份,其值介于0到11之间。

getFullYear():返回Date对象的年份,其值为4位数。

getTime():返回自某一时刻(2010年1月1日)以来的毫秒数。

DOM概述

什么是DOM

DOM是文档对象的缩写,和语言无关。它提供了访问、动态修改结构文档的接口,W3C制定了DOM规范,主流浏览器都支持。

使用Core DOM操作节点

访问节点:

使用getElement系列方法访问指定节点。

getElementById():返回对拥有指定id的第一个对象的引用。

getElementsByName():返回带有指定名称的对象的集合。

getElementsByTagName():返回带有指定标签名的对象的集合。

使用层次关系访问节点。

parenNode:返回节点的父节点。

firstChild:返回节点的首个节点。文本和属性节点没有父节点,会返回一个空数组,对于元素节点,若是没有子节点会返回null。

lastChild:返回节点的最后一个子节点,返回值同firstChild。

操作节点属性值

CoreDOM的标准方法包括以下两种:

getAttribute(“属性名”):获取属性值。

getAttribute(“属性名”,“属性值”):设置属性值

创建和增加节点:

创建节点

createElement(tagName):按照给定的标签名称创建一个新的元素节点

appendChild(nodeName):向以存在节点列表的末尾添加新的节点。

inserBefore(newNode,oldNode):向指定的节点之前插入一个新的子节点。

cloneNode(deep):复制某个指定的节点。

删除和替换节点

removeChild(node):删除指定的节点。

replaceChild(newNode,oldNode):用其他的节点替换指定的节点。

Table对象的属性和方法

属性:

rows[]:返回包含表格中所有行的一个数组。

rows[]用于返回表格中所有行的一个数组。

方法:

inserRow():在表格中插入一个新行。

deleteRow():从表格中删除一行。

数组

数组是具有相同数据类型的一个或多个值得集合

创建数组的语法:

var 数组名称=new Array(size);

数组的赋值的两种方式:

先声明在赋值

var province = new Array(4);

province[0]=“河北省”;

province[1]=“河南省”;

索引也可以使用标识(字符串),例如:

var province=new Array(4);

province[‘河北省’]=“河北省”;

province[‘河南省’]=“河南省”;

声明时同时初始化

var province=new Array(“河北省”,“河南省”,“湖北省”,“广东省”);

Array对象的常用属性和方法:

属性:

length:设置或返回数组中元素的数目。

方法:

join():把数组的所有元素放入一个字符串,通过一个分隔符进行分割。

sort():对数组的元素进行排序。

多程序都具有switch语句,用于作为菜单功能。当传入的参数的值等于菜单选项将会执行菜单选项中的内容,但是JavaScript语言具有特殊性有三等(===)和两等(==)两种情况,对于JavaScript来说switch使用的是三等呢,还是两等呢?我们以下面这段程序来进行阐述。

<!DOCTYPE html>
<html>
    <head>
        <title>简单的switch的使用</title>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            var a="1";
            var b=2;
            function foo(){
                
                switch(a){
                    case 1:{
                        console.log("number 1");
                        break;
                    }
                    case 2:{
                        console.log("number 2");
                        break;
                    }
                    case "1":{
                        console.log("string 1");
                        break;
                    }
                    case (function(){return "2"})():{
                        console.log("value is true");
                        break;
                    }
                    default:{
                        console.log("not match");
                        break;
                    }
                }
            }
            foo();
        </script>
    </body>
</html>

这段程序定义了一个变量其参数自为字符串型的'1',菜单选项中有数字型的选项1和2还有字符串型的参数“1”还有一个变量的表达式以及一个默认的参数选项。

直接运行这段程序输出的结果是string 1。

当修改a的值为字符串“2”时输出的结果为value is true。

由上述可以switch的菜单选项使用的是三等需要参数值和参数类型都相等才会执行菜单选项中的值,同时如果菜单选项为一个表达式如果表达式返回的结果和传入的选项的值相等将会执行表达式后面选项的程序。所以综上所述switch语句如果菜单语句是表达式如果表达式的值为真将会执行菜单语句中的内容,如果是参数值如果传入的值的值与菜单中的值是三等则会执行菜单语句中的内容。