JavaScript前端开发案例教程-第2章 JavaScript基本语法

第2章JavaScript基本语法《JavaScript前端开发案例教程（第2版）》学习目标/Target了解什么是变量，能够说出变量的概念掌握变量的命名规则，能够为变量命名掌握变量的声明与赋值，能够声明变量并为其赋值

熟悉数据类型的分类，能够说出JavaScript中有哪些数据类型掌握常用的基本数据类型，能够根据实际需求声明基本数据类型的变量学习目标/Target掌握数据类型检测，能够检测变量的数据类型是否符合预期掌握数据类型转换，能够根据实际需求进行数据类型转换

掌握表达式的使用，能够根据具体需求使用表达式

掌握运算符的使用，能够使用运算符完成运算

熟悉运算符的优先级，能够区分表达式中运算符的优先级学习目标/Target

掌握选择结构语句，能够根据需求选择合适的选择结构语句

掌握循环结构语句，能够根据需求选择合适的循环结构语句

掌握跳转语句，能够实现程序中的流程跳转掌握循环嵌套，能够根据程序需要使用循环嵌套语句章节概述/Summary学习任何一门语言，都需要掌握这门语言的基本语法，JavaScript语言也不例外。只有掌握了JavaScript的基本语法，才能游刃有余地学习后续内容。本章将针对JavaScript的变量、数据类型、表达式、运算符以及流程控制等基本语法进行详细讲解。目录/Contents010203变量数据类型表达式目录/Contents040506运算符流程控制动手实践：输出“金字塔”变量2.1

先定一个小目标！了解什么是变量，能够说出变量的概念2.1.1什么是变量2.1.1什么是变量变量是程序在内存中申请的一块用来存放数据的空间。变量由变量名和变量值组成，通过变量名可以访问变量的值。2.1.1什么是变量我们可以把内存想象成一家酒店，变量相当于酒店中的房间，变量名相当于房间号，变量值相当于房间的入住人。

变量名：room1变量值：小明变量名：room2变量值：小强

先定一个小目标！掌握变量的命名规则，能够正确为变量命名2.1.2变量的命名规则2.1.2变量的命名规则在对变量命名时，应遵循变量的命名规则，从而避免代码出错。变量的命名规则不能以数字开头，且不能含有+、-等运算符，如56name、56-name就是非法变量名。严格区分大小写，如it与IT是两个不同的变量名。不能使用JavaScript中的关键字命名。关键字是JavaScript语言中被事先定义好并赋予特殊含义的单词，如var就是一个关键字。2.1.2变量的命名规则为了提高代码的可读性，在对变量命名时应遵循以下建议。变量的命名建议使用字母、数字、下画线和美元符号（$）来命名，如str、arr3、get_name、$a。尽量要做到“见其名知其义”，如price表示价格，age表示年龄等。采用驼峰命名法，第1个单词首字母小写，后面的单词首字母大写，如myBooks。2.1.2变量的命名规则下面列举的变量名中，哪些是合法的呢？number88shoutmyScore&numvarit123$tuition2.1.2变量的命名规则揭晓答案number88shoutmyScore&numvarit123$tuition多学一招：常见的关键字breakcasecatchclassconstcontinuedebuggerdefaultdeletedoelseexportextendsfinallyforfunctionifimportininstanceofnewreturnreadAsDataURL()superswitchthisthrowtrytypeofvarvoidwhilewithyieldenumlet2.1.2变量的命名规则implementspackagepublicinterfaceprivatestaticprotected—ECMAScript规范还预留了一些关键字，称为未来保留关键字，目前没有特殊的功能，但是在未来的某个时间可能会加上功能。2.1.2变量的命名规则多学一招：常见的关键字

先定一个小目标！掌握变量的声明与赋值，能够声明变量并为其赋值2.1.3变量的声明与赋值2.1.3变量的声明与赋值JavaScript中变量通常使用var关键字声明。变量声明完成后，默认值会被设定为undefined，表示未定义。变量声明与赋值的方式先声明后赋值声明的同时并赋值2.1.3变量的声明与赋值变量先声明后赋值的示例代码如下。//声明变量varmyName;varage,sex;//为变量赋值myName='小明';age=18; sex='男';

2.1.3变量的声明与赋值使用console.log()方法即可在控制台查看变量的值，示例代码如下。console.log(myName);console.log(age);console.log(sex);

2.1.3变量的声明与赋值声明变量的同时为变量赋值的过程称为定义变量或初始化变量，示例代码如下。varmyName='小明';

JavaScript的语法比较松散，在函数外对一个未声明的变量赋值时，可以省略var关键字，但实际开发中不推荐这么做。Tip

