05_JavaScript基本语法

news2024/11/24 3:10:02

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 语言中被事先定义好并赋予特殊含义的单词。
breakcasecatchclassconstcontinue
debuggerdefaultdeletedoelseexport
extendsfalsefinallyforfunctionif
importininstanceofnewnullreturn
superswitchthisthrowtrytrue
typeofvarvoidwhilewithyield

注:关键字不能作为变量名和函数名使用,否则会使 JavaScript 在载入过程中出现语法错误。

  • 未来保留关键字:是指预留的,未来可能会成为保留关键字的单词。
abstractargumentsawaitbytebooleanchar
doubleenumevalfinalfloatgoto
implementsintinterfaceletlongnative
packageprivateprotectedpublicshortstatic
synchronizedthrowstransientvolatile

注:标识符在定义时,建议不要用未来保留关键字,避免将来转换为关键字时出现错误。

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、水平)
\tTab符号\r换行
\f换页\\反斜杠(\)
\b退格\0Null字节
\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()
纯数字字符串转成对应的数字转成对应的数字转成对应的数字
空字符串0NaNNaN
数字开头的字符串NaN转成开头的数字转成开头的数字
非数字开头字符串NaNNaNNaN
null0NaNNaN
undefinedNaNNaNNaN
false0NaNNaN
true1NaNNaN
  • 所有函数在转换纯数字时会忽略前导零,如“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+510
-6-42
*3*412
/3/21.5
%求余5%75
**幂运算3**481
++自增(前置)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 == 4false
!=不等于x != 4true
===全等x === 5true
!==不全等x !== ‘5’true
>大于x > 5false
>=大于或等于x >= 5true
<小于x < 5false
<=小于或等于x <= 5true

注意:

  • 不相同类型的数据进行比较时,首先会自动将其转换成相同类型的数据后再进行比较。
  • 运算符“==”和“!=”运算符在比较时,只比较值是否相等。
  • 运算符“=”与“!”要比较数值和其数据类型是否相等。

不同类型数据比较,规律如下:

类型类型比较方式说明
对象型对象型比较是不是同一内存地址
对象型字符型对象先转化为字符型,再进行比较。
对象型布尔型两边都要先转为数值型,布尔类型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,再进行比较。
数值型字符型字符型先转化为数值型,再进行比较。
布尔型布尔型两边都要先转化为数值型,再进行比较。
nullundefinedtrue
null,undefined其他类型falsealert(nullfalse);
alert(null
0);
alert(null==‘’);

4.5 逻辑运算符

是在程序开发中用于逻辑判断的符号。其返回值类型是布尔类型。

运算符运算范例结果
&&a && ba和b都为true,结果为true,否则为false
||a || ba和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 & ba和b每一位进行“与”操作后的结果
|按位或a | ba和b每一位进行“或”操作后的结果
~按位非~ aa的每一位进行“非”操作后的结果
^按位异或a ^ ba和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。
  • 打印金字塔

  • 九九乘法表

    image-20220103232309923
  • 一百个和尚分一百个馒头,大和尚一人分三个,小和尚三人分一个,正好分完。问大、小和尚各几人?

  • 公鸡一个五块钱,母鸡一个三块钱,小鸡三个一块钱,现在要用一百块钱买一百只鸡,问公鸡、母鸡、小鸡各多少只?

          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个,求三种球各有多少?求红白黑球的个数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1041498.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[docker]笔记-网络故障处理

1、同事在虚拟机上部署docker&#xff0c;发现电脑无法登录虚拟机了。首先ping测是通的&#xff0c;从我电脑继续进行登录测试发现没问题&#xff0c;初步判断是她电脑网络和虚拟机网络之间连接出错。 2、进行虚拟机登录查看&#xff0c;首先使用route -n命令查看路由&#xf…

Java深入理解线程的三大特性

目录 1 CPU缓存导致可见性问题2 线程切换导致原子性问题3 性能优化导致有序性问题4 JMM(Java Memory Model)5 volatile6 synchronized 1 CPU缓存导致可见性问题 线程的三大特性&#xff1a; 可见性&#xff1a;Visibility有序性&#xff1a;Ordering原子性&#xff1a;Atomic…

YApi Pro

1.介绍 说明&#xff1a;YApi Pro 是一款高效、易用、功能强大的 API 管理平台&#xff0c;旨在为开发、产品、测试人员提供更优雅的接口管理服务。它可以帮助开发者轻松创建、发布、维护 API&#xff0c;同时为用户提供了优秀的交互体验&#xff0c;开发人员可以更加高效地完…

【面试算法——动态规划 19】最长回文子序列 (hard)让字符串成为回文串的最少插入次数

516. 最长回文子序列 链接: 516. 最长回文子序列 给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 示例 1&…

C语言实现八种功能的通讯录(添加、删除、查找、修改、显示、排序、退出、清空)

通讯录功能概要及前提说明 此通讯录利用C语言完成&#xff0c;可以实现八种功能的通讯录&#xff08;添加、删除、查找、修改、显示、排序、退出、清空&#xff09; 代码由三部分组成&#xff0c;为什么要写成三部分而不写成一部分可以参考我以前的博客&#xff0c;如下&…

【Linux】Linux多线程

怎么理解线程线程的优缺点线程的二级页表线程用途怎么管理线程线程创建获取创建后的ID方法 线程等待线程终止分离线程线程ID及进程地址空间布局 怎么理解线程 通俗易懂的说&#xff0c;线程的运行是必须有进程给它打个基础。线程的运行是服用进程的代码及空间来进行运作的。 那…

