第2章 JavaScript基本语法

❤️‍🔥前情提要❤️‍🔥
  欢迎来到JavaScript基本语法教程
  上一章讲解了JavaScript快速入门的知识。本章将详细讲解JavaScript基本语法。
  JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。
  在进入工作岗位之前，语言是你简历上应该具备的基本技能之一。
  🍪本教程内容干货满满，跟上步伐吧~🍪

---

作者介绍：

🎓 作者：某编程爱好者📜
🗒️系列文章&专栏推荐： 🔗《JavaScript快速入门教程》 、🔗《MySQL数据库》、🔗 《Web前端教程》、🔗《Python基础》
🕸️为大家推荐一款很好用的前端刷题网站🔗点击跳转

---

🔖导航小助手🔖

• • 📑2.1 JavaScript的变量
  • • 🏷️2.1.1 标识符
    • 🏷️2.1.2 保留关键字
    • 🏷️2.1.3 变量的使用
    • 🏷️2.1.4 变量的赋值
  • 📑2.2 数据类型
  • • 🏷️2.2.1 数据类型分类
    • 🏷️2.2.2 基本数据类型
    • 🏷️2.2.3 数据类型检测
    • 🏷️2.2.4 数据类型转换
  • 📑2.3 表达式
  • 📑2.4 运算符
  • • 🏷️2.4.1 算术运算符
    • 🏷️2.4.2 字符串运算符
    • 🏷️2.4.3 赋值运算符
    • 🏷️2.4.4 比较运算符
    • 🏷️2.4.5 逻辑运算符
    • 🏷️2.4.6 三元运算符
    • 🏷️2.4.7 位运算符
    • 🏷️2.4.8 运算符优先级
  • 🎀小结

---

📑2.1 JavaScript的变量

---

👉变量是用于存储信息的"容器"。

---

🏷️2.1.1 标识符

💡概念及规则

• 概念

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

• 定义规则

  • 由大小写字母、数字、下划线和美元符号（$）组成。
  • 不能以数字开头。
  • 严格区分大小写。
  • 不能使用JavaScript中的关键字命名。
  • 要尽量要做到“见其名知其意”。

• 合适标识符示例

  • 合法的标识符为： it、It、age66、_age、$name

  • 非法的标识符为： t-o、t o、798lu

    ⚠️注意

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

---

🏷️2.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

    ⚠️注意

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

---

🏷️2.1.3 变量的使用

💡概念及规则

• 概念

  • 变量可以看作是存储数据的容器。

• 定义规则

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

• 语法

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

• 举例

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

    ⚠️注意

    • 未赋初始值的变量，默认值会被设定为undefined。

    • 行末的分号表示语句结束。

    • 变量与变量之间的逗号（,）操作符，可实现一条语句同时完成多个变量的声明。

      var sales;
      var hits, hot, NEWS;
      var room_101, room102;
      var $name, $age;
      1
      2
      3
      4

---

🏷️2.1.4 变量的赋值

// 声明变量、为变量赋值
var unit, room;
unit = 3;
room = 1001;

// 声明变量的同时为变量赋值
var fname = 'Tom', age = 12;

// 省略var关键字，直接为变量赋值
flag = false;		
a = 1, b = 2;
1
2
3
4
5
6
7
8
9
10
11

⚠️注意

• JavaScript中变量虽然可以不事先声明，直接省略var关键字为变量赋值。但由于JavaScript采用的是动态编译，程序运行时不容易发现代码中的错误，所以推荐读者在使用变量前，要养成先声明的良好习惯。

❓什么是常量

• 🥐常量

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

• 🥯特点

  • 一旦被定义就不能被修改或重新定义。

• 🌰举例

  • 数学中的圆周率π就是一个常量，其值就是固定且不能被改变的。

• 💬语法

  • ES6中新增了const关键字，用于实现常量的定义

• 📄常量命名规则

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

• 🌲常量的值

  • 常量在赋值时可以是具体的数据，也可以是表达式的值或变量。

    ⚠️注意

    • 常量一旦被赋值就不能被改变。
    • 常量在声明时必须为其指定某个值。

---

📑2.2 数据类型

• 👉值类型(基本类型)

  • 字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

• 👉引用数据类型（对象类型）

  • 对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

---

🏷️2.2.1 数据类型分类

• 👉JavaScript中的数据

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

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

---

🏷️2.2.2 基本数据类型

1️⃣布尔型

• 概念
  • 布尔型是JavaScript中较常用的数据类型之一，通常用于逻辑判断。
• 值
  • true、false
  • 表示事物的“真”和“假”，严格遵循大小写，因此true和false值只有全部为小写时才表示布尔型。

2️⃣数值型