先定一个小目标！掌握交换两个变量的值案例的开发，能够通过设置中间变量实现交换两个变量的值2.1.4【案例】交换两个变量的值2.1.4【案例】交换两个变量的值案例需求假设我们在一家西餐厅用餐，我们左手拿着西餐刀，右手握着西餐叉，但是西餐的礼仪是左手握西餐叉，右手拿西餐刀，因此我们需要将左右手的西餐工具交换。本案例将实现交换左右手的西餐工具。2.1.4【案例】交换两个变量的值案例的实现思路：将左手、右手和餐桌看作3个变量，把左手看作变量leftHand，变量值为西餐刀；把右手看作变量rightHand，变量值为西餐叉；把餐桌看作变量temp，用来临时存储数据。数据类型2.22.2数据类型通过2.1节的学习可知，变量是存储数据的容器，变量可以保存各种各样的数据，例如字符串、数字等。这些数据在计算机中需要分类型存储，例如将一串字符存为字符串型数据，将数字存为数字型数据等。

先定一个小目标！熟悉数据类型分类，能够说出JavaScript中有哪些数据类型2.2.1数据类型分类JavaScript将数据类型分为两大类，分别是基本数据类型（或称为值类型）和复杂数据类型（或称为引用类型）。2.2.1数据类型分类

先定一个小目标！掌握常用的基本数据类型，能够根据实际需求声明基本数据类型的变量2.2.2常用的基本数据类型JavaScript中常用的基本数据类型未定义型空型字符串型布尔型数字型2.2.2常用的基本数据类型布尔型的应用场景：用程序表示一件事成功或者失败，或表示一个条件成立或不成立。JavaScript中布尔型数据用于逻辑判断，它有两个取值：truefalse2.2.2常用的基本数据类型声明变量并赋值布尔型数据的示例代码如下。varflag1=true;varflag2=false;JavaScript中严格区分大小写，因此true和false值只有全部为小写时才表示布尔型。注意2.2.2常用的基本数据类型2.2.2常用的基本数据类型JavaScript中的数字可以分为整数和浮点数（可以表示小数），它们同属于数字型，在数字前面还可以添加“-”符号表示负数，添加“+”符号表示正数（通常情况下省略“+”）。在JavaScript中使用整数时，一般情况下使用十进制表示，除此之外还可以使用八进制或十六进制表示。声明3个变量，分别赋值为八进制、十进制、十六进制的整数，示例代码如下。varoct=032; //八进制表示的26vardec=26; //十进制数表示的26varhex=0x1a; //十六进制数表示的262.2.2常用的基本数据类型浮点数的两种表示方式如下。标准格式：数学中小数的写法。科学记数法：将数字表示成一个数与10的n次幂相乘的形式，程序中使用E（或e）后面跟一个数字的方式表示10的n次幂。2.2.2常用的基本数据类型使用标准格式和科学记数法格式表示浮点数的示例代码如下。//标准格式varfnum1=-7.26;varfnum2=7.26;//科学记数法格式varfnum3=3.14E6; varfnum4=8.96E-3;2.2.2常用的基本数据类型使用数字型数据时，当前系统允许的最大值和最小值可通过如下代码查询。//最大值：1.7976931348623157e+308console.log(Number.MAX_VALUE); //最小值：5e-324 console.log(Number.MIN_VALUE); 2.2.2常用的基本数据类型字符串是指计算机中用于表示文本的一系列字符，在JavaScript中使用单引号（''）或双引号（""）来标注字符串。//单引号字符串varnum=''; //表示空字符串varslogan='知识'; //表示字符串'知识'//双引号字符串vartotal=""; //表示空字符串varstr="知识就是力量"; //表示字符串“知识就是力量”声明变量并赋值字符串的示例代码如下。2.2.2常用的基本数据类型字符串型的单、双引号可以嵌套使用。嵌套使用时有以下两种特殊情况需要使用“\”进行转义。在单引号中使用单引号在双引号中使用双引号2.2.2常用的基本数据类型单、双引号嵌套使用的示例代码如下。//单引号中包含双引号varcolor='"red"blue';

//字符串内容为"red"blue//双引号中包含单引号varfood="'pizza'bread"; //字符串内容为'pizza'bread//单引号中包含单引号varsay1='I\'m…'; //字符串内容为I'm...//双引号中包含双引号varsay2="\"Tom\"";

