回顾 JavaScript

回顾 JavaScript

阅读前建议了解 ECMAScript 是什么？

• 不然你可能会疑惑下面内容 JavaScript 中掺杂的 ECMAScript
• 需要大体了解过 JavaScript
• 主要是对 JavaScript 复习，温故而知新

JavaScript 的词法

ECMAScript 源码文本会被从左到右扫描

• 并被转换为一系列的输入元素，包括

  • token：词法分析器识别过程中需要 标记 (tokens) 以便解析源码文本
  • 控制符：格式控制符用于控制对源码文本的解释
  • 行终止符：除了空白符之外，行终止符也可以提高源码的可读性，
  • 注释：注释用来在源码中增加提示、笔记、建议、警告等信息，可以帮助阅读和理解源码
  • 空白符：空白符提升了源码的可读性，并将标记区分开

• ECMAScript 定义了一些关键字、字面量、行尾分号补全的规则

自 ECMAScript 1~3 版本标准关键字：abstract, boolean, byte, char, double, final, float, goto, int, long, native, short, synchronized, transient, volatile, null, true, false

ECMAScript 4~6 中的保留关键字

• 变量操作：var, const, typeof, void

• 流程控制：

  • 分支结构：(if, else), (switch, case, default)
  • 循环结构：(for), (while, do)
  • 错误处理：(try, catch, finally), (throw)
  • 跳出：break, continue

• 方法：function, return, instanceof, yield

• 面向对象编程：class, new, delete,this, in, extends, super

• 作用域链：with

• 包及模块管理：import, export

• 调试：debugger

未来保留关键字，相对 ECMAScript 6 的未来，其实 ECMAScript 2022，第13版 及以后已全部实现（除 enum）

• 这些关键字在严格模式和非严格模式中均不能使用：enum
• 只在严格模式中被当成保留关键字；implements, interface, let, package, private, protected, public, static
• 以下关键字只在模块代码中被当成保留关键字：await

字面量分类

• 空字面量

• 布尔字面量

• 数值字面量

• 对象字面量

  • 数组字面量
  • 字符串字面量
  • 正则表达式字面量
  • 模板字面量

ECMAScript 规格提到自动分号补全的三个规则

• 当出现一个 不允许的行终止符 或 } 时，会在其之前插入一个分号
• 当捕获到标识符输入流的结尾，并且无法将单个输入流转换为一个完整的程序时，将在结尾插入一个分号
• 当语句中包含语法中的限制产品后跟一个行终止符的时候，将会在结尾插入一个分号

注意：

• 行终止符可以影响 JavaScript 代码的执行
• 行终止符也会影响自动分号补全的执行
• 在正则表达式中，行终止符会被 \s 匹配

表达式与运算符

表达式

• JavaScript 中的基本关键字和常用表达式：

  • 类：this, class
  • 方法：function, function, yield, yield
  • 异步方法：async function, async function*, await
  • 字面值：[], {}, /RegExp/i
  • 分组操作符：()

• 左表达式（左边的值是赋值的目标）

  • 属性访问符，提供了对对象的属性或方法的访问，比如 object.property, object["property"]
  • new, new.target
  • super
  • ... 展开运算符允许在需要多个参数（用于函数调用）或多个元素（用于数组字面量）的地方展开表达式，比如 ...obj
  • import.meta 向 JavaScript 模块暴露特定上下文的元数据属性的对象

• 自增和自减: ++A, --A, A++, A--

• 一元运算符（只有一个操作数）

  • 对象：delete, typeof
  • +, -, ~, !

• 算术运算符：+, -, *, /, %, **

• 关系运算符：in, instanceof, <, >, <=, >=

• 相等运算符：==, !=, =, !

• 位移运算符：<<, >>, >>>

• 二进制运算符：&, |, ^

• 二元逻辑运算符：&&, ||, ??

• 可选链运算符：?.

• 条件（三元）运算符：(condition ? ifTrue : ifFalse)

• 赋值运算符：=, *=, -=, +=, /=, %=, **=, <<=, >>=, >>>=, ^=, &=, |=, &&=, ||=, ??=, [a, b] = arr, { a, b } = obj

• 逗号运算符：,

JavaScript 数据类型和数据结构

编程语言都有内置的数据结构，但这些通常因一种语言而异

JavaScript 是一种具有动态类型的动态语言，JavaScript 也是一种弱类型语言，这意味着当操作涉及不匹配的类型时它允许隐式类型转换，而不是抛出类型错误

• 原始值

  所有类型（除了 Object 之外）都定义了直接在语言的最低级别表示的不可变值

  • 所有原始类型都可以使用 typeof 运算符测试（除了 null）
  • 所有原始类型（除了 null 和 undefined）都有它们相应的对象包装类型，这为处理原始值提供可用的方法

• 数据结构分类

  • Null 类型：null
  • Undefined 类型：undefined
  • Boolean 类型：true, false
  • Number 类型：基于 IEEE 754 标准的双精度 64 位二进制格式的值，NaN 是一个特殊种类的数值
  • BigInt 类型：在 Javascript 中是一个数字的原始值，它可以表示任意大小的整数
  • String 类型：表示文本数据并编码为 UTF-16 代码单位的 16 位无符号整数值序列
  • Symbol 类型：是唯一不可变的原始值并且可以用来作为对象属性的键

注意：

• 从概念上讲，undefined 表示没有任何值，null 表示没有任何对象
• null 是一个关键字，但是 undefined 是一个普通的标识符，恰好是一个全局属性
• BigInt 值并不总是更精确的，也不总是比 number 精确，因为 BigInt 不能表示分数，但是可以表示更准确的大整数
• JavaScript 字符串是不可变的，这意味着一旦字符串被创建，就不可能修改它

对象 (object)

• 在 JavaScript 中，对象是唯一可变的值，事实上函数也是具有额外可调用能力的对象

• 在 JavaScript 中，对象可以被看作是一组属性的集合

  • 数据属性：将键与值相关联
  • 访问器属性：将键与两个访问器函数像关联

• 常用对象

  • Date
  • Map, Set, WeakMap, WeakSet
  • JSON

强制类型转换

• 在期望原始值的地方使用原始强制过程，但对实际类型应该是什么没有强烈的偏好
• 如果值已经是原始值，则此操作不会进行任何转换
• 所有的数据类型，除了 Null, Undefined, Symbol，都有它们各自的强制过程

CLASS

类是用于创建对象的模板，他们用代码封装数据以处理该数据

实际上，类是“特殊的函数”，就像你能够定义的函数声明和函数表达式

• 类声明：要声明一个类，你可以使用带有 class 关键字的类名
• 类表达式：是定义类的另一种方法，类表达式可以命名或不命名
• 使用 extends 扩展子类
• 使用 super 调用超类

注意：

• 函数声明和类声明之间的一个重要区别在于，函数声明会提升，类声明不会
• 类体内部的代码总是在严格模式下执行