• 概念

  • JavaScript中的数值型并不区分整数和浮点数，所有数字都是数值型。
    • 添加“- ”符号表示负数。
    • 添加“+ ”符号表示正数（通常情况下省略“+”）。
    • 设置为NaN表示非数值。

• 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中允许数值指定的范围即可。
  1
  2
  3
  4
  5
  6
  7
  8

• NaN非数值

  • NaN 是一个全局对象的属性，它的初始值就是NaN。
  • 与数值型中的特殊值NaN一样，都表示非数字（Not a Number）。
  • 可用于表示某个数据是否属于数值型。
  • NaN没有一个确切的值，仅表示非数值型的一个范围。
  • 例如，NaN与NaN进行比较时，结果不一定为真（true），这是由于被操作的数据可能是布尔型、字符型、空型、未定义型和对象型中的任意一种类型。

3️⃣字符型

• 概念
  • 字符型（String）是由Unicode字符、数字等组成的字符序列，这个字符序列我们一般将其称为字符串。
• 作用
  • 表示文本的数据类型。
• 语法
  • 程序中的字符型数据包含在单引号（"）或双引号（""）。

var slogan = 'Knowledge';		// 单引号，存放一个单词
var str = "the sky is blue."; 	// 双引号，存放一个句子
var color = '"red"blue'; 		// 单引号中包含双引号
var food = "'pizza'bread";		// 双引号中包含单引号
var num = '', total = "";		// 定义空字符串
// 由单引号定界的字符串中可以包含双引号。
// 由双引号定界的字符串中也可以包含单引号。
1
2
3
4
5
6
7

• 问题
  • 如何在在单引号中使用单引号，或在双引号中使用双引号？
• 答案
  • 利用转义字符“\”进行转义。

4️⃣空型

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

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

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

5️⃣未定义型

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

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

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

  ⚠️注意

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

---

🏷️2.2.3 数据类型检测

❓为什么需要数据类型检测，以下面的示例进行讲解？

var num1 = 12, num2 = '34', sum = 0;	// 声明变量并赋值
sum = num1 + num2;			// 变量进行相加运算
console.log(sum); 			// 输出结果：1234
1
2
3

• ❓请分析并说出变量sum的数据类型，以及为什么？

  • 🥐思考答案
    • 变量sum是字符型。
  • 🍞过程分析：
    • 运算符“+”的操作数只要有一个是字符型，则它表示字符拼接。而此案例中参与运算的两个变量，num1是数值型，num2是字符型，因此最后的输出结果变量sum就是num1与num2进行拼接后的字符串。
  • 🥪思考结论
    • 参与运算的数据类型有要求时，需要进行数据类型检测。

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

  • typeof操作符
  • Object.prototype.toString.call()
    • typeof操作符以字符串形式，返回未经计算的操作数的类型。

onsole.log(typeof num1);       	// 输出结果：number
console.log(typeof num2);       	// 输出结果：string
console.log(typeof sum);       	// 输出结果：string
1
2
3

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

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

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

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

---

🏷️2.2.4 数据类型转换

🏻转布尔型

• 应用场景

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

• 实现语法

  • Boolean()函数。

• 注意事项

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

• 演示示例

  • 判断用户是否有内容输入。

var con = prompt(); 
if (Boolean(con)) {
  document.write('已输入内容');
} else {
  document.write('无输入内容');
}
1
2
3
4
5
6

• 对**Boolean(con)**进行分析：
  • 用户单击“取消”按钮，则结果为false
  • 用户未输入，单点击“确定”按钮，则结果为false
  • 用户输入“哈哈”，单点击“确定”按钮，则结果为true

🏻转布尔型

• 应用场景

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

• 实现语法

  • Number()函数、parseInt()函数或parseFloat()函数。

• 演示示例

  • 根据用户的输入完成自动求和。

// 获取用户的输入，完成自动求和
var num1 = prompt('请输入求和的第1个数据：'); // 123abc
var num2 = prompt('请输入求和的第2个数据：'); 	// 456
console.log(num1 + num2); // 123abc456
console.log(parseInt(num1) + parseInt(num2)); // 579
1
2
3
4
5

⚠️转数值型的函数在使用时有一定的区别。

• 所有函数在转换纯数字时会忽略前导零，如“0123”字符串会被转换为123。

• arseFloat()函数会将数据转换为浮点数（可以理解为小数）。

• parseInt()函数会直接省略小数部分，返回数据的整数部分，并可通过第2个参数设置转换的进制数。

🏻转字符型

• 实现语法

  • 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));
// 第①步：计算num1+ num2的结果为8。
// 第②步：num3转成‘4’。
// 第③步：拼接两次计算的结果为84。
1
2
3
4
5
6
7

