Mr笔记

Appearance

S03-10 JS-高级-ES6-基础语法 ​

[TOC]

ECMA新描述概念 ​

新的ECMA代码执行描述 ​

在执行学习JavaScript代码执行过程中，我们学习了很多ECMA文档的术语：

  • 执行上下文栈：Execution Context Stack，用于执行上下文的栈结构；

  • 执行上下文：Execution Context，代码在执行之前会先创建对应的执行上下文；

  • 变量对象：Variable Object，上下文关联的VO对象，用于记录函数和变量声明；

  • 全局对象：Global Object，全局执行上下文关联的VO对象；

  • 激活对象：Activation Object，函数执行上下文关联的VO对象；

  • 作用域链：scope chain，作用域链，用于关联指向上下文的变量查找；

在新的ECMA代码执行描述中（ES5以及之上），对于代码的执行流程描述改成了另外的一些词汇：

  • 基本思路是相同的，只是对于一些词汇的描述发生了改变；

  • 执行上下文栈和执行上下文也是相同的；

新ECMA中代码执行流程描述：

  • 词法环境：Lexical Environments
    • 环境记录：Environment Record
      • 声明式环境记录：declarative Environment Record
      • 对象式环境记录：object Environment Record。就是window
    • 外部词法环境：outer Lexical Environment
  • 变量环境：VariableEnvironment

词法环境（Lexical Environments） ​

词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符；

  • 一个词法环境是由环境记录（Environment Record）和一个外部词法环境（outer Lexical Environment）组成；

  • 一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词法环境被创建出来；

image-20230620140346535

也就是在ES5之后，执行一个代码，通常会关联对应的词法环境；

  • 那么执行上下文会关联哪些词法环境呢？

image-20230620140355292

LexicalEnvironment和VariableEnvironment ​

LexicalEnvironment用于处理let、const声明的标识符：

image-20230620140403464

VariableEnvironment用于处理var和function声明的标识符：

image-20230620140410456

环境记录（Environment Record） ​

在这个规范中有两种主要的环境记录值:声明式环境记录和对象环境记录。

  • 声明式环境记录：声明性环境记录用于定义ECMAScript语言语法元素的效果，如函数声明、变量声明和直接将标识符绑定与ECMAScript语言值关联起来的Catch子句。

  • 对象式环境记录：对象环境记录用于定义ECMAScript元素的效果，例如WithStatement，它将标识符绑定与某些对象的属性关联起来（不怎么使用）。

image-20230620140426996

新ECMA描述内存图 ​

image-20230620140449214

ECMA2025规范 ​

关于JS的代码执行过程的内存描述，在ES2025规范中又发生了变化。

image-20250424181101637

image-20250425112555738

image-20250425112659292

image-20250425113205773

ECMA2025内存图：

image-20250425113523994

image-20250425113352816

let、const ​

let/const基本使用 ​

在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const

  • let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；

  • 但是let、const确确实实给JavaScript带来一些不一样的东西；

let关键字：

  • 从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量；

const关键字：

  • const关键字是constant的单词的缩写，表示常量、衡量的意思；

  • 它表示保存的数据一旦被赋值，就不能被修改；

  • 但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；

注意：

  • 另外let、const不允许重复声明变量；

示例： 基本使用

image-20230731173801029

image-20230731174113795

示例： 如果赋值的是引用类型，可以修改引用对象内部的内容

image-20230731174110669

示例： let、const不允许重复声明变量

image-20230731174304072

image-20230731174336570

image-20230731174349326

面试：let/const有作用域提升吗？ ​

let、const和var的另一个重要区别是作用域提升：

  • 我们知道var声明的变量是会进行作用域提升的；

image-20230731175424523

  • 但是如果我们使用let声明的变量，在声明之前访问会报错；

image-20230620140517614

那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？

  • 事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；

  • 这些变量会被创建在包含他们的词法环境被实例化时，但是此时是不可以访问它们的，直到词法绑定被求值；

image-20230620140526460

暂时性死区 (TDZ) ​

我们知道，在let、const定义的标识符真正执行到声明的代码之前，是不能被访问的

  • 从块作用域的顶部一直到变量声明完成之前，这个变量处在暂时性死区（TDZ，temporal dead zone）

image-20230620140601588

使用术语 “temporal” 是因为区域取决于执行顺序（时间），而不是编写代码的位置；

image-20230620140609087

image-20230731181516827

let/const有没有作用域提升呢？ ​

从上面我们可以看出，在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的。

  • 那么变量已经有了，但是不能被访问，是不是一种作用域的提升呢？