[架构之路-223]:数据管理能力成熟度评估模型DCMM简介

目录 一、背景 二、评估依据 三、评估内容 四、主要适用对象 五、能力等级 六、不同层次的文件&#xff1a; 一、背景 信息技术与经济社会的交汇融合引发了数据爆发式增长。数据蕴含着重要的价值&#xff0c;已成为国家基础性战略资源&#xff0c;正日益对全球生产、流通…

会声会影和pr哪个好用? 2023年最新功能介绍解析

随着抖音、快手、B站等视频平台的普及&#xff0c;每个人都能成为视频创作者&#xff0c;视频剪辑软件成为自媒体创作的必备工具。一些新入门视频剪辑的小伙伴可能会疑惑&#xff0c;会声会影和PR软件哪个好呢&#xff1f;今天我将从核心功能、稳定性和性价比三个方面&#xff…

从中序遍历和后序遍历构建二叉树

题目描述 106. 从中序与后序遍历序列构造二叉树 中等 1.1K 相关企业 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1…

腾讯Mini项目课程前置学习笔记(第一轮)

Mini项目课程前置学习笔记&#xff08;第一轮&#xff09; 时间&#xff1a;5.20 ~ 5.23 项目基本介绍 项目 B. 指标监控服务重构 指标的收集与展示是后台系统监控中非常重要的一环&#xff0c;很可惜大而全的全链路监控方案并不适合我们&#xff0c;于是就有了本 mini 项目。…

cesium在vue中引入报错

npm install cesium1.95.0 找了很久各种办法都用了 最后就是降到这个版本。 在main.js中这样引入就可以运行起来了 import * as Cesium from cesium/Build/Cesium/Cesium.js; import cesium/Build/Cesium/Widgets/widgets.css; Vue.prototype.cesiumCesium 没出来是因为这个…

根据表名称快速查询表所有字段是否包含特定数据筛选

当前需要清理某个表中所有字段&#xff0c;检查是否有包含DEl字符的脏数据&#xff0c;如果字段比较少的直接根据字段查询即可&#xff0c;但是如果有几十个字段的话&#xff0c;逐个检查会很慢。 当前使用的方式是&#xff1a; 1&#xff1a;根据表名称获取当前表所有的字段 …

《信息系统项目管理师教程(第4版)》第1章至第5章 信息化发展、信息技术发展、信息系统治理、信息系统管理、信息系统工程 常见考点、知识点、思维导图、xmind

第一章至第五章多以选择题形式考察&#xff0c;分值在20分左右。已将考点、知识点整理成思维导图&#xff0c;可免费下载。以下是思维导图的部分截图&#xff1a; 第一章 信息化发展 第二章 信息技术发展 第三章 信息系统治理 第四章 信息系统管理 第五章 信息系统工程

代码随想录算法训练营第四十二天 | 动态规划 part 4 | 01背包问题(二维、一维滚动数组)、416. 分割等和子集

目录 01背包问题 二维代码 01背包问题&#xff08;一维滚动数组&#xff09;代码 416. 分割等和子集思路代码 01背包问题 二维 背包问题汇总&#xff1a; 二维数组dp——01背包五部曲 dp[i][j]表示从下标为[0-i]的物品里面任意取&#xff0c;放进容量为j的背包&#xff0c;价值…

Redis入门 (店铺营业状态设置) --苍穹外卖day4

目录 redis简介 redis下载与安装 redis服务启动与停止​编辑 redis数据类型 五种常用数据类型 各个类型特点 redis常用命令 字符串 哈希 列表 集合 有序集合 通用指令 ​在Java中操作Redis 导入坐标 编写配置类​ 通过RedisTem~对象操作 字符串 ​哈希 列…

什么是CDN

CDN是什么&#xff1f; 假设有一个IP为100.1.1.1的服务器网站&#xff0c;在没有CDN的情况下&#xff0c;PC先访问该服务器的DNS服务器&#xff0c;经过域名解析后再去访问服务器&#xff0c;如下图&#xff1a; 如果部署了CDN&#xff0c;这时候就有一个能识别CDN节点的DNS服…

经过打包后运行app.exe文件之后问题解决

项目文件经过python代码如何打包方法打包之后文件目录是下面这样的。 按照下面的路径运行app.exe文件报错&#xff1a; RuntimeError: Unable to open E:\face_detection\dist\app\face_recognition_models\models\shape_predictor_68_face_landmarks.dat [35816] Failed to…

AI在线工具分享

1、ChatGPT ChatGPT是一种由OpenAI训练的大型语言模型。它的原理是基于Transformer架构&#xff0c;通过预训练大量文本数据来学习如何生成人类可读的文本&#xff0c;然后通过接受输入并生成输出来实现对话。 ChatGPT的用途非常广泛&#xff0c;可以用于自然语言处理&#xf…

Seata入门系列【1】安装seata 1.7.1+nacos 2.1.1

1 介绍 Seata 是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;为用户打造一站式的分布式解决方案。 Github: https://github.com/seata/seata 官方文档&#xff1a;h…

短期光伏发电量短期预测(Python代码,先对异常值处理,再基于XGBoost模型预测)

一.代码流程&#xff08;运行效果&#xff1a;短期光伏发电量短期预测&#xff08;Python代码&#xff0c;先对异常值处理&#xff0c;再基于XGBoost模型预测&#xff09;_哔哩哔哩_bilibili 模型流程&#xff1a; 导入所需的库&#xff0c;包括NumPy、Pandas、Matplotlib、Sea…