//字符串内容为"Tom"2.2.2常用的基本数据类型JavaScript中常用的转义字符：转义字符含义\'一个单引号字符\''一个双引号字符\n换行符\t水平制表符\f换页符\b退格符\xhh由两位十六进制数字hh表示的ISO-8859-1字符。如“\x61”表示“a”\v垂直制表符\rreadAsDataURL()回车符\\反斜线“\”\0空字符\uhhhh由4位十六进制数字hhhh表示的Unicode字符。如“\u597d”表示“好”2.2.2常用的基本数据类型空型只有一个特殊的null值，表示变量未指向任何对象。声明变量并赋值为null的示例代码如下。vara=null;console.log(a); //输出结果：nullJavaScript语法对大小写敏感，因此变量的值只有是小写的null时才表示空型。注意2.2.2常用的基本数据类型未定义型只有一个特殊的值undefined，表示声明的变量还未被赋值。vara;console.log(a); //输出结果：undefined声明变量并赋值为未定义型的示例代码如下。2.2.2常用的基本数据类型数字型有以下3个特殊值。Infinity（无穷大）-Infinity（无穷小）NaN（NotaNumber，非数字）2.2.2常用的基本数据类型多学一招：数字型中的特殊值获取特殊值的示例代码如下。console.log(Number.MAX_VALUE*2); //输出结果：Infinityconsole.log(Number.MIN_VALUE*2); //输出结果：-Infinityconsole.log('aaa'-2); //输出结果：NaN多学一招：数字型中的特殊值2.2.2常用的基本数据类型如果想要判断一个变量的值是否为数字，可以使用isNaN()进行判断，返回结果为布尔值，true表示变量的值不是数字，false表示变量的值是数字，示例代码如下。console.log(isNaN2(2));

//输出结果：falseconsole.log(isNaN('aaa'));

//输出结果：true多学一招：数字型中的特殊值2.2.2常用的基本数据类型

先定一个小目标！掌握数据类型检测，能够检测变量的数据类型是否符合预期2.2.3数据类型检测在进行数学计算的时候，只有当要进行计算的值是数字型数据时才可以进行计算，如何判断要进行计算的值是否为数字型呢？2.2.3数据类型检测当不确定一个变量或值是什么类型的数据时，可以利用typeof操作符进行数据类型检测。typeof操作符以字符串形式返回检测结果。typeof操作符的语法格式如下。//语法格式1typeof需要类型检测的数据//语法格式2typeof(需要类型检测的数据)2.2.3数据类型检测

先定一个小目标！掌握数据类型转换，能够根据实际需求进行数据类型转换2.2.4数据类型转换当参与计算的两个数据的数据类型不同时，如何转换成相同的数据类型呢？2.2.4数据类型转换数据类型转换指的是将一种数据类型转换为另一种数据类型。将数据转换为布尔型数据将数据转换为数字型数据将数据转换为字符串型数据常用的数据类型转换2.2.4数据类型转换在进行数据的比较、条件的判断时，经常需要将数据转换为布尔型数据，使用Boolean()可以将给定数据转换为布尔型数据，转换时，代表空或者否定的值（如空字符串、数字0、NaN、null和undefined）会被转换为false，其余的值会被转换为true。2.2.4数据类型转换将数据转换为布尔型的示例代码如下。console.log(Boolean('')); //输出结果：falseconsole.log(Boolean(0)); //输出结果：falseconsole.log(Boolean(NaN)); //输出结果：falseconsole.log(Boolean(null)); //输出结果：falseconsole.log(Boolean(undefined)); //输出结果：falseconsole.log(Boolean(2)); //输出结果：trueconsole.log(Boolean('2')); //输出结果：true2.2.4数据类型转换JavaScript中提供了以下3种方法可以实现将数据转换为数字型数据。parseInt()parseFloat()Number()2.2.4数据类型转换不同类型数据转数字型数据的结果：待转数据parseInt()转换结果parseFloat()转换结果Number()转换结果纯数字字符串对应的数字对应的数字对应的数字空字符串NaNNaN0nullNaNNaN0undefinedNaNNaNNaNfalseNaNNaN0trueNaNNaN12.2.4数据类型转换不同类型数据转数字型的注意事项在转换纯数字字符串时会忽略前导零。利用parseInt()、parseFloat()和Number()进行数据类型转换时，若数据开头有正号“+”或负号“-”，会被当成正数或者负数。使用parseInt()或parseFloat()将字符串转换为数字型数据时，若字符串开头部分可被识别为数字，则转换为相应的数字；若字符串末尾部分有非数字字符，则这些非数字字符会被自动忽略；若字符串开头部分无法被识别为数字，则转换为NaN。2.2.4数据类型转换parseInt()会直接省略数据的小数部分，返回数据的整数部分，使用parseInt()将数据转换为数字型的示例代码如下。console.log(parseInt('123.1')); //输出结果：123忽略2.2.4数据类型转换parseInt()会自动识别进制，例如将“0xF”