⚠️注意

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

---

📑2.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()方法
1
2
3
4
5
6

---

📑2.4 运算符

👉所谓运算符就是专门用于告诉程序执行特定运算或逻辑操作的符号。

---

🏷️2.4.1 算术运算符

• 对数值类型的变量及常量进行算数运算。

  也是最简单和最常用的运算符号。

⚠️注意

• 四则混合运算，遵循 “先乘除后加减”的原则。

• 取模运算结果的正负取决于被模数（%左边的数）的符号。

• 尽量避免利用小数进行运算，有时可能因JavaScript的精度导致结果的偏差。

• “+”和“-”在算术运算时还可以表示正数或负数。

• 运算符（++或–）放在操作数前面，先进行自增或自减运算，再进行其他运算。

• 若运算符放在操作数后面，则先进行其他运算，再进行自增或自减运算。

• 递增和递减运算符仅对数值型和布尔型数据操作，会将布尔值true当做1，false当做0。

---

🏷️2.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
1
2
3
4
5
6

⚠️注意

• 利用字符串运算符“+”的特性，可以将布尔型、整型、浮点型或为null的数据，与空字符串进行拼接，就会完成字符型的自动转换。

---

🏷️2.4.3 赋值运算符

概念

• 是一个二元运算符，即它有两个操作数。
• 它将运算符右边的值赋给左边的变量。

⚠️注意

• “=”是赋值运算符，而非数学意义上的相等的关系。
• 一条赋值语句可以对多个变量进行赋值。
• 赋值运算符的结合性为“从右向左”。

---

🏷️2.4.4 比较运算符

概念

• 用来对两个数值或变量进行比较。
• 其结果是布尔类型的true或false。

⚠️注意

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

---

🏷️2.4.5 逻辑运算符

概念

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

⚠️注意

• 逻辑运算符的结合性是从左到右。
• 当使用“&&”连接两个表达式时，如果左边表达式的值为false，则右边的表达式不会执行，逻辑运算结果为false。（短路）
• 当使用“||”连接两个表达式时，如果左边表达式的值为true，则右边的表达式不会执行，逻辑运算结果为true。（短路）
• 逻辑运算符可针对结果为布尔值的表达式进行运算。

---

🏷️2.4.6 三元运算符

概念

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

表达式

• 条件表达式 ? 表达式****1 : 表达式****2
  • 先求条件表达式的值。
  • 如果为true，则返回表达式1的执行结果。
  • 如果条件表达式的值为false，则返回表达式2的执行结果。

---

🏷️2.4.7 位运算符

概念

• 是针对二进制数的每一位进行运算的符号。
• 它专门针对数字0和1进行操作。

⚠️注意

• JavaScript中位运算符仅能对数值型的数据进行运算。在对数字进行位运算之前，程序会将所有的操作数转换成二进制数，然后再逐位运算。

  • 按位与

    • ​ 00000000 00000000 00000000 00001111
    • & 00000000 00000000 00000000 00001001
    • —————————————————————————
    • 00000000 00000000 00000000 00001001

  • 按位或

    • ​ 00000000 00000000 00000000 00001111
    • & 00000000 00000000 00000000 00001001
    • —————————————————————————
    • 00000000 00000000 00000000 00001001

  • 按位非

    • ~ 00000000 00000000 00000000 00001111
    • —————————————————————————
    • 11111111 11111111 1 1111111 11110000

  • 按位异或

    • 00000000 00000000 00000000 00001111
    • ^ 00000000 00000000 00000000 00001001
    • —————————————————————————
    • 00000000 00000000 00000000 00000110

  • 左移

    • 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

---

🏷️2.4.8 运算符优先级

概念

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

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

⚠️注意

• 同一单元格的运算符具有相同的优先级。
• 左结合方向表示同级运算符的执行顺序为从左到右。
• 右结合方向则表示执行顺序为从右到左。
• 补充：圆括号()优先级别最高。例如， 4 + 3 * 2的 输出结果为10，(4 + 3) * 2的输出结果为14。

---

🎀小结

⚡恭喜你的内功又双叒叕敠得到了提高！！！🔋

👉本节首先介绍了JavaScript的变量、数据类型，然后讲解了表达式、运算符等相关的内容，各个大板块中针对JavaScript的基础知识进行了解释，包括标识符、关键字、数据类型、表达式、逻辑运算符、三元运算符、位运算符等

🔚以上就是JavaScript基本语法的全部知识了~

🤗感谢大家的阅读~

📬后续还会继续更新💓，欢迎持续关注哟~📌

💫如果有错误❌，欢迎指正呀💫

✨如果觉得收获满满，可以点点赞👍支持一下哟~✨

---

---