JavaScript系列复习（一）

前言

      2022年初始，作为前端开发的菜鸟，项目也慢慢从紧张的氛围中步向尾声，终于又有时间来撸一撸JavaScript了，它是前端开发的重中之重，没有它或者对它不熟悉，就不存在进阶或者进步、亦或者非常困难；因为随着步入更深入的项目层次，需要掌握扎实的基础，所以，时常回顾一下是非常有必要的！希望大家一样，新年伊始，愿不负初心，继续努力！

一、JavaScript中重要的几个概念

      本章节我们简单回顾一下JavaScript中几个简单而且重要的几个概念，标识符、关键字、保留字、区分大小写、字面量等，他们都是JavaScript基本的组成元素。

1、标识符

      平常我们说的标识符也就是名字，比如：变量名、函数名、类名、参数名、属性名等。在JavaScript中，合法的标识符具有一定潜在、强制性规则，如果你不遵循它这个规则，那你的代码就会显得很乱，还有可能报错频率大大增加，极大的影响了代码的可读性！
      我们看看所谓的强制性规则都有哪些：

• （1）、不管是什么名字，每个名字的第一个字符必须是字母、下划线（ _ ）或者美元符号（$），例如：const、_const、$var等。
• （2）、除了第一个字符外，其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母，不建议使用双字节的字符（比如中文汉字）。
• （3）、名字的定义或者命名，都不能与JavaScript的关键字、保留字重名。
• （4）、可以使用 Unicode 转义序列。例如，字符 a 可以使用“\u0061”表示。

2、关键字

      关键字（Keyword）就是 JavaScript 语言内部使用的一组名字（或称为命令）。这些名字具有特定的用途，用户不能自定义同名的标识符，具体说明如下表所示：

关键字	常用说明		关键字	常用说明		关键字	常用说明
switch	用作条件判断		while	条件循环		delete	删除对象属性
case	条件判断的执行内容		do	常和while一起做条件循环		continue
default	条件判断默认执行		function	函数定义		debugge
break	停止执行（判断、函数、代码段）		return	跳出（判断、函数）继续执行		finally	与try...catch...throw操作异常
try	捕获异常中正常执行		var	变量定义、参数定义		instanceof	返回布尔值
catch	捕获异常中异常执行		void			typeof
if	条件判断“是”执行		this
else	条件判断“否”执行		new
for	条件循环、遍历		throw	与try...catch...finally操作异常
in	遍历		with	引用一个对象，只能访问与修改属性，不能增加属性与方法

3、保留字

      保留字就是 JavaScript 语言内部预备使用的一组名字（或称为命令）。保留字是为以后js的扩展用的，不能作为普通变量名。具体如下表所示：

abstract	const	final	int	private	super
boolean	double	float	interface	protected	synchronized
byte	enum	goto	long	public	throws
char	export	implements	native	short	transient
class	extends	import	package	static	volatile

      在ES5中开始规定严格模式（‘use strict’）和非严格模式，两种模式的规则规定有一定差异，比较灵活。

• 严格模式下：ES5的处理很谨慎，严格限制 implements、interface、let、package、private、protected、public、static、yield、eval（非保留字）、arguments（非保留字）的使用。
• 非严格模式下：仅规定 class、const、enums、export、extends、import、super 为保留字，其他 ECMAScript 3 保留字可以自由使用。

      除此之外，JavaScript 还预定义了很多全局变量和函数，我们在定义名字时也应该尽量的避免使用它们，以免重复定义命名导致程序报错！常见的全局变量和函数如下表所示：

arguments	decodeURLComponent	EvalError	Math	parseInt	SyntaxError
Array	encodeURL	Function	Infinity	NaN	RangeError
Boolean	encodeURLComponent	isFinite	Number	ReferenceError	TypeError
Date	Error	isNaN	Object	RegExp	undefined
decodeURL	eval	JSON	parseFloat	String	URLError

4、区分大小写

      在JavaScript中是严格区分大小写的，这个要注意一下。比如在一下大型项目或者项目参与成员比较多的情况下，就容易出现命名混乱的问题，前期如果没有命名规范这种意识，后期项目维护就会增加太大的难度。项目开发过程中制定相应的代码规范是非常有必要的，随着社区不断发展，协定了命名包含以下几种规范：

• 下划线命名：user_name
• 中划线命名：user-name
• 小驼峰命名：userName
• 大驼峰命名：UserName

      在比较复杂的逻辑处理中也应该保持写注释的习惯，虽然我们不推荐一段代码承担着复杂的处理逻辑，但是写注释绝对是没有错的，它会大大增加代码“可阅读性”，这对代码维护是非常有用的。

5、直接量

      字面量（Literal）也叫直接量，就是具体的值，即能够直接参与运算或显示的值，如字符串、数值、布尔值、正则表达式、对象直接量、数组直接量、函数直接量等。
      下面示例分别定义不同类型的直接量：字符串、数值、布尔值、正则表达式、特殊值、对象、数组和函数。

  //空字符串直接量
  1  //数值直接量
  true  //布尔值直接量
  /a/g  //正则表达式直接量
  null  //特殊值直接量
  {}  //空对象直接量
  []  //空数组直接量
  function(){}  //空函数直接量，也就是函数表达式

二、JavaScript数据类型

      数据类型指的是可以在程序中存储和操作的值的类型，每种编程语言都有其支持的数据类型，不同的数据类型用来存储不同的数据，例如文本、数值、图像等。JavaScript 中的数据类型可以分为两种类型：