转换为整数，parseInt()会自动检测“0xF”为十六进制数，示例代码如下。console.log(parseInt('0xF')); //输出结果：15若“0xF”省略0x，parseInt()将无法自动识别，此时可以通过第2个参数设置进制数，进制数的取值为2~36。将“F”转换为整数的示例代码如下。console.log(parseInt('F')); //输出结果：NaNconsole.log(parseInt('F',16)); //输出结果：152.2.4数据类型转换parseFloat()会将数据转换为数字型中的浮点数。使用parseFloat()将数据转换为浮点数的示例代码如下。console.log(parseFloat('123.1')); //输出结果：123.1console.log(parseFloat('314e-2')); //输出结果：3.14314×10-22.2.4数据类型转换Number()用于将数据转换为数字型数据，示例代码如下。console.log(Number('123.1')); //输出结果：123.1console.log(Number('123.a')); //输出结果：NaN2.2.4数据类型转换JavaScript中提供了String()方法和toString()方法可以实现将数据转换为字符串型数据。String()：可以将任意类型转换为字符串型数据。toString()：只能将除null和undefined之外的数据转换为字符串型数据。可通过参数设置，将数字转换为指定进制的字符串。2.2.4数据类型转换将数据转换为字符串型的示例代码如下。varnum1=12,num2=26;console.log(String(num1)); //输出结果：12console.log(num1.toString()); //输出结果：12console.log(num2.toString(2)); //输出结果：110102.2.4数据类型转换表达式2.3

先定一个小目标！掌握表达式，能够根据具体需求使用表达式2.3表达式表达式是一组代码的集合，每个表达式的执行结果都是一个值。JavaScript中常见的表达式如下。基本表达式含有运算符的表达式赋值表达式2.3表达式基本的表达式是一个变量或值，它不再包含其他表达式。下面列举一些基本的表达式。a //表达式a（变量a）1.23 //表达式1.23'hello' //表达式'hello'true //表达式truefalse //表达式falsenull //表达式null2.3表达式在表达式中可以使用运算符来完成一些运算，表达式的值是使用运算符运算后的值。下面列举一些含有运算符的表达式。1+2 //表达式1+2a+b //表达式a+b'a'+'b' //表达式'a'+'b'2.3表达式我们可以将表达式的值赋给一个变量，这种表达式称为赋值表达式，赋值表达式的值是被赋值的变量的值，赋值表达式的示例代码如下。vara; //声明变量a=1+2; //将表达式“1+2”的值“3”赋值给变量aconsole.log(a=1+2); //输出结果：32.3表达式运算符2.4JavaScript提供了多种类型的运算符（也称为操作符），专门用于告诉程序执行特定运算或逻辑操作。算术运算符字符串运算符赋值运算符比较运算符逻辑运算符三元运算符位运算符2.4运算符

先定一个小目标！掌握算术运算符，能够根据实际需求选择合适的算术运算符2.4.1算术运算符算术运算符用于对变量或数字进行算术运算。运算符运算示例结果+加5+510-减6-42*乘3*412/除3/21.5%取模（取余）5%75**幂运算3**29++自增（前置）a=2;b=++a;a=3;b=3;++自增（后置）a=2;b=a++;a=3;b=2;--自减（前置）a=2;b=--a;a=1;b=1;--自减（后置）a=2;b=a--;a=1;b=2;2.4.1算术运算符自增和自减运算符可以快速对变量的值进行递增或递减运算，自增和自减的分类如下。前置自增（自减）运算符：放在变量前面，返回计算后的结果。后置自增（自减）运算符：放在变量后面，返回计算前的结果。2.4.1算术运算符vara=1,b=1,c=2,d=2;//自增console.log(++a); //输出结果：2console.log(a); //输出结果：2console.log(b++); //输出结果：1console.log(b); //输出结果：2//自减console.log(--c); //输出结果：1console.log(c); //输出结果：1console.log(d--); //输出结果：2console.log(d); //输出结果：12.4.1算术运算符使用算术运算符的注意事项进行四则混合运算时，运算顺序要遵循数学中“先乘除后加减”的原则。在进行取模运算时，运算结果的正负取决于被模数（%左边的数）的正负，与模数（%右边的数）的正负无关。在开发中尽量避免利用小数进行运算，有时可能因JavaScript的精度导致结果的偏差。“+”和“-”在算术运算时还可以表示正数或负数。2.4.1算术运算符使用toFixed()方法可以规定浮点数的小数位数，该方法的语法格式如下。numObj.toFixed(digits)上述语法中，numobj表示数字型数据或变量；digits表示小数点后数字的个数，超过了该参数值会发生四舍五入，参数值介于0~20（包括20），如果忽略该参数，则默认为0。该方法的返回结果为字符串。多学一招：toFixed()方法2.4.1算术运算符多学一招：toFixed()方法下面演示toFixed()方法的使用，示例代码如下。varnum=1.235;console.log(num.toFixed()); //输出结果：1console.log(num.toFixed(1)); //输出结果：1.2console.log(num.toFixed(2)); //输出结果：1.242.4.1算术运算符多学一招：toFixed()方法使用toFixed()方法可以避免遇到浮点数精度偏差问题，示例代码如下。varnum=0.1+0.2;console.log(num); //输出结果：0.30000000000000004console.log(num.toFixed(2)); //输出结果：0.302.4.1算术运算符