事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解；

  • 作用域提升： 在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；

  • 在这里，它虽然被创建出来了，但是不能被访问，我认为不能称之为作用域提升；

所以我的观点是let、const没有进行作用域提升，但是会在解析阶段被创建出来。

Window对象添加属性 ​

我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：

  • 但是let、const是不会给window上添加任何属性的。

那么我们可能会想这个变量是保存在哪里呢？

image-20230620140638914

image-20230620140651543

示例：

image-20230731181819120

image-20230731181910056

image-20230801151945563

块级作用域 ​

var的块级作用域 ​

在我们前面ES5的学习中，JavaScript只会形成两个作用域：全局作用域和函数作用域。

image-20230620140709263

ES5中放到一个代码中定义的变量，外面是可以访问的：

image-20230620140717797

image-20230620140723100

let/const的块级作用域 ​

在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：

image-20230620140734813

image-20230620140741077

注意：但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：

  • 这是因为引擎会对函数的声明进行特殊的处理，允许像var一样在外界后面直接访问；

image-20230805113615840

块级作用域的应用 ​

我来看一个实际的案例：获取多个按钮监听点击

image-20230620140756688

使用let或者const来实现：

image-20230620140805650

image-20230801155811339

image-20230801160337912

var、let、const的选择 ​

那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？

对于var的使用：

  • 我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；

  • 其实是JavaScript在设计之初的一种语言缺陷；

  • 当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；

  • 但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；

对于let、const：

  • 对于let和const来说，是目前开发中推荐使用的；

  • 我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；

  • 只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；

  • 这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；

模板字符串 ​

模板字符串-基本使用 ​

在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。

ES6允许我们使用模板字符串来嵌入JS的变量或者表达式来进行拼接：

  • 首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；

  • 其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；

image-20230620140830016

标签模板字符串-基本使用 ​

模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。

我们一起来看一个普通的JavaScript的函数：

image-20230620140840692

如果我们使用标签模板字符串，并且在调用的时候插入其他的变量

  • 模板字符串被拆分了；

  • 第一个元素是数组，是被模块字符串拆分的字符串组合；

  • 后面的元素是一个个模块字符串传入的内容；

image-20230620140849852

应用： React的styled-components库

image-20230620140913229

ES6函数用法增强 ​

函数的默认参数 ​

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：

  • 传入了参数，那么使用传入的参数；

  • 没有传入参数，那么使用一个默认值；

而在ES6中，我们允许给函数一个默认值：

image-20230620140939802

严谨的默认值写法

image-20230620140949295

image-20230801163853570

image-20230801164003056

函数默认值的注意事项 ​

1、默认值也可以和解构一起来使用：

image-20230620140959371

2、另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）：

  • 但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；

3、另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了。

函数的剩余参数（已经学习） ​

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：

  • 如果最后一个参数是 ... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

image-20230620141020780

那么剩余参数和arguments有什么区别呢？

  • 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；

  • arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；

  • arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；

注意：剩余参数必须放到最后一个位置，否则会报错。

函数箭头函数的补充 ​

在前面我们已经学习了箭头函数的用法，这里进行一些补充：

  • 箭头函数是没有显式原型prototype的，所以不能作为构造函数，使用new来创建对象；

  • 箭头函数也不绑定this、arguments、super参数；

image-20230620141045296

image-20230620141055382

展开语法 ​

展开语法(Spread syntax)：

  • 可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；

  • 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；

展开语法的场景：

  • 在函数调用时使用；

  • 在数组构造时使用；

  • 在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；

注意：展开运算符其实是一种浅拷贝；

引用赋值、浅拷贝、深拷贝 ​

引用赋值

image-20230801170829431

浅拷贝

image-20230801171555868

image-20230801172036279

深拷贝

image-20230801172310404

数值的表示 ​

在ES6中规范了二进制和八进制的写法：

image-20230620141114276

另外在ES2021新增特性：数字过长时，可以使用_作为连接符

image-20230620141123640

ES7 ​

ES7 - includes ​

在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。

在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。

image-20230620141929773

image-20230620141935705

ES7 –指数运算符 ​

在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。

在ES7中，增加了 ** 运算符，可以对数字来计算乘方。

image-20230620141944425

ES8 ​

Object.values ​

之前我们可以通过 Object.keys 获取一个对象所有的key

在ES8中提供了 Object.values 来获取所有的value值：

image-20230620142004277

Object.entries ​

通过 Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。

  • 可以针对对象、数组、字符串进行操作；

image-20230620142018107

