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基础教程