先定一个小目标！掌握字符串运算符，能够实现字符串拼接2.4.2字符串运算符JavaScript中，加号“+”可以用于字符串拼接，示例代码如下。varname='小强';varsex='男';varstr=name+'：'+sex;//字符串拼接console.log(str);2.4.2字符串运算符显式转换与隐式转换的区别如下。显示转换：也称为强制类型转换，是手动进行的，例如Boolean()、parseInt()等都属于显示转换。隐式转换：自动发生，当操作的两个数据类型不同时，JavaScript会按照既定的规则来进行自动转换。多学一招：隐式转换2.4.2字符串运算符利用隐式转换实现数据类型转换的示例代码如下。//利用隐式转换将数据转换为数字型数据console.log('12'-0); //输出结果：12console.log('12'*1); //输出结果：12console.log('12'/1); //输出结果：12//利用隐式转换将数据转换为字符串型数据console.log(12+''); //输出结果：12console.log(true+''); //输出结果：trueconsole.log(null+''); //输出结果：nullconsole.log(undefined+''); //输出结果：undefined多学一招：隐式转换2.4.2字符串运算符

先定一个小目标！掌握根据用户输入的数据完成求和运算，能够利用运算符计算用户输入的两数之和2.4.3【案例】根据用户输入的数据完成求和运算案例需求：本案例将会实现提示用户输入两个数据，输入完成后对两个数据进行求和运算，在控制台输出求和的结果。2.4.3【案例】根据用户输入的数据完成求和运算案例的实现思路：声明两个变量，用于接收用户输入的数据。将用户输入的数据转换为数字型数据。为了避免JavaScript的精度问题，将结果保留两位小数。2.4.3【案例】根据用户输入的数据完成求和运算

先定一个小目标！掌握赋值运算符，能够使用赋值运算符为变量赋值2.4.4赋值运算符赋值运算符用于将运算符右边的值赋给左边的变量。运算符运算示例结果=赋值a=3,b=2;a=3;b=2;+=加并赋值a=3,b=2;a+=b；a=5;b=2;字符串拼接并赋值a='abc';a+='def';a='abcdef';-=减并赋值a=3,b=2;a-=b；a=1;b=2;*=乘并赋值a=3,b=2;a*=b；a=6;b=2;/=除并赋值a=3,b=2;a/=b；a=1.5;b=2;%=模并赋值a=3,b=2;a%=b；a=1;b=2;2.4.4赋值运算符赋值运算符用于将运算符右边的值赋给左边的变量。运算符运算示例结果**=幂运算并赋值a=3;a**=2;a=9<<=左移位并赋值a=9,b=2;a<<=b;a=36;b=2;>>=右移位并赋值a=-9,b=2;a>>=b;a=-3;b=2;>>>=无符号右移位并赋值a=-9,b=2;a>>>=b;a=1073741821;b=2;&=按位与并赋值a=3,b=9;a&=b;a=1;b=9;^=按位异或并赋值a=3,b=9;a^=b;a=10;b=9;|=按位或并赋值a=3,b=9;a|=b;a=11;b=9;2.4.4赋值运算符演示赋值运算符的使用。vara=3;a+=2; //相当于a=a+2console.log(a); //输出结果：5a-=2; //相当于a=a-2console.log(a); //输出结果：3a*=2; //相当于a=a*2console.log(a);

//输出结果：6a/=2; //相当于a=a/2console.log(a);

//输出结果：3a%=2; //相当于a=a%2console.log(a);

//输出结果：1a**=2; //相当于a=a**2console.log(a); //输出结果：12.4.4赋值运算符特殊情况：当“+=”运算符左右两边同为字符串类型或有一边为字符串类型数据时，将进行字符串拼接并赋值。vara='小明';a+=18;console.log(a);//输出结果：小明182.4.4赋值运算符

先定一个小目标！掌握比较运算符，能够使用比较运算符对两个数据进行比较2.4.5比较运算符比较运算符用于对两个数据进行比较，比较结果是布尔值true或false。运算符运算示例结果>

大于5>4true<

