第二章 JavaScript基本语法

一、变量

1、标识符

（1）概念：程序开发中，经常需要自定义一些符号来标记一些名称，并赋予其特定的用途，如变量名、函数名等，这些符号都被称为标识符。

（2）定义规则

由大小写字母、数字、下划线和美元符号（$）组成。

不能以数字开头。

严格区分大小写。

不能使用JavaScript中的关键字命名。

要尽量要做到“顾名思义”。

当标识符中需要多个单词进行表示时，常见的表示方式有下划线法（如user_name）、驼峰法（如userName）和帕斯卡法（如UserName）。读者可根据开发需求统一规范命名的方式，如下划线方式通常应用于变量的命名，驼峰法通常应用于函数名的命名等。

2、保留关键字

（1）保留关键字：是指在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在载入过程中出现语法错误。

（2）未来保留关键字：是指预留的，未来可能会成为保留关键字的单词。

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

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

3、变量的使用

概念：变量可以看作是存储数据的容器。

举例：盛水的杯子，杯子指变量，杯中的水指保存在变量中的数据。

语法：JavaScript中变量通常利用var关键字声明，并且变量名的命名规则与标识符相同。

举例：合法变量名（如number、_it123）、非法变量名（如88shout、&num）。

未赋初始值的变量，默认值会被设定为undefined。例子如下：

    var sales;

行末的分号表示语句结束，变量与变量之间的逗号（,）操作符，可实现一条语句同时完成多个变量的声明。例子如下：

    var nemu, room, hot;

4、变量的赋值

声明变量、为变量赋值

    var nemu, room;
    nemu = 3;
    room =7;

声明变量的同时为变量赋值

    var cat = "TOM", age = 82;

省略var关键字，直接为变量赋值

    a = 3, b = 7;

注意：JavaScript中变量虽然可以直接省略var关键字为变量赋值，但是为了提高代码的可阅读性，强烈建议不要省略var关键字，且要使用变量在前。

5、定义常量

常量：可以理解为在脚本运行过程中值始终不变的量。

特点：一旦被定义就不能被修改或重新定义。

举例：数学中的圆周率π就是一个常量，其值就是固定语法：ES6中新增了const关键字，用于实现常量的定义

常量命名规则：遵循标识符命名规则，习惯上常量名称总是使用大写字母表示。

常量的值：常量在赋值时可以是具体的数据，也可以是表达式的值或变量。且不能被改变的。

常量一旦被赋值就不能被改变。

常量在声明时必须为其指定某个值。

    var a = 3;
    const b = 7;
    const C = 3 * 7;
    // 输出结果：C = 21
    alert('C=' + C);

二、数据类型

1、数据类型分类

在使用或赋值时根据设置的具体内容再确其对应的类型。

但每一种计算机语言都有自己所支持的数据类型，JavaScript也不例外。

2、基本数据类型

（1）布尔型

布尔型是JavaScript中较常用的数据类型之一，通常用于逻辑判断

true    false

表示事物的“真”和“假”，严格遵循大小写，因此true和false值只有全部为小写时才表示布尔型。

（2）数值型

JavaScript中的数值型并不区分整数和浮点数，所有数字都是数值型。

添加“- ”符号表示负数。

添加“+ ”符号表示正数（通常情况下省略“+”）。

设置为NaN表示非数值。

    var oct = 032;      // 八进制数表示的26
    var dec = 26;       // 十进制数26
    var hex = 0x1a;     // 十六进制数表示的26
    var menu1 = 7.26;       // 标准格式
    var menu2 = -6.24;  // 标准格式
    var menu3 = 3.14E6; // 科学计数法格式3.14*106
    var menu4 = 8.96E-3;    // 科学计数法格式8.96*10-3

只要给定的值不超过JavaScript中允许数值指定的范围即可。

（3）NaN非数值

NaN 是一个全局对象的属性，它的初始值就是NaN。

与数值型中的特殊值NaN一样，都表示非数字（Not a Number）。

可用于表示某个数据是否属于数值型。

NaN没有一个确切的值，仅表示非数值型的一个范围。

例如，NaN与NaN进行比较时，结果不一定为真（true），这是由于被操作的数据可能是布尔型、字符型、空型、未定义型和对象型中的任意一种类型。

（4）字符型

字符型（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”表示“好”

（5）空型

