新的ECMA代码执行描述
◼ 在执行学习JavaScript代码执行过程中，我们学习了很多ECMA文档的术语：
执行上下文栈：Execution Context Stack，用于执行上下文的栈结构；
执行上下文：Execution Context，代码在执行之前会先创建对应的执行上下文；
变量对象：Variable Object，上下文关联的VO对象，用于记录函数和变量声明；
全局对象：Global Object，全局执行上下文关联的VO对象；
激活对象：Activation Object，函数执行上下文关联的VO对象；
作用域链：scope chain，作用域链，用于关联指向上下文的变量查找；
◼ 在新的ECMA代码执行描述中（ES5以及之上），对于代码的执行流程描述改成了另外的一些词汇：
基本思路是相同的，只是对于一些词汇的描述发生了改变；
执行上下文栈和执行上下文也是相同的；
词法环境（Lexical Environments）
◼词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符；
一个词法环境是由环境记录（Environment Record）和一个外部词法环境（oute;rLexical Environment）组成；
一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词法环境被创建出来；
◼ 也就是在ES5之后，执行一个代码，通常会关联对应的词法环境；
那么执行上下文会关联哪些词法环境呢？
1.词法环境组件LexicalEnvironment
2.变量词法环境组件VariableEnvironment
LexicalEnvironment和VariableEnvironment
◼ LexicalEnvironment用于处理let、const声明的标识符：
◼ VariableEnvironment用于处理var和function声明的标识符：
环境记录（Environment Record）
◼ 在这个规范中有两种主要的环境记录值:声明式环境记录和对象环境记录。
声明式环境记录：声明性环境记录用于定义ECMAScript语言语法元素的效果，如函数声明、变量声明和直接将标识符绑定与ECMAScript语言值关联起来的Catch子句。
对象式环境记录：对象环境记录用于定义ECMAScript元素的效果，例如WithStatement，它将标识符绑定与某些对象的属性关联起来。
let/const基本使用
◼ 在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const
let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；
但是let、const确确实实给JavaScript带来一些不一样的东西；
◼ let关键字：
从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量；
◼ const关键字：
const关键字是constant的单词的缩写，表示常量、衡量的意思；
它表示保存的数据一旦被赋值，就不能被修改；
但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；
◼ 注意：
另外let、const不允许重复声明变量；
案例:
<script>
// var 变量可以重复声明
var message = "111"
var message = "222"
// let 和const不允许变量重复声明
let address = "天津"
// let address = "北京" // Uncaught SyntaxError: Identifier 'address' has already been declared(不允许重复声明)
// const
const age = 21
// const age = 25//Uncaught SyntaxError: Identifier 'age' has already been declared
</script>
let/const作用域提升
◼ let、const和var的另一个重要区别是作用域提升：
我们知道var声明的变量是会进行作用域提升的；
但是如果我们使用let声明的变量，在声明之前访问会报错；
console.log(foo) // Uncaught ReferenceError: Cannot access 'info' before initialization(不能再声明之前使用)
let foo = "foo"
◼ 那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？
事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；
这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值；
let/const有没有作用域提升呢？
◼ 从上面我们可以看出，在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的。
那么变量已经有了，但是不能被访问，是不是一种作用域的提升呢？
◼ 事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解；
作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；
在这里，它虽然被创建出来了，但是不能被访问，我认为不能称之为作用域提升；
◼ 所以我的观点是let、const没有进行作用域提升，但是会在解析阶段被创建出来。
暂时性死区(TDZ)
◼ 我们知道，在let、const定义的标识符真正执行到声明的代码之前，是不能被访问的
从块作用域的顶部一直到变量声明完成之前，这个变量处在暂时性死区（TDZ，temporal dead zone）
◼ 使用术语 “temporal” 是因为区域取决于执行顺序（时间），而不是编写代码的位置；
function foo(){
console.log(bar,baz)// 暂时性死区
console.log("hello")// 暂时性死区
console.log("你好")// 暂时性死区
let bar = "bar"
let baz = "baz"
}
//2. 暂时性死区和定义的位置没有关系,和代码的执行顺序有关
function foo1(){
console.log(message)
}
let message = "hello world"
foo1()
console.log(message)
// 3.暂时性死区形成后,在该区域这个标识符不能访问
let message1 = "hello world"
function foo(){
console.log(message1)
let message1 = "哈哈哈哈哈"
}
foo() // Uncaught ReferenceError: Cannot access 'message1' before initialization
Window对象添加属性
◼ 我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：
但是let、const是不会给window上添加任何属性的。
◼ 那么我们可能会想这个变量是保存在哪里呢？
全局的环境记录 从逻辑上来说是一个简单的记录 但是他是被作为合成对象环境记录和声明环境记录
var的块级作用域
◼ 在我们前面的学习中，JavaScript只会形成两个作用域：全局作用域和函数作用域。
◼ ES5中放到一个代码中定义的变量，外面是可以访问的：
// 代码块
{
var message ="hello World"
}
console.log(message)
let/const的块级作用域
◼ 在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：
◼ 但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：
这是因为引擎会对函数的声明进行特殊的处理，允许像var那样在外界直接访问；
// ES6开始 let const声明的变量是有块级作用域的
{
let foo = "foo"
function bar(){
console.log("bar")
}
class Person{
}
}
console.log(foo) // Uncaught ReferenceError: foo is not defined
bar() // bar
const p = new Person() //Uncaught ReferenceError: Person is not defined
// 块级作用域的应用
// 2.监听按钮的点击
const btnEls = document.querySelectorAll("button")
for(let i = 0 ; i<btnEls.length;i++){
const btnEl = btnEls[i]
btnEl.onclick = function(){
console.log(i)
}
}
var、let、const的选择
◼ 那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？
◼ 对于var的使用：
我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；
其实是JavaScript在设计之初的一种语言缺陷；
当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；
但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；
◼ 对于let、const：
对于let和const来说，是目前开发中推荐使用的；
我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；
字符串模板基本使用
◼ 在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。
◼ ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：
首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；
其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；
// ES6 模板字符串
const ifno = `my name is ${name},age is ${age}`
console.log(ifno)
function foo(){
return "function is foo"
}
console.log(`function : ${foo()}`)
标签模板字符串使用
◼ 模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。
◼ 我们一起来看一个普通的JavaScript的函数：
function bar(...args){
console.log("参数:",args) // (3) ['hdc', 21, 1.88]
}
bar("hdc",21,1.88)
◼ 如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：
模板字符串被拆分了；
第一个元素是数组，是被模块字符串拆分的字符串组合；
后面的元素是一个个模块字符串传入的内容；
// 标签模板字符串的用法
function bar(...args){
console.log("参数:",args) // (3) ['hdc', 21, 1.88]
}
bar("hdc",21,1.88)
bar`my name is${name},my age is${age},height is ${1.88}` //[Array(4), 'hdc', 18, 1.88]
函数的默认参数
◼ 在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：
传入了参数，那么使用传入的参数；
没有传入参数，那么使用一个默认值；
◼ 而在ES6中，我们允许给函数一个默认值：
<script>
// 默认参数不会对null对判断
function foo(arg1 ="我是默认值",arg2="我也是默认值"){
// 默认值写法一:
// arg1 = arg1?arg1:"我是默认值"
// 默认值写法二:
// arg1 = arg1 || "我是默认值"
// 默认值写法三:(严谨)
// 三元运算符
// arg1 = (arg1 === undefined || arg1 === null)?"我是默认值":arg1
// 默认值写法四(严谨)
//ES6新增语法:
// arg1 = arg1 ?? "我是默认值"
console.log(arg1,arg2)
}
foo(123,321)
foo()//我是默认值 我也是默认值
foo(0)//我是默认值 我也是默认值
foo("")//我是默认值 我也是默认值
foo(false)//我是默认值 我也是默认值
</script>
函数默认值的补充
◼ 默认值也可以和解构一起来使用：
<script>
const obj = {name:"hdc"}
const {name ="kobe",age=18} = obj
//函数的默认值是对象
// function foo(obj={name:"hdc",age:21}){
// console.log(obj)
// }
// function foo({name,age}={name:"hdc",age:21}){
// console.log(name,age)
// }
function foo({name="hdc",age=21}={}){
console.log(name,age)
}
foo()
</script>
◼ 另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）：
但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；
◼ 另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了。
// 注意一: 1.给默认参数的最好放到后面
// 注意二:有默认参数的形参,是不会计算在length之内的,并且后面的所有参数都不会计算在length之内
// 注意三:剩余参数放在最后(两个都有将默认参数放在剩余参数之前)
function foo(age,name="hdc",...args){
console.log(name,age,args)
}
foo(18,"hhh","ddd","ccc")
函数箭头函数的补充
◼ 在前面我们已经学习了箭头函数的用法，这里进行一些补充：
箭头函数是没有显式原型prototype的，所以不能作为构造函数，使用new来创建对象；
箭头函数也不绑定this、arguments、super参数；
案例:
<script>
function foo(){}
console.log(foo.prototype)
console.log(foo.__proto__)
//2. 箭头函数没有显式原型
// ES6 创建构造函数要使用class定义
var bar = ()=>{}
console.log(bar.__proto__)
console.log(bar.__proto__ === Function.prototype)//true
// 没有显式原型
console.log(bar.prototype) // undefined
// var b = new bar() // bar is not a constructor
</script>
展开语法
◼ 展开语法(Spread syntax)：
可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；
还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；
◼ 展开语法的场景：
在函数调用时使用；
在数组构造时使用；
在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；
◼ 注意：展开运算符其实是一种浅拷贝；
<script>
// 1.基本演练
const names = ["abc","nba","bbba"]
const newNames = [...names,"hhh"]
const str = "Hello"
function foo (name1,name2,...args) {
console.log(name1,name2,args)
}
foo(...names)// abc nba ['bbba']
foo(...str) // H e (3) ['l', 'l', 'o']
// ES9
const obj = {
name : "hdc",
age:18
}
// 不可以这么使用
// foo(...obj)// 在函数调用时,用展开运算符,将对应的展开数据进行迭代
// 可迭代:数组/字符串/arguments
// 对象默认不是可迭代的
const info= {
...obj,
height:1.88,
address:"天津市"
}
</script>
引用赋值-浅拷贝-深拷贝
<script>
const obj = {
name:"hdc",
age:18,
height:1.88,
friend:{
name:"curry"
}
}
// 引用赋值:两个不管是哪个更改另一个都会更改
const info1 = obj
// 浅拷贝:更改info2里的内容obj不会改变
const info2 = {
...obj
}
info2.name="kobe"
console.log(obj.name) // hdc
console.log(info2.name) // kobe
// 浅拷贝:对象里面还有一个对象是不会拷贝的
info2.friend.name = "jams"
console.log(obj.friend.name)// jams
// 深拷贝
// 方式一:借助第三方库
// 方式二:自己实现深拷贝
// 方式三:利用现有的JS机制实现深拷贝
const info3 = JSON.parse(JSON.stringify(obj))
</script>
数值的表示
◼ 在ES6中规范了二进制和八进制的写法：
// 1. 进制
console.log(100)
console.log(0b100)// 二进制
console.log(0o100)//八进制
console.log(0x100)//十六进制
◼ 另外在ES2021新增特性：数字过长时，可以使用_作为连接符
const num1 = 100_000_000
Symbol的基本使用
◼ Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。
◼ 那么为什么需要Symbol呢？
在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；
比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性；
比如我们前面在讲apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢？
比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；
◼ Symbol就是为了解决上面的问题，用来生成一个独一无二的值。
Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；
也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；
◼ Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；
◼ 我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；
案例:
<script>
// ES6 之前
// const obj = {
// name :"hdc"
// }
// 添加一个新的属性 name
const s1 = Symbol()
const obj = {
[s1]:"aaa"
}
function foo(obj){
const sKey = Symbol()
console.log(sKey)
obj[sKey] = function(){}
delete obj[sKey]
}
foo(obj)
console.log(obj)//{Symbol(): 'aaa'}
</script>
Symbol作为属性名
const s1 = Symbol()//aaa
const s2 = Symbol()//bbb
//1.加入对象中
const obj = {
[s1]:"aaa",
[s2]:"bbb"
};
const obj1 = {}
obj1[s1] = "aaa"
obj1[s2] = "bbb"
const obj2 = {}
Object.defineProperty(obj2,s1,{
value : "aaa"
})
// 2.获取Symbol对应的key
console.log(Object.keys(obj))// 获取不到Symbol的key
console.log(Object.getOwnPropertySymbols(obj))//(2) [Symbol(), Symbol()]
const SymbolKeys = Object.getOwnPropertySymbols(obj)
for (const key of SymbolKeys) {
console.log(obj[key])
}
相同值的Symbol
// description 描述
//Symbol函数直接生成的值都是独一无二的
const s3 = Symbol("ccc")
console.log(s3.description)// ccc
const s4 = Symbol(s3.description)
console.log(s3 === s4) // false
// Symbol.for如果相同的key,通过Symbol.for可以生成相同的Symbol值
const s5 = Symbol.for(s3.
)
console.log(s5 === s3) // false
const s6 = Symbol.for(s3.description)
console.log(s5 === s6) // true
// 获取传入的key
console.log(Symbol.keyFor(s5))//ccc
Set的基本使用
◼ 在ES6之前，我们存储数据的结构主要有两种：数组、对象。
在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。
◼ Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：
◼ 我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。
// 以前
<script>
// 数组
// 字面量方式
const arr = []
// Set 数据结构
// 构造函数
const setArr = new Set()
console.log(setArr)
// 添加元素
setArr.add(10)
setArr.add(20)
setArr.add(22)
setArr.add(23)
setArr.add(20)
setArr.add(20)
console.log(setArr)// Set(4) {10, 20, 22, 23}
const info = {}
const obj = {}
setArr.add(info)
setArr.add(obj)
setArr.add(info)
setArr.add(info)
console.log(setArr)// Set(6) {10, 20, 22, 23, {…}, …}
// 应用场景:数组的去重
const names = ["abc","aaa","bbb","ccc","nba","aaa"]
// 普通去重
const newArr = []
for(const item of names){
// console.log(newArr.includes(item))// false
if(!newArr.includes(item)){
newArr.push(item)
}
}
console.log(newArr)//(5) ['abc', 'aaa', 'bbb', 'ccc', 'nba']
// Set去重
const newNames =Array.from( new Set(names))
console.log(newNames)
</script>
Set的常见方法
◼ Set常见的属性：
size：返回Set中元素的个数；
console.log(set.size)
◼ Set常用的方法：
add(value)：添加某个元素，返回Set对象本身；
delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
has(value)：判断set中是否存在某个元素，返回boolean类型；
clear()：清空set中所有的元素，没有返回值；
forEach(callback, [, thisArg])：通过forEach遍历set；
◼ 另外Set是支持for of的遍历的
// Set的方法
console.log(setArr.size)//6
// Set的属性
setArr.add(20)// 添加
setArr.delete(20)//删除
console.log(setArr)
if(setArr.has(20)){ // 没有20 返回布尔类型
console.log("有20")
}
else{
console.log("没有20")
}
// setArr.clear()
// console.log(setArr)//没有20
setArr.forEach(item => console.log(item))
for (const item of setArr) {
console.log(item)
}
WeakSet使用
◼ 和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
◼ 那么和Set有什么区别呢？
区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；
◼ WeakSet常见的方法：
add(value)：添加某个元素，返回WeakSet对象本身；
delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；
<script>
// 强引用 和 弱引用
let obj1 = {name:"hdc"}
let obj2 = {name:"kobe"}
let obj3 = {name:"james"}
// 强引用
let arr = [obj1,obj2,obj3]
obj1 = null
obj2 = null
obj3 = null
const set = new Set(arr)
arr = null
// 2.weakSet的用法
// 2.1 weakSet和Set 的区别一:只能存放对象类型
var WeakSet = new WeakSet()
WeakSet.add(obj1)
WeakSet.add(obj2)
WeakSet.add(obj3)
//2.2weakSet和Set 的区别二:对对象的引用的弱引用
// 弱引用垃圾回收器会认为他不存在
</script>
WeakSet的应用
◼ 注意：WeakSet不能遍历
因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
所以存储到WeakSet中的对象是没办法获取的；
◼ 那么这个东西有什么用呢？
事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；
// 3.WeakSet的应用
const pWeakSet = new WeakSet()
class Person{
constructor(){
pWeakSet.add(this)
}
running(){
if(!pWeakSet.has(this)){
console.log("当前类型是错误的")
return
}
console.log("running")
}
}
const p = new Person()
p.running()
const runFn = p.running
runFn()
const obj = {run:runFn}
obj.run()
Map的基本使用
◼ 另外一个新增的数据结构是Map，用于存储映射关系。
◼ 但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？
事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；
◼ 那么我们就可以使用Map：
const info = {name:"hdc"}
const info2 = {age:18}
// 1.对象类型的局限性:不可以使用复杂类型当作key
const obj = {
address:"天津市",
[info]:"哈哈哈哈哈",
[info2]:"呵呵呵呵" //{address: '天津市', [object Object]: '呵呵呵呵'}
}
console.log(obj)
// 2.Map映射类型
const map = new Map()
map.set(info,"aaaa")
map.set(info2,"bbbb")
console.log(map) //Map(2) {{…} => 'aaaa', {…} => 'bbbb'}
Map的常用方法
◼ Map常见的属性：
size：返回Map中元素的个数；
◼ Map常见的方法：
set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；
clear()：清空所有的元素；
forEach(callback, [, thisArg])：通过forEach遍历Map；
◼ Map也可以通过for of进行遍历。
案例:
// 3.Map常见属性和方法
console.log(map.size)//2
//3.1 set方法:设置内容
map.set(info,"ccccc")
console.log(map)
// 3.2 get方法:获取内容
console.log(map.get(info))//ccccc
// 3.3 delete 删除
map.delete(info)
console.log(map)
//3.4 has方法:查找
console.log(map.has(info2))
// 3.5 clear方法,清空内容
// map.clear()
// console.log(map)
// 3.5 forEach方法
map.forEach(item=>console.log(item)) // 获取的value
// 3.4 for of
for (const item of map) {
// console.log(item)
const [key,value] = item
console.log(key,value)
}
WeakMap的使用
◼ 和Map类型的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。
◼ 那么和Map有什么区别呢？
const weakMap = new WeakMap()
// weakMap.set(111,222) // Invalid value used as weak map key
// weakMap.set("aaaa",2222) // Invalid value used as weak map key
区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；
◼ WeakMap常见的方法有四个：
set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；
WeakMap的应用
◼ 注意：WeakMap也是不能遍历的
没有forEach方法，也不支持通过for of的方式进行遍历；
◼ 那么我们的WeakMap有什么作用呢？（后续专门讲解）