小于5<4false>=大于或等于5>=4true<=小于或等于5<=4false==等于5==4false!=不等于5!=4true===全等5===5true!==不全等5!==5false2.4.5比较运算符==、!=和===、!==的区别==、!=在比较不相同类型的数据时，首先会自动将要进行比较的数据转换成相同的数据类型，然后再进行比较。===、!==在比较不相同类型的数据时，不会进行数据类型的转换。2.4.5比较运算符console.log(12>=12);

//输出结果：trueconsole.log(12=='12');

//输出结果：trueconsole.log(12==='12');//输出结果：false

先定一个小目标！掌握逻辑运算符，能够使用逻辑运算符进行逻辑判断2.4.6逻辑运算符逻辑运算符用于条件判断，下面列举一些JavaScript中常用的逻辑运算符。运算符运算示例结果&&与a&&b如果a的值为true，则输出b的值；如果a的值为false，则输出a的值||或a||b如果a的值为true，则输出a的值；如果a的值为false，则输出b的值!非!a若a为true，结果为false，否则相反2.4.6逻辑运算符演示逻辑运算符的使用。//逻辑“与”

console.log(123&&456); //输出结果：456console.log(0&&456); //输出结果：0console.log(2>1&&3>1); //输出结果：trueconsole.log(2<1&&3>1); //输出结果：false//逻辑“或”console.log(123||456); //输出结果：123console.log(0||456); //输出结果：456console.log(2>1||3<1); //输出结果：trueconsole.log(2<1||3<1); //输出结果：false//逻辑“非”console.log(!(2>1)); //输出结果：falseconsole.log(!(2<1)); //输出结果：true2.4.6逻辑运算符如果通过左表达式能够确定最终值时，则不运算右表达式的值，此时称为短路。短路效果的示例代码如下。varnum=1;false&&num++; //&&短路情况console.log(num); //输出结果：1true||num++; //||短路情况console.log(num); //输出结果：12.4.6逻辑运算符

先定一个小目标！掌握三元运算符，能够使用三元运算符实现条件判断2.4.7三元运算符条件表达式?表达式1:表达式2三元运算符也称为三元表达式，使用问号“?”和冒号“:”两个符号来连接，根据条件表达式的值来决定问号后面的表达式和冒号后面的表达式哪个被执行。其语法格式如下。如果条件表达式的值为true，则返回表达式1的执行结果。如果条件表达式的值为false，则返回表达式2的执行结果。2.4.7三元运算符varage=15;varstatus=age>=18?'已成年':'未成年';console.log(status); //输出结果：未成年下面演示三元运算符的使用。声明变量age并赋值，判断变量age的值是否大于等于18，如果大于等于18，则输出“已成年”，否则输出“未成年”，示例代码如下。2.4.7三元运算符

先定一个小目标！掌握位运算符，能够使用位运算符进行二进制运算2.4.8位运算符位运算符用来对数据进行二进制运算，在运算时，位运算符会将参与运算的操作数视为由二进制数（0和1）组成的32位的串。运算符名称示例&按位“与”将操作数进行按位“与”运算，如果两个二进制位都是1，则该位的运算结果为1，否则为0|按位“或”将操作数进行按位“或”运算，只要二进制位上有一个值是1，则该位的运算结果为1，否则为0~按位“非”将操作数进行按位“非”运算，如果二进制位为0，按位“非”的结果为1，如果二进制位为1，按位“非”的结果为0^按位“异或”将操作数进行按位“异或”运算，如果二进制位相同，则按位“异或”的结果为0，否则为12.4.8位运算符位运算符用来对数据进行二进制运算，在运算时，位运算符会将参与运算的操作数视为由二进制数（0和1）组成的32位的串。运算符名称示例<<

左移将操作数的二进制位按照指定位数向左移动，运算时，右边的空位补0，左边移走的部分舍去>>

右移将操作数的二进制位按照指定位数向右移动，运算时，左边的空位根据原数的符号位补0或者1，原来是负数就补1，是正数就补0>>>