空型（Null）只有一个特殊的null值。

空型用于表示一个不存在的或无效的对象与地址。

JavaScript中大小写敏感，因此变量值只有是小写的null时才表示空型（Null）。

（6）未定义型

未定义型（Undefined）也只有一个特殊的undefined值。

未定义型用于声明的变量还未被初始化时，变量的默认值为undefined。

与null不同的是，undefined表示没有为变量设置值，而null则表示变量（对象或地址）不存在或无效。

注意：null和undefined与空字符串（''）和0都不相等。

3、数据类型检测

    var menu1 = 12, menu2 = '34', num = 0;  // 声明变量并赋值
    num = menu1 + menu2;        // 变量进行相加运算
    alert(num);     // 输出结果：1234

“+”运算符的操作数只要有一个是字符串，就表示字符串拼接，上述代码中的 34有双引号包裹着，所以它是字符型，因此对话框弹出 1234

若对参与运算的数据类型有要求时，需要进行数据类型检测。

JavaScript中对于数据类型的检测提供了以下两种方式：

typeof操作符                 Object.prototype.toString.call()

    console.log(typeof menu1);          // 输出结果：number
    console.log(typeof menu2);          // 输出结果：string
    console.log(typeof num);        // 输出结果：string

在利用typeof检测null的类型时返回的是object而不是null。

由于JavaScript中一切皆对象，因此可利用Object.prototype.toString.call()对象原型的扩展函数更精确的区分数据类型。

在利用typeof检测null的类型时返回的是object而不是null。

由于JavaScript中一切皆对象，因此可利用Object.prototype.toString.call()对象原型的扩展函数更精确的区分数据类型。

    var data = num; // 待判断的数据
    var type = 'Null';  // 数据类型，开始字母要大写，如Boolean等
    // 检测数据类型的表达式，若是指定的type型，则返回true，否则返回false
    Object.prototype.toString.call(data) == '[object ' + type + ']';

Object.prototype.toString.call(data)的返回值是一个形如“[object 数据类型]”的字符型结果。（可通过console.log()观察返回值。）

4、数据类型转换（转布尔型、转数值型、转字符型）

（1）转布尔型

应用场景：经常用于表达式和流程控制语句中，如数据的比较、条件的判断。

实现语法：Boolean()函数。

注意事项：Boolean()函数会将任何非空字符串和非零的数值转换为true，将空字符串、0、NaN、undefined和null转换为false。

演示示例：判断用户是否有内容输入。

    var con = prompt(); 
    if (Boolean(con)) {
        document.write('已输入内容   true');
    } else {
        document.write('无输入内容   false');
    }

当用户单击“取消”按钮，或者用户未输入，单点击“确定”按钮，结果都是为false

当用户输入“你好”或者其他内容，单点击“确定”按钮，结果都是为true

（2）转数值型

开发中在接收用户传递的数据进行运算时，为了保证参与运算的都是数值型，经常需要对其进行转换。

实现语法：Number()函数、parseInt()函数或parseFloat()函数。

    // 获取用户的输入，完成自动求和
    var num1 = prompt('请输入求和的第1个数据: ');         // 输入 123qwq
    var num2 = prompt('请输入求和的第2个数据: ');     // 输入 456
    console.log(num1 + num2);       // 控制台输出字符拼接结果 123qwq456
    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。

（3）转字符型

String()函数和toString()方法。

区别： String()函数可以将任意类型转换为字符型；除了null和undefined没有toString()方法外，其他数据类型都可以完成字符的转换。

    var num1 = num2 = num3 = 4, num4 = 26;
    console.log(String(12));    // 控制台输出 12
    console.log(num1 + num2 + num3.toString());     // 控制台输出 84，代码说明：第1步：计算num1+ num2的结果为8。 第2步：num3转成‘4’。  第3步：拼接两次计算的结果为84。
    console.log(num4.toString(2));  // 当toString()括号里的数值为2时，num4就会被转换为二进制值表示的字符串

注意：toString()方法在进行数据类型转换时，可通过参数设置，将数值转换为指定进制的字符串，例如num4.toString(2)，表示首先将十进制26转为二进制11010，然后再转为字符型数据。

三、表达式

