1 变量
1.1 标识符
程序开发中,经常需要自定义一些符号来标记一些名称,并赋予其特定的用途,如变量名、函数名等,这些符号都被称为标识符。
定义规则
- 由大小写字母(A-Z,a-z)、数字(0-9)、下划线(_)和美元符号($)组成。
- 不能以数字开头。
- 严格区分大小写。
- 不能使用 JavaScript 中的关键字命名。例如:var,for,while。
- 要尽量要做到“见其名知其意”。
- 标识符虽然以 unicode 编码表示,可以使用 utf-8 的所有内容,但是只推荐使用英文。
注意
- 当标识符中需要多个单词进行表示时,常见的表示方式有下划线法(匈牙利命名法)(如user_name)、驼峰法(小驼峰命名法)(如userName)和帕斯卡法(大驼峰命名法)(如UserName)。
- 下划线方式通常应用于变量的命名,驼峰法通常应用于函数名的命名等。
课堂练习:
判断以下标识符是否合法
it、It、t-o、t o、age66、_age、789lu、$name
1.2 保留关键字
- 保留关键字:是指在 JavaScript 语言中被事先定义好并赋予特殊含义的单词。
break | case | catch | class | const | continue |
---|---|---|---|---|---|
debugger | default | delete | do | else | export |
extends | false | finally | for | function | if |
import | in | instanceof | new | null | return |
super | switch | this | throw | try | true |
typeof | var | void | while | with | yield |
注:关键字不能作为变量名和函数名使用,否则会使 JavaScript 在载入过程中出现语法错误。
- 未来保留关键字:是指预留的,未来可能会成为保留关键字的单词。
abstract | arguments | await | byte | boolean | char |
---|---|---|---|---|---|
double | enum | eval | final | float | goto |
implements | int | interface | let | long | native |
package | private | protected | public | short | static |
synchronized | throws | transient | volatile |
注:标识符在定义时,建议不要用未来保留关键字,避免将来转换为关键字时出现错误。
1.3 变量作用
变量可以看作是存储数据的容器。(盛水的杯子,杯子指变量,杯中的水指保存在变量中的数据。)
语法
- JavaScript中变量通常利用 var 关键字声明,并且变量名的命名规则与标识符相同。
- 合法变量名(如number、_it123)、非法变量名(如88shout、&num)。
var sales;
var hits, hot, NEWS;
var room_101, room102;
var $name, $age;
- 未赋初始值的变量,默认值会被设定为 undefined。
- 行末的分号表示语句结束。
- 变量与变量之间的逗号(,)操作符,可实现一条语句同时完成多个变量的声明。
1.4 变量赋值
// 声明变量、为变量赋值
var unit, room;
unit = 3;
room = 1001;
// 声明变量的同时为变量赋值
var fname = 'Tom', age = 12;
// 省略var关键字,直接为变量赋值
flag = false;
a = 1, b = 2;
JavaScript 中变量虽然可以不事先声明,直接省略 var 关键字为变量赋值。但由于 JavaScript 采用的是动态编译,程序运行时不容易发现代码中的错误,所以推荐在使用变量前,要养成先声明的良好习惯。
1.5 定义常量
可以理解为在脚本运行过程中值始终不变的量。数学中的圆周率 π 就是一个常量,其值就是固定且不能被改变的。
特点:一旦被定义就不能被修改或重新定义。
语法:ES6 中新增了 const 关键字,用于实现常量的定义
常量命名规则:遵循标识符命名规则,习惯上常量名称总是使用大写字母表示。
常量的值:常量在赋值时可以是具体的数据,也可以是表达式的值或变量。
var r = 6;
const PI = 3.14;
const P = 2 * PI * r;
// 输出结果:P=37.68
console.log('P=' + P);
- 常量一旦被赋值就不能被改变。
- 常量在声明时必须为其指定某个值。
2 数据类型
在使用或赋值时根据设置的具体内容再确其对应的类型。但每一种计算机语言都有自己所支持的数据类型,JavaScript也不例外。
2.1 数据类型分类
- 基本数据类型(值类型)
- Boolean(布尔型)
- Number(数值型)
- String(字符型)
- Null(空型)
- Undefined(未定义型)
- 引用数据类型:Object(对象)
引用数据类型,将会在后面的章节详细介绍。
注:在 JavaScript 中,任何不是数值、字符串、布尔值、符号、null和undefined的值都是对象。
2.2 基本数据类型
2.2.1 布尔型
布尔型是 JavaScript 中较常用的数据类型之一,通常用于逻辑判断。
- true
- false
表示事物的“真”和“假”,严格遵循大小写,因此 true 和 false 值只有全部为小写时才表示布尔型。
2.2.2 数值型
JavaScript中的数值型并不区分整数和浮点数,所有数字都是数值型。
- 添加“- ”符号表示负数。
- 添加“+ ”符号表示正数(通常情况下省略“+”)。
- 设置为 NaN 表示非数值。
// 八进制数字序列范围:0~7
// 十六进制数字序列范围:0~9以及A~F
// 在JS中八进制前面加 0,十六进制前面加 0x
var oct = 032; // 八进制数表示的26
var dec = 26; // 十进制数26
var hex = 0x1a; // 十六进制数表示的26
var fnum1 = 7.26; // 标准格式
var fnum2 = -6.24; // 标准格式
var fnum3 = 3.14E6; // 科学计数法格式3.14*106
var fnum4 = 8.96E-3; // 科学计数法格式8.96*10-3
只要给定的值不超过 JavaScript 中允许数值指定的范围即可。
特殊值
- Infinity ,代表无穷大,大于任何数值
- -Infinity ,代表无穷小,小于任何数值
- NaN ,Not a Number,代表一个非数值
NaN 非数值
- NaN 是一个全局对象的属性,它的初始值就是 NaN。
- 与数值型中的特殊值 NaN 一样,都表示非数字(Not a Number)。
- 可用于表示某个数据是否属于数值型。
- NaN 没有一个确切的值,仅表示非数值型的一个范围。
- 例如,NaN 与 NaN 进行比较时,结果不一定为真(true),这是由于被操作的数据可能是布尔型、字符型、空型、未定义型和对象型中的任意一种类型。
2.2.3 字符型
字符型(String)是由Unicode字符、数字等组成的字符序列,这个字符序列我们一般将其称为字符串。
作用:表示文本的数据类型。
语法:程序中的字符型数据包含在单引号(')或双引号(")。
var slogan = 'Knowledge'; // 单引号,存放一个单词
var str = "the sky is blue."; // 双引号,存放一个句子
var color = '"red"blue'; // 单引号中包含双引号
var food = "'pizza'bread"; // 双引号中包含单引号
var num = '', total = ""; // 定义空字符串
- 由单引号定界的字符串中可以包含双引号。
- 由双引号定界的字符串中也可以包含单引号。
**如何在在单引号中使用单引号,或在双引号中使用双引号?**利用转义字符“\”进行转义。
var say1 = 'I\'m is ...'; // 在控制台的输出结果:I'm is ...
var say2 = "\"Tom\""; // 在控制台的输出结果:"Tom"
在字符串中使用换行、Tab等特殊符号时,也需要利用转义符“\”的转义。
特殊字符 | 含义 | 特殊字符 | 含义 |
---|---|---|---|
\' | 单引号 | \" | 双引号 |
\n | 回车换行 | \v | 跳格(Tab、水平) |
\t | Tab符号 | \r | 换行 |
\f | 换页 | \\ | 反斜杠(\) |
\b | 退格 | \0 | Null字节 |
\xhh | 由两位16进制数字hh表示的ISO-8859-1字符。如“\x61”表示“a” | \uhhhh | 由四位16进制数字hhhh表示的Unicode字符。如“\u597d”表示“好” |
2.2.4 空型
- 空型(Null)只有一个特殊的 null 值。
- 空型用于表示一个不存在的或无效的对象与地址。
- JavaScript 中大小写敏感,因此变量值只有是小写的 null 时才表示空型(Null)。
2.2.5 未定义型
- 未定义型(Undefined)也只有一个特殊的 undefined 值。
- 未定义型用于声明的变量还未被初始化时,变量的默认值为 undefined。
- 与 null 不同的是,undefined 表示没有为变量设置值,而 null 则表示变量(对象或地址)不存在或无效。
- 注意:null 和 undefined 与空字符串(‘’)和 0 都不相等。
2.3 数据类型检测
为什么需要数据类型检测,先看下面的示例。
var num1 = 12, num2 = '34', sum = 0; // 声明变量并赋值
sum = num1 + num2; // 变量进行相加运算
console.log(sum); // 输出结果:1234
请分析并说出变量 sum 的数据类型,以及为什么?
- 变量sum是字符型。
- 运算符“+”的操作数只要有一个是字符型,则它表示字符拼接。
- 参与运算的两个变量,num1 是数值型,num2 是字符型,因此最后的输出结果变量 sum 就是 num1 与 num2 进行拼接后的字符串。
所以,对参与运算的数据类型有要求时,需要进行数据类型检测。
JavaScript中对于数据类型的检测提供了以下两种方式:
typeof 操作符
typeof 操作符以字符串形式,返回未经计算的操作数的类型。
onsole.log(typeof num1); // 输出结果:number
console.log(typeof num2); // 输出结果:string
console.log(typeof sum); // 输出结果:string
在利用 typeof 检测 null 的类型时返回的是 object 而不是 null。
Object.prototype.toString.call()
由于 JavaScript 中一切皆对象,因此可利用 Object.prototype.toString.call() 对象原型的扩展函数更精确的区分数据类型。
var data = null; // 待判断的数据
var type = 'Null'; // 数据类型,开始字母要大写,如Boolean等
// 检测数据类型的表达式,若是指定的type型,则返回true,否则返回false
Object.prototype.toString.call(data) == '[object ' + type + ']';
Object.prototype.toString.call(data) 的返回值是一个形如“[object 数据类型]”的字符型结果。(可通过console.log() 观察返回值。)
2.4 数据类型转换
2.4.1 转布尔型
经常用于表达式和流程控制语句中,如数据的比较、条件的判断。
语法:Boolean() 函数。
注意:Boolean() 函数会将任何非空字符串和非零的数值转换为 true,将空字符串(‘’)、0、NaN、undefined 和 null 转换为false。
// 判断用户是否有内容输入。
var con = prompt();
if (Boolean(con)) {
document.write('已输入内容');
} else {
document.write('无输入内容');
}
对 Boolean(con) 分析:
- 用户单击“取消”按钮,则结果为 false
- 用户未输入,单点击“确定”按钮,则结果为 false
- 用户输入“哈哈”,单点击“确定”按钮,则结果为 true
2.4.2 转数值型
实际开发中在接收用户传递的数据进行运算时,为了保证参与运算的都是数值型,经常需要对其进行转换。
语法:Number() 函数、parseInt() 函数或 parseFloat() 函数。
// 根据用户的输入完成自动求和。
// 获取用户的输入,完成自动求和
var num1 = prompt('请输入求和的第1个数据:'); // 123
var num2 = prompt('请输入求和的第2个数据:'); // 456abc
console.log(num1 + num2); // 123456abc
console.log(parseInt(num1) + parseInt(num2)); // 579
转数值型的函数在使用时有一定的区别。
待转数据 | Number() | parseInt() | parseFloat() |
---|---|---|---|
纯数字字符串 | 转成对应的数字 | 转成对应的数字 | 转成对应的数字 |
空字符串 | 0 | NaN | NaN |
数字开头的字符串 | NaN | 转成开头的数字 | 转成开头的数字 |
非数字开头字符串 | NaN | NaN | NaN |
null | 0 | NaN | NaN |
undefined | NaN | NaN | NaN |
false | 0 | NaN | NaN |
true | 1 | NaN | NaN |
-
所有函数在转换纯数字时会忽略前导零,如“0123”字符串会被转换为123。
-
parseFloat() 函数会将数据转换为浮点数(可以理解为小数)。
-
parseInt() 函数会直接省略小数部分,返回数据的整数部分,并可通过第2个参数设置转换的进制数。
注意:在实际开发中还需要对转换后的结果是否是 NaN 进行判断,只有不是 NaN 时,才能够进行运算。此时可使用 isNaN() 函数来确定,当给定值为 undefined、NaN 和 {}(对象)时返回 true,否则返回 false。
2.4.3 转字符型
语法:String() 函数和 toString() 方法。
区别: String() 函数可以将任意类型转换为字符型;除了 null 和 undefined 没有 toString() 方法外,其他数据类型都可以完成字符的转换。
// 根据用户的输入完成自动求和。
var num1 = num2 = num3 = 4, num4 = 26;
console.log(String(12));
console.log(num1 + num2 + num3.toString());
console.log(num4.toString(2));
注意:toString() 方法在进行数据类型转换时,可通过参数设置,将数值转换为指定进制的字符串,例如num4.toString(2),表示首先将十进制26转为二进制11010,然后再转为字符型数据。
3 表达式
表达式可以是各种类型的数据、变量和运算符的集合。
最简单的表达式可以是一个变量。
var x, y, z; // 声明变量
x = 1; // 将表达式“1”的值赋给变量x
y = 2 + 3; // 将表达式“2 + 3”的值赋给变量y
z = y = x; // 将表达式“y = x”的值赋给变量z
console.log(z); // 将表达式“z”的值作为参数传给console.log()方法
console.log(x + y); // 将表达式“x + y”的值作为参数传给console.log()方法
4 运算符
所谓运算符就是专门用于告诉程序执行特定运算或逻辑操作的符号。
4.1 算术运算符
- 对数值类型的变量及常量进行算数运算。
- 也是最简单和最常用的运算符号。
运算符 | 运算 | 范例 | 结果 |
---|---|---|---|
+ | 加 | 5+5 | 10 |
- | 减 | 6-4 | 2 |
* | 乘 | 3*4 | 12 |
/ | 除 | 3/2 | 1.5 |
% | 求余 | 5%7 | 5 |
** | 幂运算 | 3**4 | 81 |
++ | 自增(前置) | 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; |
- 四则混合运算,遵循 “先乘除后加减”的原则。
- 取模运算结果的正负取决于被模数(%左边的数)的符号。
- 尽量避免利用小数进行运算,有时可能因 JavaScript 的精度导致结果的偏差。
- “+”和“-”在算术运算时还可以表示正数或负数。
- 运算符(++或–)放在操作数前面,先进行自增或自减运算,再进行其他运算。若运算符放在操作数后面,则先进行其他运算,再进行自增或自减运算。
- 运算符(++或–)在前,口诀:先自增,后返值;运算符(++或–)在后,先返原值,后自增。
- 递增和递减运算符仅对数值型和布尔型数据操作,会将布尔值 true 当做 1,false 当做 0。
- 除了加法运算外,其余运算符进行相应数学运算并且在遇到非number值时,会全部转换成number值后再进行运算操作,此特性可用于隐式number类型转换
- 正号和负号,两者能够进行相应的数学运算同时在遇到非number的值时会将其强制转换成number值再进行运算,此特性可用于隐式number类型转换
4.2 字符串运算符
JavaScript中,“+”操作的两个数据中只要有一个是字符型,则“+”就表示字符串运算符,用于返回两个数据拼接后的字符串。
口诀:数值相加,字符相连
var color = 'blue';
var str = 'The sky is '+color;
var tel = 110 + '120';
console.log(str); // 输出结果为:The sky is blue
console.log(tel); // 输出结果为:110120
console.log(typeof str, typeof tel); // 输出结果:string string
注意:利用字符串运算符“+”的特性,可以将布尔型、整型、浮点型或为 null 的数据,与空字符串进行拼接,就会完成字符型的自动转换。
4.3 赋值运算符
赋值运算符是一个二元运算符,即它有两个操作数。它将运算符右边的值赋给左边的变量。
运算符 | 运算 | 范例 | 结果 |
---|---|---|---|
= | 赋值 | a=3, b=2; | a=3;b=2; |
+= | 加并赋值 | a=3, b=2; a+=b; | a=5;b=2; |
-= | 减并赋值 | 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; |
+= | 连接并赋值 | a=‘abc’;a+=‘def’; | a=‘abcdef’; |
**= | 幂运算并赋值 | a=2; a**= 5; | a=32; |
<<= | 左移位赋值 | 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; |
注意:
- “=”是赋值运算符,而非数学意义上的相等的关系。
- 一条赋值语句可以对多个变量进行赋值。
- 赋值运算符的结合性为“从右向左”。
var a = b = c = 8;
// 将5赋值给变量c
// 再把变量c的值赋值给变量b
// 把变量b的值赋值变量a,表达式赋值完成
var num1 = 2;
num1 += 3;
// 等价于:
num1 = num1 + 3;
var num2 = '2';
num2 += 3;
// 等价于:
num2 = num2 + 3;
4.4 比较运算符
用来对两个数值或变量进行比较。其结果是布尔类型的 true 或 false。
运算符 | 运算 | 范例 | 结果 |
---|---|---|---|
== | 等于 | x == 4 | false |
!= | 不等于 | x != 4 | true |
=== | 全等 | x === 5 | true |
!== | 不全等 | x !== ‘5’ | true |
> | 大于 | x > 5 | false |
>= | 大于或等于 | x >= 5 | true |
< | 小于 | x < 5 | false |
<= | 小于或等于 | x <= 5 | true |
注意:
- 不相同类型的数据进行比较时,首先会自动将其转换成相同类型的数据后再进行比较。
- 运算符“==”和“!=”运算符在比较时,只比较值是否相等。
- 运算符“=”与“!”要比较数值和其数据类型是否相等。
不同类型数据比较,规律如下:
类型 | 类型 | 比较方式 | 说明 |
---|---|---|---|
对象型 | 对象型 | 比较是不是同一内存地址 | |
对象型 | 字符型 | 对象先转化为字符型,再进行比较。 | |
对象型 | 布尔型 | 两边都要先转为数值型,布尔类型false为0,true为1。对象类型先隐式调用toString方法,然后再调用Number() | alert([]==false); alert([]==0); alert([1]==1); alert([1]==true); alert([2]==true); |
对象型 | 数值型 | 对象类型先转为数值型,再进行比较。对象类型先隐式调用toString方法,然后再调用Number() | |
数值型 | 布尔型 | 布尔型先转化为数值型,布尔类型false为0,true为1,再进行比较。 | |
数值型 | 字符型 | 字符型先转化为数值型,再进行比较。 | |
布尔型 | 布尔型 | 两边都要先转化为数值型,再进行比较。 | |
null | undefined | true | |
null,undefined | 其他类型 | false | alert(nullfalse); alert(null0); alert(null==‘’); |
4.5 逻辑运算符
是在程序开发中用于逻辑判断的符号。其返回值类型是布尔类型。
运算符 | 运算 | 范例 | 结果 |
---|---|---|---|
&& | 与 | a && b | a和b都为true,结果为true,否则为false |
|| | 或 | a || b | a和b中至少有一个为true,则结果为true,否则为false |
! | 非 | ! a | 若a为false,结果为true,否则相反 |
- 逻辑运算符的结合性是从左到右。
- 当使用“&&”连接两个表达式时,如果左边表达式的值为 false,则右边的表达式不会执行,逻辑运算结果为false。(短路)
- 当使用“||”连接两个表达式时,如果左边表达式的值为 true,则右边的表达式不会执行,逻辑运算结果为true。(短路)
- 逻辑运算符可针对结果为布尔值的表达式进行运算。
- 非运算:两次取非会得到原值的布尔值,此特性可用于隐式布尔类型转换。
4.6 三元运算符
三元运算符是一种需要三个操作数的运算符,运算的结果根据给定条件决定。
语法:条件表达式 ? 表达式1 : 表达式2
- 先求条件表达式的值。
- 如果为true,则返回表达式1的执行结果。
- 如果条件表达式的值为false,则返回表达式2的执行结果。
4.7 位运算符(了解)
是针对二进制数的每一位进行运算的符号。它专门针对数字0和1进行操作。
运算符 | 运算 | 范例 | 结果 |
---|---|---|---|
& | 按位与 | a & b | a和b每一位进行“与”操作后的结果 |
| | 按位或 | a | b | a和b每一位进行“或”操作后的结果 |
~ | 按位非 | ~ a | a的每一位进行“非”操作后的结果 |
^ | 按位异或 | a ^ b | a和b每一位进行“异或”操作后的结果 |
<< | 左移 | a << b | 将a左移b位,右边用0填充 |
>> | 右移 | a >> b | 将a右移b位,丢弃被移出位,左边最高位用0或1填充 |
>>> | 无符号右移 | a >>>b | 将a右移b位,丢弃被移出位,左边最高位用0填充 |
JavaScript 中位运算符仅能对数值型的数据进行运算。在对数字进行位运算之前,程序会将所有的操作数转换成二进制数,然后再逐位运算。
JavaScript 中的数都是以4字节32位表示,一个字节8位。
有符号整数使用 31 位表示整数的数值,用第 32 位表示整数的符号,0 表示正数,1 表示负数。数值范围从 -2147483648 到 2147483647。
// 按位与
// 00000000 00000000 00000000 00001111 2^3+2^2+2^1+1=8+4+2+1=15
// & 00000000 00000000 00000000 00001001 2^3+1=9
// —————————————————————————------------
// 00000000 00000000 00000000 00001001 2^3+1=9
// 按位或
// 00000000 00000000 00000000 00001111
// | 00000000 00000000 00000000 00001001
// —————————————————————————------------
// 00000000 00000000 00000000 00001111
// 按位非
// 把运算数转换成 32 位数字
// 把二进制数转换成它的二进制反码
// 把二进制数转换成浮点数
// 实质上是对数字求负,然后减 1
// ~ 00000000 00000000 00000000 00001111
// —————————————————————————------------
// 11111111 11111111 11111111 11110000 -16
// 按位异或
// 不同为 1,相同为 0
// 00000000 00000000 00000000 00001111
// ^ 00000000 00000000 00000000 00001001
// —————————————————————————------------
// 00000000 00000000 00000000 00000110 2^2+2^1=6
// 左移
// 00000000 00000000 00000000 00001001 <<2
// —————————————————————————------------
// 00000000 00000000 00000000 00100100
// 右移
// 00000000 00000000 00000000 00001001 >>2
// —————————————————————————------------
// 00000000 00000000 00000000 00000010
// 无符号右移
// 00000000 00000000 00000000 00010011 >>>2
// —————————————————————————------------
// 00000000 00000000 00000000 00000100
4.8 运算符优先级
指的是在表达式中各个运算符参与运算的先后顺序(比如:先乘除,后加减)。
表中运算符的优先级由上至下递减。
结合方向 | 运算符 |
---|---|
无 | () |
左 | . [] new(有参数,无结合性) |
右 | new(无参数) |
无 | ++(后置) --(后置) |
右 | ! ~ -(负数) +(正数) ++(前置) --(前置) typeof void delete |
右 | ** |
左 | * / % |
左 | + - |
左 | << >> >>> |
左 | < <= > >= in instanceof |
左 | == != === !== |
左 | & |
左 | ^ |
左 | | |
左 | && |
左 | || |
右 | ?: |
右 | = += = *= /= %= <<= >>= >>>= &= ^= |= |
左 | , |
- 同一单元格的运算符具有相同的优先级。
- 左结合方向表示同级运算符的执行顺序为从左到右。
- 右结合方向则表示执行顺序为从右到左。
- 补充:圆括号()优先级别最高。例如, 4 + 3 * 2的 输出结果为10,(4 + 3) * 2的输出结果为14。
console.log( 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) // true
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); //false
var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); //true
var c = 2 === "2";
console.log(c); //false
var d = !c || b && a ;
console.log(d); //true
5 流程控制
5.1 选择结构
选择结构语句需要根据给出的条件进行判断来决定执行对应的代码。
5.1.1 if 单分支语句
if 条件判断语句也被称为单分支语句,当满足某种条件时,就进行某种处理。
// 只有年龄大于等于18周岁,才输出已成年,否则无输出。
// if ( 判断条件 ) {
// 代码段
// }
if(age >= 18){
console.log('已成年');
}
5.1.2 if…else 双分支语句
if…else 语句也称为双分支语句,当满足某种条件时,就进行某种处理,否则进行另一种处理。
// 判断一个学生的年龄,大于等于18岁则是成年人,否则是未成年人。
// if ( 判断条件 ) {
// 代码段1;
// } else {
// 代码段2;
// }
if (age >= 18) {
console.log('已成年');
} else {
console.log('未成年');
}
5.1.3 if…else if…else 多分支语句
if…else if…else 语句也称为多分支语句,可针对不同情况进行不同的处理。
// 对一个学生的考试成绩进行等级的划分,分数在90~100分为优秀,分数在80~90分为优秀为良好,分数在70~80分为中等,分数在60~70分为及格,分数小于60则为不及格。
// if (条件1) {
// 代码段1;
// } else if(条件2) {
// 代码段2;
// }
// ...
// else if(条件n) {
// 代码段n;
// } else {
// 代码段n+1;
// }
if (score >= 90) {
console.log('优秀');
} else if (score >= 80) {
console.log('良好');
} else if (score >= 70) {
console.log('中等');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
注意:“if…else if…else”语句在使用时,“else if”中间要有空格,否则程序会报语法错误。
5.1.4 switch 多分支语句
switch 语句也是多分支语句,功能与 if 系列条件语句相同,不同的是它只能针对某个表达式的值作出判断,从而决定执行哪一段代码。
特点:代码更加清晰简洁、便于阅读。
// 根据学生成绩 score 进行评比(满分为100分)。
// switch (表达式) {
// case 值1:代码段1; break;
// case 值2:代码段2; break;
// ...
// default: 代码段n;
// }
switch (parseInt(score / 10)) {
case 10:
case 9:
console.log('优');
break;
case 8:
console.log('良');
break;
case 7:
console.log('中');
break;
case 6:
console.log('及格');
break;
case 5:
case 4:
case 3:
case 2:
case 1:
default:
console.log('差');
}
5.2 循环结构
所谓循环语句就是可以实现一段代码的重复执行。
5.2.1 while 循环
while 循环语句是根据循环条件来判断是否重复执行一段代码。
// 连续输出1~100之间的数字
// while ( 循环条件 ) {
// 循环体
// ……
// }
var num = 1;
while (num <= 100) {
console.log(num);
num++;
}
注意:需要注意的是,若循环条件永远为 true 时,则会出现死循环,因此在开发中应根据实际需要,在循环体中设置循环出口,即循环结束的条件。
5.2.2 do…while 循环
do…while 循环语句的功能与 while 循环语句类似,唯一的区别在于,while 是先判断条件后执行循环体,而do…while 会无条件执行一次循环体后再判断条件。
// do {
// 循环体
// ……
// } while (循环条件);
var num = 100;
do {
console.log(num);
num--;
} while (num >= 1)
5.2.3 for 循环
for 循环语句是最常用的循环语句,它适合循环次数已知的情况。
var num = 1; // 初始化表达式
while (num <= 100) { // 循环条件
console.log(num); // 循环体
num++; // 操作表达式
}
// for (初始化表达式;循环条件;操作表达式)
for (var num = 1; num <= 100; num++) {
console.log(num);
}
for 关键字后面小括号“()”中包括了三部分内容:
- 初始化表达式
- 循环条件
- 操作表达式
它们之间用“;”分隔,{}中的执行语句为循环体。
注意:for 循环语句小括号“()”内的每个表达式都可以为空,但是必须保留分号分割符。当每个表达式都为空时,表示该for 循环语句的循环条件永远满足,会进入无限循环的状态,此时如果要结束无限循环,可在 for 语句循环体中用跳转语句进行控制。
let 关键字
- 在 ES6 中,可以通过 let 关键字声明一个块级作用域(可以理解为 {} 之间的代码)的本地变量。
- 它与 var 关键字的区别是,let 关键字在块级作用域内不能重复定义同名的变量,且该变量仅在块级作用范围内有效。
// let关键字
for (let i = 0; i < 3; ++i) {
}
// 输出结果:i is not defined
console.log(i);
// var关键字
for (var i = 0; i < 3; ++i) {
}
// 输出结果为:3
console.log(i);
通过 let 定义的变量相比 var 来说,有一个更加清晰的作用范围,方便了变量的维护与控制。
5.3 跳转语句
跳转语句用于实现程序执行过程中的流程跳转。
常用的跳转语句:有 break 和 continue 语句。
break 与 continue 的区别
- break 语句可应用在 switch 和循环语句中,其作用是终止当前语句的执行,跳出 switch 选择结构或循环语句,执行后面的代码。
- continue 语句用于结束本次循环的执行,开始下一轮循环的执行操作。
break 和 continue 语句还可跳转到指定的标签语句处,实现嵌套语句的多层次跳转。
// 定义标签
label:statement
// 使用标签
break/continue label;
outerloop:
for (var i = 0; i < 10; i++)
{
innerloop:
for (var j = 0; j < 10; j++)
{
if (j > 3)
{
break;
}
if (i == 2)
{
break innerloop;
}
if (i == 4)
{
break outerloop;
}
document.write("i=" + i + " j=" + j + "");
}
}
- label 表示标签的名称,如 start、end 等任意合法的标识符。
- statement 表示具体执行的语句,如 if、while、变量的声明等。
- 标签语句必须在使用之前定义,否则会出现找不到标签的情况。
6 练习作业
-
根据平均分来划分等级
- 得到小明同学的各科平均成绩,如果大于等于90为优秀,小于90大于等于80为良好,小于80大于等于70为一般,小于70大于等于60为较差,小于60为很差
-
加油优惠价格计算
- 加油站实行多加多优惠政策,鼓励车主多加油
- 已知92号汽油,每升7.15元;如果大于等于20升,那么每升7.1
- 已知95号汽油,每升7.63元;如果大于等于40升,那么每升7.6
- 编写JS程序,用户输入自己的汽油编号,然后输入自己加多少升,弹出价格。
-
输出100以内的所有质数
-
判断一个数是否是素数(素数也叫作质数)
-
输入圆的半径计算面积和周长
-
三元运算符比较最大值
-
while实现1-100相加求和
-
while do…while验证用户名和密码
-
打印菱形、三角形
-
输出【100-999】中的水仙花数
- 水仙花数是指一个3位数,它的每个位上的数字的3次幂之和等于它本身,例如:13+53+3^3=153。
-
打印金字塔
-
九九乘法表
-
一百个和尚分一百个馒头,大和尚一人分三个,小和尚三人分一个,正好分完。问大、小和尚各几人?
-
公鸡一个五块钱,母鸡一个三块钱,小鸡三个一块钱,现在要用一百块钱买一百只鸡,问公鸡、母鸡、小鸡各多少只?
break outerloop; } document.write("i=" + i + " j=" + j + "");
}
}
- label 表示标签的名称,如 start、end 等任意合法的标识符。
- statement 表示具体执行的语句,如 if、while、变量的声明等。
- 标签语句必须在使用之前定义,否则会出现找不到标签的情况。
## 6 练习作业
- 根据平均分来划分等级
- 得到小明同学的各科平均成绩,如果大于等于90为优秀,小于90大于等于80为良好,小于80大于等于70为一般,小于70大于等于60为较差,小于60为很差
- 加油优惠价格计算
- 加油站实行多加多优惠政策,鼓励车主多加油
- 已知92号汽油,每升7.15元;如果大于等于20升,那么每升7.1
- 已知95号汽油,每升7.63元;如果大于等于40升,那么每升7.6
- 编写JS程序,用户输入自己的汽油编号,然后输入自己加多少升,弹出价格。
- 输出100以内的所有质数
- 判断一个数是否是素数(素数也叫作质数)
- 输入圆的半径计算面积和周长
- 三元运算符比较最大值
- while实现1-100相加求和
- while do...while验证用户名和密码
- 打印菱形、三角形
- 输出【100-999】中的水仙花数
- 水仙花数是指一个3位数,它的每个位上的数字的3次幂之和等于它本身,例如:1^3+5^3+3^3=153。
- 打印金字塔
[外链图片转存中...(img-TiSa8RbT-1695633510590)]
- 九九乘法表
<img src="https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2022-01-03%2F202201032323026.png&pos_id=img-rQ8QhapN-1695633577683)" alt="image-20220103232309923" />
- 一百个和尚分一百个馒头,大和尚一人分三个,小和尚三人分一个,正好分完。问大、小和尚各几人?
- 公鸡一个五块钱,母鸡一个三块钱,小鸡三个一块钱,现在要用一百块钱买一百只鸡,问公鸡、母鸡、小鸡各多少只?
- 红白球共25个,白黑球共31个,红黑球共28个,求三种球各有多少?求红白黑球的个数