无符号右移将操作数的二进制位按照指定位数向右移动，不考虑原数的正负，运算时，左边的空位补02.4.8位运算符使用“15&9”将15与9进行按位“与”运算，具体演算过程如下。00000000000000000000000000001111&00000000000000000000000000001001—————————————————————————00000000000000000000000000001001运算结果为1001，对应十进制的数字为9。2.4.8位运算符使用“15|9”将15与9进行按位“或”运算，具体演算过程如下。00000000000000000000000000001111|00000000000000000000000000001001—————————————————————————00000000000000000000000000001111运算结果为1111，对应十进制的数字为15。2.4.8位运算符使用“~15”对15进行按位“非”运算，具体演算过程如下。~00000000000000000000000000001111—————————————————————————11111111111111111111111111110000上述运算结果为补码，符号位（最左边的一位）是1表示负数，为了将其转换为十进制，我们需要计算其原码，最终根据原码可得出最终结果为-16。11111111111111111111111111110000补码11111111111111111111111111101111反码（补码减1）10000000000000000000000000010000原码（反码符号位不变，其他位取反）2.4.8位运算符使用“15^9”对15与9进行按位“异或”运算，具体演算过程如下。00000000000000000000000000001111^00000000000000000000000000001001—————————————————————————00000000000000000000000000000110运算结果为110，对应十进制的数字为6。2.4.8位运算符使用“9<<2”对9进行左移2位运算，具体演算过程如下。00000000000000000000000000001001<<2—————————————————————————00000000000000000000000000100100运算结果为100100，对应十进制的数字为36。2.4.8位运算符使用“9>>2”对9进行右移2位运算，具体演算过程如下。00000000000000000000000000001001>>2—————————————————————————00000000000000000000000000000010运算结果为10，对应十进制的数字为2。2.4.8位运算符使用“15>>>2”对15进行无符号右移2位运算，具体演算过程如下。00000000000000000000000000001111>>>2—————————————————————————00000000000000000000000000000011运算结果为11，对应十进制的数字为3。2.4.8位运算符

先定一个小目标！熟悉运算符优先级，能够区分表达式中运算符的优先级2.4.9运算符优先级JavaScript中运算符的优先级，表中由上至下递减，结合方向表示同级运算符执行顺序。结合方向运算符无()左.[]new（有参数，无结合性）右new（无参数）无++（后置）--（后置）右!~-（负数）+（正数）++（前置）

--（前置）

typeofvoiddelete右**左*/%左+-左<<>>>>>左<<=>>=ininstanceof2.4.9运算符优先级JavaScript中运算符的优先级，表中由上至下递减，结合方向表示同级运算符执行顺序。结合方向运算符左==!====!==左&左^左|左&&左||右?:右=+==*=/=%=<<=>>=>>>=&=^=|=左,2.4.9运算符优先级小括号小括号“()”是优先级最高运算符，运算时要先计算小括号内的表达式。当表达式中有多个小括号时，最内层小括号中的表达式优先级最高。当一个表达式中有多种运算符时，我们可以根据自己的需要为表达式添加小括号，这样可以使代码更清楚，并且可以避免错误的发生。2.4.9运算符优先级console.log(8+6*3); //输出结果：26console.log((8+6)*3); //输出结果：42

先定一个小目标！掌握计算圆的周长和面积案例的开发，能够利用运算符实现圆的周长和面积的计算2.4.10【案例】计算圆的周长和面积2.4.10【案例】计算圆的周长和面积案例需求：提示用户输入圆的半径，利用JavaScript中的运算符实现计算用户指定半径的周长和面积。案例页面效果如下。2.4.10【案例】计算圆的周长和面积案例的实现思路：声明1个变量，用于接收用户输入的半径。将用户输入的数据转换为数字型数据。声明两个变量，用于保存圆的周长和面积。流程控制2.5现实生活中，我们做一件事，从开始到结束需要经过一个流程，这个流程如何执行由我们自身来决定。一个程序的执行也有流程，很多时候我们需要通过控制程序中的流程来实现程序的功能，这就是流程控制。2.5流程控制实现流程控制的3种结构顺序结构选择结构循环结构2.5流程控制switch语句if语句if…elseif…else语句if…else语句选择结构语句选择结构语句指的是根据语句中的条件进行判断，进而执行与条件相对应的代码。选择结构语句也称为条件判断语句。2.5.1选择结构

先定一个小目标！掌握选择结构-if语句，能够使用if语句进行条件判断2.5.1选择结构if语句也称为单分支语句，当满足某种条件时，就进行某种处理，其语法如下。if(条件表达式){代码段}2.5.1选择结构使用if语句实现只有当年龄（age变量值）大于等于18周岁时，才输出“已成年”，否则无输出，示例代码如下。2.5.1选择结构varage=15; //声明变量age并赋值为15if(age>=18){console.log('已成年'); //在控制台输出“已成年”}

先定一个小目标！掌握选择结构-if…else语句，能够使用if…else语句进行条件判断2.5.1选择结构if…else语句也称为双分支语句，当满足某种条件时，就进行某种处理，否则进行另一种处理，具体语法格式如下，其语法如下。if(条件表达式){

代码段1}else{

代码段2}2.5.1选择结构2.5.1选择结构使用if…else语句实现当年龄（age变量值）大于等于18周岁时，输出“已成年”，否则输出“未成年”，示例代码如下。varage=15; //声明变量ageif(age>=18){console.log('已成年'); //当age>=18时在控制台输出“已成年”}else{console.log('未成年'); //当age<18时在控制台输出“未成年”}