1、 表达式可以是各种类型的数据、变量和运算符的集合。最简单的表达式可以是一个变量。

    var a, b, c;              // 声明变量
    a = 1;        // 将表达式“1”的值赋给变量a
    b = 2 + 3;    // 将表达式“2 + 3”的值赋给变量b
    c = b = a;    // 将“a”的值赋给变量b,然后把“b”的值赋给变量c，所以程序运行到这一步时，a、b、c的值都是1
    console.log(c);   // 将表达式“c”的值作为参数传给console.log()方法，在控制台输出
    console.log(a + b); // 将表达式“a + b”的值作为参数传给console.log()方法，在控制台输出

四、运算符（专门用于告诉程序执行特定运算或逻辑操作的符号。）

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。

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的数据，与空字符串进行拼接，就会完成字符型的自动转换。

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 = 7;

将7赋值给变量c，再把变量c的值赋值给变量b，把变量b的值赋值变量a，表达式赋值完成。

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

注意：不相同类型的数据进行比较时，首先会自动将其转换成相同类型的数据后再进行比较。

运算符“==”和“!=”运算符在比较时，只比较值是否相等。

运算符“===”与“!==”要比较数值和其数据类型是否相等。

5、逻辑运算符

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

运算符	运算	范例	结果
&&	与	a && b	a和b都为true，结果为true，否则为false
||	或	a || b	a和b中至少有一个为true，则结果为true，否则为false
!	非	! a	若a为false，结果为true，否则相反

逻辑运算符的结合性是从左到右。

当使用“&&”连接两个表达式时，如果左边表达式的值为false，则右边的表达式不会执行，逻辑运算结果为false。（短路）

当使用“||”连接两个表达式时，如果左边表达式的值为true，则右边的表达式不会执行，逻辑运算结果为true。（短路）

逻辑运算符可针对结果为布尔值的表达式进行运算。

6、三元运算符

三元运算符是一种需要三个操作数的运算符，运算的结果根据给定条件决定。

    条件表达式 ? 表达式1 : 表达式2

先求条件表达式的值。

如果为true，则返回表达式1的执行结果。

如果条件表达式的值为false，则返回表达式2的执行结果。

    1 > 2 ? console.log("是") : console.log("否");

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中位运算符仅能对数值型的数据进行运算。在对数字进行位运算之前，程序会将所有的操作数转换成二进制数，然后再逐位运算。

8、运算符优先级

指的是在表达式中各个运算符参与运算的先后顺序。例如：先乘除，后加减。

表中运算符的优先级由上至下递减。

结合方向	运算符
无	()
左	.   []   new（有参数，无结合性）
右	new（无参数）
无	++（后置）   --（后置）
右	!   ~   -（负数）   +（正数）   ++（前置）   --（前置）   typeof   void   delete
右	**
左	*    /   %
左	+   -
左	<<    >>    >>>
左	<   <=   >    >=    in   instanceof
左	==   !=    ===    !==
左	&
左	^
左	|
左	&&
左	||
右	?:
右	=   +=   =   *=   /=   %=    <<=   >>=    >>>=    &=    ^=   |=
左	,

同一单元格的运算符具有相同的优先级。

左结合方向表示同级运算符的执行顺序为从左到右。

右结合方向则表示执行顺序为从右到左。

补充：圆括号( )优先级别最高。例如， 4 + 3 * 2的 输出结果为10，(4 + 3) * 2的输出结果为14。

四、流程控制

1、选择结构

选择结构语句需要根据给出的条件进行判断来决定执行对应的代码。

if单分支语句            if…else双分支语句

if…else if…else多分支语句          switch多分支语句

（1）if单分支语句

概念：if条件判断语句也被称为单分支语句，当满足某种条件时，就进行某种处理。

    if( age >=18){
        alert("成年人")
    }

（2）if…else双分支语句

概念：if…else语句也称为双分支语句，当满足某种条件时，就进行某种处理，否则进行另一种处理。

举例：判断一个学生的年龄，大于等于18岁则是成年人，否则是未成年人。

 

    if( age >=18){
        alert("成年人")
    }else{
        alert("未成年人")
    }

（3）if…else if…else多分支语句

if…else if…else语句也称为多分支语句，可针对不同情况进行不同的处理。