• 基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；
• 引用数据类型：对象（Object）、数组（Array）、函数（Function）。

提示：JavaScript数据基本类型总结在上篇聊聊原生js的那些事[JavaScript数据类型]中有说明，这里不再重复赘述了。

三、JavaScript运算符

      运算符是用来告诉 JavaScript 引擎执行某种操作的符号，例如加号（+）表示执行加法运算，减号（-）表示执行减法运算等，本节我们就来复习一下 JavaScript 中不同的运算符。

1、算术运算符

      算数运算符用来执行常见的数学运算，例如加法、减法、乘法、除法等。

运算符	说明	示例
+	加法运算符	x + y 表示计算 x 加 y 的和
-	减法运算符	x - y 表示计算 x 减 y 的差
*	乘法运算符	x * y 表示计算 x 乘 y 的积
/	除法运算符	x / y 表示计算 x 除以 y 的商
%	取余运算符	x % y 表示计算 x 除以 y 的余数

示例代码如下：

  var x = 7,
    y = 2;
  console.log("x + y =", x + y);  // x + y = 9
  console.log("x - y =", x - y);  // x - y = 5
  console.log("x * y =", x * y);  // x * y = 14
  console.log("x / y =", x / y);  // x / y = 3.5
  console.log("x % y =", x % y);  // x % y = 1

2、赋值运算符

运算符	说明	示例
=	最简单的赋值运算符，将运算符右侧的值赋值给运算符左侧的变量	x = 1 表示将变量 x 赋值为 1
+=	先进行加法运算，再将结果赋值给运算符左侧的变量	x += y 等同于 x = x + y
-=	先进行减法运算，再将结果赋值给运算符左侧的变量	x -= y 等同于 x = x - y
*=	先进行乘法运算，再将结果赋值给运算符左侧的变量	x *= y 等同于 x = x * y
/=	先进除乘法运算，再将结果赋值给运算符左侧的变量	x /= y 等同于 x = x / y
%=	先进行取余运算，再将结果赋值给运算符左侧的变量	x %= y 等同于 x = x % y

3、字符串运算符

      JavaScript 中的+和+=运算符除了可以进行数学运算外，还可以用来拼接字符串，其中：

• +运算符表示将运算符左右两侧的字符串拼接到一起；
• +=运算符表示先将字符串进行拼接，然后再将结果赋值给运算符左侧的变量

  var x = "Hello ";
  var y = "World!";
  var z = x + y;
  console.log(z);  // Hello World!
  x += y;
  console.log(x);  // Hello World!

4、自增、自减运算符

      自增、自减运算符用来对变量的值进行自增（+1）、自减（-1）操作。

运算符	名称	说明
++x	自增运算符	将 x 加 1，然后返回 x 的值
x++	自增运算符	返回 x 的值，然后再将 x 加 1
--x	自减运算符	将 x 减 1，然后返回 x 的值
x--	自减运算符	返回 x 的值，然后将 x 减 1

  // ++x
  var x = 5;
  console.log(++x); // 6
  console.log(x); // 6
  // x++
  x = 5;
  console.log(x++); // 5
  console.log(x); // 6
  // --x
  x = 5;
  console.log(--x); // 4
  console.log(x); // 4
  x = 5;
  console.log(x--); // 5
  console.log(x); // 4

5、比较运算符

      比较运算符用来比较运算符左右两侧的表达式，比较运算符的运算结果是一个布尔值，结果只有两种，不是 true 就是 false。

运算符	名称	示例说明
==	等于	x == y 表示如果 x 等于 y，则为真
===	全等	x === y 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真
!=	不相等	x != y 表示如果 x 不等于 y，则为真
!==	不全等	x !== y 表示如果 x 不等于 y，或者 x 和 y 的类型不同，则为真
<	小于	x < y 表示如果 x 小于 y，则为真
>	大于	x > y 表示如果 x 大于 y，则为真
>=	大于或等于	x >= y 表示如果 x 大于或等于 y，则为真
<=	小于或等于	x <= y 表示如果 x 小于或等于 y，则为真

  var x=10,y=20,z="20";
  console.log(y==z); // true
  console.log(y===z); // false
  console.log(y!=z); // false
  console.log(y!==z); // true
  console.log(x<y); // true
  console.log(y>x); // true
  console.log(x<z); // true
  console.log(y>=x); // true
  console.log(x<=z); // true

6、逻辑运算符

      逻辑运算符通常用来组合多个表达式，逻辑运算符的运算结果是一个布尔值，只能有两种结果，不是 true 就是 false。

运算符	名称	示例
&&	逻辑与	x && y 表示如果 x 和 y 都为真，则为真
||	逻辑或	x || y 表示如果 x 或 y 有一个为真，则为真
!	逻辑非	!x 表示如果 x 不为真，则为真

  var year = 2022;
  // 闰年可以被 400 整除，但可以被 4 整除的同时不能被 100 整除
  if((year%4 == 0 && year%100 != 0)||(year%400 == 0)){
    console.log(year + " 年是闰年。");
  } else{
    console.log(year + " 年是平年。");
  }

7、三元运算符

      三元运算符（也被称为条件运算符），由一个问号和一个冒号组成，语法格式：条件表达式 ? 表达式1 : 表达式2 。语法格式说明：如果“条件表达式”的结果为真（true），则执行“表达式1”中的代码，否则就执行“表达式2”中的代码。

  var x=10,y=20;
  x<y?console.log('x小于y'):console.log('x大于y'); // x小于y

提示：本文摘抄自JavaScript基础教程