先定一个小目标！掌握选择结构-if...elseif...else语句，能够使用if...elseif...else语句进行条件判断2.5.1选择结构if…elseif…else语句也称为多分支语句，所谓多分支语句指的是有多个条件的语句，它可针对不同情况进行不同的处理，其语法格式如下。if(条件表达式1){

代码段1}elseif(条件表达式2){

代码段2}...elseif(条件表达式n){

代码段n}else{

代码段n+1}2.5.1选择结构if…elseif…else语句的执行流程如下。2.5.1选择结构2.5.1选择结构使用if…elseif…else语句实现对一个学生的考试成绩按分数进行等级的划分：90~100分为优秀，80~90分为良好，70~80分为中等，60~70分为及格，分数小于60则为不及格。varscore=88;if(score>=90){console.log('优秀');}elseif(score>=80){console.log('良好');}elseif(score>=70){console.log('中等');}elseif(score>=60){console.log('及格');}else{console.log('不及格');}

先定一个小目标！掌握选择结构-switch语句，能够使用switch语句进行条件判断2.5.1选择结构switch语句也是多分支语句，相比if…elseif…else语句，switch语句可以使代码更加清晰简洁、便于阅读，其语法格式如下。switch(表达式){case值1:

代码段1;break;case值2

代码段2;break;...default:

代码段n;}2.5.1选择结构switch语句的执行流程如下。2.5.1选择结构2.5.1选择结构使用switch语句判断变量week的值，若week变量的值为1~6时输出“星期一”~“星期六”，为0时输出“星期日”，若没有与week变量的值相等的case值时输出“错误”。varweek=2;switch(week){case0:console.log('星期日');break;case1:console.log('星期一');break;case2:console.log('星期二');break;case3:console.log('星期三');

break;

case4:console.log('星期四');break;case5:console.log('星期五');break;case6:console.log('星期六');break;default:console.log('错误');};

先定一个小目标！掌握查询水果的价格案例的开发，能够利用switch语句实现根据用户的输入查询水果的价格2.5.2【案例】查询水果的价格2.5.2【案例】查询水果的价格案例需求：日常生活中，我们去水果店买水果，结账时售货员要查询所买水果的价格来计算总价，例如当售货员输入“苹果”时，查询苹果的价格，输入“桃子”时，查询桃子的价格。本案例将使用switch语句实现查询水果的价格。案例页面效果如下。2.5.2【案例】查询水果的价格案例的实现思路：声明变量，用于接收用户输入的水果名称。利用switch语句实现查询对应水果的价格。假设程序的需求是输出1~100之间的整数，我们要编写100次输出代码吗？2.5.3循环结构2.5.3循环结构循环结构是为了在程序中反复执行某个功能而设置的一种程序结构，它用来实现一段代码的重复执行。循环语句由循环体和循环的终止条件组成。循环体：一组被重复执行的语句。循环的终止条件：循环结束的条件。循环结构语句for语句while语句do…while语句循环语句循环语句2.5.3循环结构

先定一个小目标！掌握循环结构-for语句，能够使用for语句循环执行一段代码2.5.3循环结构for语句一般用于循环次数已知的情况下，其语法格式如下。for(初始化变量;条件表达式;操作表达式){

循环体}2.5.3循环结构利用for语句在控制台输出1~100的整数，示例代码如下。2.5.3循环结构for(vari=1;i<=100;i++){console.log(i); //输出1、2、3、4、5、6……100}执行“vari=1”初始化变量。判断“i<=100”是否为true，如果为true，则向下执行③，反之，结束循环。执行循环体，通过“console.log(i)”输出变量i的值。执行“i++”，将i的值加1。判断“i<=100”是否为true，和第②步相同。只要满足“i<=100”这个条件，就会一直循环。当i的值加到101时，判断结果为false，循环结束。

先定一个小目标！掌握循环结构-while语句，能够使用while语句循环执行一段代码2.5.3循环结构while语句和for语句都能够实现循环，语句也可以相互转换，但在不能够确定循环次数的情况下，更适合使用while语句实现循环。while语句语法格式如下。while(条件表达式){循环体}2.5.3循环结构若条件表达式永远为true，则会出现死循环，因此为了保证循环可以正常结束，应该保证条件表达式的值存在false的情况。Tip利用while语句在控制台输出1~100的整数，示例代码如下。2.5.3循环结构vari=1;while(i<=100){

console.log(i);

i++;}执行“vari=1”，初始化变量i；判断“i<=100”是否为true，如果为true，向下执行③，否则结束循环；执行循环体，通过“console.log(i)”输出变量i的值；执行“i++”，将i的值加1；判断“i<=100”是否为true，和第②步相