举例：对一个学生的考试成绩进行等级的划分，分数在90~100分为优秀，分数在80~90分为优秀为良好，分数在70~80分为中等，分数在60~70分为及格，分数小于60则为不及格。

    if ( score >=90  && score <=100 ) {
        alert("优秀")
    } else if( score >=80  && score <90 ){
        alert("良好")
    }else if ( score >=70  && score <80 ) {
        alert("中等")
    }else if ( score >=60  && score <70 ) {
        alert("及格")
    } else if ( score >0  && score <60 ) {
        alert("不及格")
    } else {
        alert("分数不合法")
    }

注意：“if…else if…else”语句在使用时，“else if”中间要有空格，否则程序会报语法错误。

（4）switch多分支语句

switch语句也是多分支语句，功能与if系列条件语句相同，不同的是它只能针对某个表达式的值作出判断，从而决定执行哪一段代码。

特点：代码更加清晰简洁、便于阅读。

举例：根据学生成绩score进行评比（满分为100分）。

    switch (parseInt(score/10)) {
        case 10 && 9 : alert("优秀"); break;
        case 8 : alert("良好"); break;
        case 7 : alert("中等"); break;
        case 6 : alert("及格"); break;

        default: alert("不及格"); break;
    }

2、循环结构

所谓循环语句就是可以实现一段代码的重复执行。

举例：连续输出1~100之间的数字。

While                   do…while                   for

（1）while循环语句

while循环语句是根据循环条件来判断是否重复执行一段代码。

 

    while(num <=100){
        console.log(num);
        num++;
    }

需要注意的是，若循环条件永远为true时，则会出现死循环，因此在开发中应根据实际需要，在循环体中设置循环出口，即循环结束的条件。

（2）for循环语

for循环语句是最常用的循环语句，它适合循环次数已知的情况。

    for( var qwq =0; qwq <5; ++qwq){
        console.log("循环成功");
    }

 

for关键字后面小括号“()”中包括了三部分内容：

①初始化表达式。

②循环条件。

④操作表达式。

它们之间用“;”分隔，{}中的执行语句为 ③循环体。

注意：for循环语句小括号“()”内的每个表达式都可以为空，但是必须保留分号分割符。当每个表达式都为空时，表示该for循环语句的循环条件永远满足，会进入无限循环的状态，此时如果要结束无限循环，可在for语句循环体中用跳转语句进行控制。

let关键字

在ES6中，可以通过let关键字声明一个块级作用域（可以理解为{}之间的代码）的本地变量。

它与var关键字的区别是，let关键字在块级作用域内不能重复定义同名的变量，且该变量仅在块级作用范围内有效。

    for( let qwq =0; qwq <5; ++qwq){
        console.log("循环成功");
    }

通过let定义的变量相比var来说，有一个更加清晰的作用范围，方便了变量的维护与控制。

3、跳转语句

跳转语句用于实现程序执行过程中的流程跳转。

常用的跳转语句：有break和continue语句。

break与continue的区别：break语句可应用在switch和循环语句中，其作用是终止当前语句的执行，跳出switch选择结构或循环语句，执行后面的代码。而continue语句用于结束本次循环的执行，开始下一轮循环的执行操作。

其他功能：break和continue语句还可跳转到指定的标签语句处，实现嵌套语句的多层次跳转。

// 定义标签
label : statement
// 使用标签
break/continue  label;

label表示标签的名称，如start、end等任意合法的标识符。

statement表示具体执行的语句，如if、while、变量的声明等。

标签语句必须在使用之前定义，否则会出现找不到标签的情况。

4、【案例】打印金字塔

代码实现思路：

（1） 分析金字塔组成：由空格和星星“*”组成的三角形。

（2）分析“*”和空格的分布规律（假设最上面的一个星星作为金字塔的第一层）。

（3）每层中星星的数量 = 当前层数*2 -1。例如当前为第4层，则星星数= 4*2-1=7。

（4）每层星星前的空格 = 金字塔层数 – 当前层数。例如当前行数为第3层，则空格数=5-3=2。

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星号金字塔</title>
    <script>
        var m;
        do {
            var n = prompt("请输入金字塔的层数n:");
            if (parseInt(n) != NaN) {
                m = parseInt(n);
                break;
            }
            else alert("输入内容必须为数字n,请重试!");
        } while (true);
        for (var i = 1; i <= m; i++) {
            for (var j = 1; j <= m - i; j++) {
                document.write("&nbsp;");
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
                document.write("*");
            }
            document.write("<br>");
        }
    </script>
</head>

<body>

</body>

</html>