padStart,padEnd ​

某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的。

image-20230620142036208

应用： 对身份证、银行卡的前面位数进行隐藏：

image-20230620142043881

尾部逗号 ​

在ES8中，我们允许在函数定义和调用时多加一个逗号：

image-20230620142054104

Object Descriptors ​

Object.getOwnPropertyDescriptors

  • 这个在之前已经讲过了，这里不再重复。

Async Function：async、await

  • 后续讲完Promise讲解

ES9 ​

ES9新增知识点 ​

Async iterators：后续迭代器讲解

Object spread operators：前面讲过了

Promise finally：后续讲Promise讲解

ES10 ​

flat、flatMap ​

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

image-20230620142115812

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

  • 注意一：flatMap是先进行map操作，再做flat的操作；

  • 注意二：flatMap中的flat相当于深度为1；

image-20230620142128777

Object.fromEntries ​

在前面，我们可以通过 Object.entries 将一个对象转换成 entries

那么如果我们有一个entries了，如何将其转换成对象呢？

  • ES10提供了 Object.formEntries来完成转换：

image-20230620142143130

应用： 那么这个方法有什么应用场景呢？

image-20230620142152045

trimStart、trimEnd ​

去除一个字符串首尾的空格，我们可以通过trim方法，如果单独去除前面或者后面呢？

  • ES10中给我们提供了trimStart和trimEnd；

image-20230620142203139

ES10 其他知识点 ​

Symbol description：已经讲过了

Optional catch binding：后面讲解try cach讲解

ES11 ​

BigInt ​

在早期的JavaScript中，我们不能正确的表示过大的数字：

  • 大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。

image-20230620142215705

那么ES11中，引入了新的数据类型BigInt，用于表示大整数：

  • BigInt的表示方法是在数值的后面加上n

image-20230620142225411

空值合并运算符 ​

ES11，Nullish Coalescing Operator增加了空值合并运算符（??）：

当foo是undefined或null时，取默认值

image-20230620142240692

可选链 ​

可选链（?.）也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁：

语法

js
obj.val?.prop // 示例：obj.friend?.name
obj.val?.[expr] // 示例：obj.friends?.[0]
obj.func?.(args) // 示例：obj.friend?.running?.()

image-20230620142255889

globalThis ​

在之前我们希望获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的

  • 比如在浏览器中可以通过this、window来获取；

  • 比如在Node中我们需要通过global来获取；

在ES11中对获取全局对象进行了统一的规范：globalThis

image-20230620142305937

for..in标准化 ​

在ES11之前，虽然很多浏览器支持for...in来遍历对象类型，但是并没有被ECMA标准化。

在ES11中，对其进行了ECMA标准化，for...in是用于遍历对象的key的：

image-20230620142313183

ES11其他知识点 ​

Dynamic Import：后续ES Module模块化中讲解。

Promise.allSettled：后续讲Promise的时候讲解。

import meta：后续ES Module模块化中讲解。

ES12 ​

FinalizationRegistry ​

FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。

  • FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为 finalizer ）;

  • 你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值;

image-20230802162708737

WeakRef ​

如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：

image-20230802170538455

如果我们希望是一个弱引用的话，可以使用WeakRef；

image-20230802172309247

逻辑赋值运算符 ​

  • x &&= y：逻辑与赋值。仅在 x 为真值时为其赋值
  • x ||= y：逻辑或赋值。仅在 x 为假值时为其赋值
  • x ??= y：逻辑空赋值。仅在 x 为空值（null或undefined） 时为其赋值

image-20230620142351572

ES12其他知识点 ​

Numeric Separator：讲过了；

String.prototype.replaceAll：字符串替换；

image-20230802174404985

ES13 ​

at() ​

前面我们有学过字符串、数组的at方法，它们是作为ES13中的新特性加入的：

image-20230620142406494

Object.hasOwn() ​

Object中新增了一个静态方法（类方法）： Object.hasOwn(obj, propKey)

  • 该方法用于判断一个对象中是否有某个自己的属性；

Object.hasOwn和Object.prototype.hasOwnProperty的区别：

image-20230620142418626

  • 区别一：防止对象内部有重写hasOwnProperty

image-20230620142426742

  • 区别二：对于隐式原型指向null的对象， hasOwnProperty无法进行判断

image-20230620142435741

类中的新成员 ​

在ES13中，新增了定义class类中成员字段（field）的其他方式：

  • 实例属性：public / private
  • 类属性（静态属性）：public / private
  • 静态代码块：先执行静态代码块，再执行构造方法

image-20230802181744037