es6新特性
注意：
原生js获取event就直接用event就行
p6
解构赋值
1、数组解构赋值 --》 []
a = 1
b = 2
c = 3
a、只拿部分
3
b、多层解构
2
不适合太深层，对应关系就很难找
c、给默认值
1
d、快速交换值
2 1
2、对象解构赋值 --》 {}
换位还是
kerwin 100
a、只取部分
100
b、要取的属性和外面重名
11111111 200
c、深层解构
结果
注：
解构到哪一层，就只能用对应的变量访问，如上述例子，就访问不到list，只能访问x\y\z！
太深不适合，对应关系就很难找
3、函数解构赋值 --》 {}
结果
4、字符串解构
按照数组对待就行！
a、获取字符串长度
6
p7
字符串换行导致不是字符串了，可以加 \ 解决或者模版字符串
p8
字符串新增
1、includes 包含
2、startsWith 以什么开始
3、endsWith 以什么结束 - endsWith不包含该位置往前！
上述都可以接收第二个参数（查找位置，正数是最前开始数，负数是最后开始数）。
eg：
const str = "生存还是毁灭，这是一个问题。";
console.log(str.endsWith("问题。")); // true
console.log(str.endsWith("毁灭")); // false
console.log(str.endsWith("毁灭", 6)); // true
4、repeat --》 将一个字符串重复 --》 0就是空字符串，2就是现实两个
eg：
"abc".repeat(-1); // RangeError
"abc".repeat(0); // ''
"abc".repeat(1); // 'abc'
"abc".repeat(2); // 'abcabc'
数字新增
1、支持二进制、八进制写法（以前只支持10、16）
2、Number上有了isFinite（是否是有限的）、isNaN，以前是window上
window上的 isFinite，会尝试把参数转成数值，所以直接 isFinite("100"); 为true，Number.isFinite 不会，所以为false
3、isInteger --》检测参数是否为整数
注意：有小数点且后面都为0，是true
4、极小常量 Number.EPSILON
用于判断一些特例是否相等
5、Math.trunc （区别于floor 向下取整、ceil 向上取整）
将小数部分抹掉，返回一个整数 --》像parseInt，但是对于含字符串的不一样
6、Math.sign
p9
数组新增
1、展开运算符 ...
a、复制数组
都只能对一层的操作，多层无法深拷贝！
b、合并数组
结果
c、解构+展开
结果
注：展开只能放最后
2、Array.from()
将类似数组的结构（arguments、获取到的dom列表等）转化为数组！
注意：
迭代器可以代替，可以直接搜Array.from
3、Array.of()
弥补之前的不足，感觉没用和 [3] 是一样的
结果
4、操作新增
a、find --》 返回第一个满足要求的
结果
14
b、findIndex --》 返回第一个满足要求的索引
p52 es13 补充
c、es13 才出来findLast、findLastIndex
和上面一样，但是反着来
d、fill --》 填充
结果
也可以替换
注意：后面两个是起始和结束位置内进行填充，不然和上面一样，全部填充
es6讲了，p34 es10 补充
e、flat() 、flatMap() --》 扁平化二维数组
结果
注意：flat对对象不适用，使用flatMap
结果
注意：都对深层的无效，但是可以多次调用
p10
对象新增
1、对象简写
2、对象属性 表达式 --》 属性用 [ ] 框起来，很重要
结果
3、es 2018 扩展运算符 ...
a、复制
结果
都只能对一层的操作，多层无法深拷贝！
b、合并
结果
合并时属性相同 --》 后面覆盖前面
结果
实例
p28 es9 补充：
c、剩余参数
4、es6 Object.assign --》 合并对象
合并属性，会覆盖
结果
浅拷贝：
第一个元素会被影响，其实是把后面两个往第一个上面加！ -- --》 放一个新的对象在第一个
更多：
https://juejin.cn/post/6844903984675684366#heading-9
5、Object.is --》 判断两个对象相等
解决 === | == 不能判断NaN相等的问题！
结果
结果
结果
true
注：
p26 es8还有Object有关内容！
p11
函数新增
1、默认参数
2、rest参数 剩余参数 --》就是 ... 在函数的使用
3、name属性 --》 获取函数的名称
4、箭头函数
注意：
a、省略了return，但是返回的是对象，要加小括号
b、无法访问arguments、new
p12
实际场景：
引入了一个库函数，但是你想给库函数加一个属性，结果库函数已经声明了该属性，实际应该加一个独一无二的属性上去！
Symbol
不要new
结果
false
1、不能进行运算
2、可以调用toString，但是无用
结果
3、可以隐式变成true，但是无用
结果：
执行
4、给未知对象加字段 --》 避免冲突
结果：
5、
a、带参数区分
结果
b、Symbol类型的key是不能通过Object.keys()或者for...in来枚举的，它未被包含在对象自身的属性名集合(property names)之中。所以，利用该特性，我们可以把一些不需要对外操作和访问的属性使用Symbol来定义。
c、遍历
参考：
https://www.cnblogs.com/linziwei/p/10818101.html
6、常量
011-ES6-Symbol P12 - 28:19
7、symbol.for()
p34 es10 补充
8、Symbol description属性
带的参数就是 description属性
结果
name
p13
Iterator 迭代器
1、几种for循环可以看我的博客：
https://blog.csdn.net/langwang_100/article/details/120284935
a、能不能for of 就看原型对象上有没有symbol.iterator
b、自己也可以给对象加，通过[symbol.iterator]， 不常用（封装的时候会用，但是要自己重写[symbol.iterator]，去返回你想让用户通过for of访问的隐私值）
例子1：
必须加上一个length，不然迭代器不知道什么时候结束。
例子2
结果
2、iterator是一个内置方法，定义方式 [symbol.iterator]，访问也是[symbol.iterator]()
结果
3、其中的 next方法 --》 重点
结果
for of 只是语法糖，其实原理是执行symbol.iterator方法
4、遍历过程
5、含有symbol.iterator的原生
6、
a、... 结构赋值、... 展开都是基于迭代器，对象的 ... 不是！
b、定义了[symbol.iterator] 之后可以调用 ...，转成数组，可以取代 Array.from()
p14
Set
1、去重 + 转回数组
复杂去重
结果
2、属性 + 方法
a、size
b、add() --》 可链式调用
c、has()
d、delete()
e、clear()
3、遍历
结果
注意：
1.entries适用于iterator类型
结果
2、Map、Object也有这些方法，Object的values、entries是es8新增的！
p15
Map
1、里面是二维数组，不是对象数组！
通过 ... 转成二维数组
2、属性+方法
a、set
b、get
注意：键是对象
结果
undefined
修改
用变量接收对象作为键
c、has
d、delete
e、clear
f、size
注：
p46 对Set、Map有所补充
p16
proxy
会给代理对象添加：
1、get(target,key, receiver)
2、set(target --》 原对象,key,value, receiver)
操作的是代理对象，由代理对象操作原对象！
注：
I、get、set还有一个参数receiver --》保证上下文正确
MDN：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/set
II、Object对象自己也有get、set方法！ --》 见es8
3、has 不重要 --》 判断对象是否具有某个属性
4、对Set、Map拦截注意
a、返回对应的属性和方法
b、this 指向，Set、Map的内置方法有this调用
object.defineProperty
object.defineProperty(目标对象, 键, {
get(){}
set(value){}
})
使用 object.defineProperty 而不是直接 添加obj.data = xxx
defineProperty缺点：
1、一次只能传入一个属性，很多要遍历
2、不能拦截数组操作，所以vue2重写了数组方法
3、无法检测到对象属性的新增或删除
p17
Reflect
https://juejin.cn/post/7034751905125367822
两个方法：
a、set --》 设置属性
b、get --》 获取属性
注意：
Object对象自己也有get、set方法！ --》 见es8
1、代替Object的某些方法
注：
添加的描述符可以通过Object.getOwnPropertyDescriptors() 获取
2、
3、
4、配合proxy --》 因为Reflect接收的参数和proxy完全一致
使用Reflect的方法添加、获取属性，而不是手动 terget[key]
结果：
不仅能拦截方法，还能拦截length变化
p18
promise
promise两种写法：
1、promise.then(sussFun(){},failFun(){}) --》 异步情况下分别对应的就是resolve 和 reject
类似回调函数
2、promise.then(()=>{}).catch(()=>{})
3、链式调用
a、第一个then返回什么(不返回就是undefined)【非promise对象】，第二个then就可以得到什么，状态自动由pending --》fulfilled，所以一定可以执行下一个then
b、如果是promise对象，就看返回的promise的对象是什么状态，来确定是then还是catch
4、promise.all --》两个都成功才走then，不然就catch，catch获得的也只有失败的那一个的结果 --》 适用于并发任务
结果
5、promise.race --》只要有一个先成功就走then，只要有一个先失败就直接catch
可以做超时处理！ --》 判断超时的那一个promise不需要请求，直接计时器返回就行！
p30 es9 补充
6、promise的finally
p35 es11 补充
7、promise.allSettled --》补充all、race
具体场景
034-ES11-Promise.allSettled P35 - 02:05
不需要catch，因为不管成功失败都会传到then的res里面，自己通过里面的status去判断成功还是失败！
注：
还是会有报错提示，但是不影响！
p45 es12补充
8、promise.any --》只要有一个先成功就走then，只有都失败才catch
p19
generator（理解就行） --》 返回遍历器对象
async await 是 generator的语法糖！ --》 es8出来的
1、* 、yield、next()
注意：
a、* 那里加、加不加空格都行
eg：
function* gen
function * gen
b、next()，完了，后面next无效
2、产出
结果
和Iterator一样有done，且是next调用，所以是遍历器对象！
3、遍历产出值
结果
如果前面使用next调用了，这里就打印不出来，类似指针已经到最后了！
4、return的不会被for of遍历，但是可以被next最后接收，因为done是true
5、next 接收参数
结果
原因：
执行g.next后，遇见yield停止了，还没进行赋值，就执行下一步了，所以先打印外面的res1，当执行下一个next时，就执行了赋值操作，然后又停止！
简单理解，第二次next才是对第一个进行赋值！第三次就是对第二个进行赋值，依此类推！
实例：
018-ES6-Generator函数 P19 - 20:53
手动驱动，又变成回调地狱了
async、await就是替换了* 和 yield，内置了一个自动执行器！
类似添加了一个自动next函数！
p20
class
1、class是 构造函数＋原型 的语法糖！
2、class 会自动添加
a、get 属性名() {} / get(key){}
b、set 属性名(value) {} / set(key,value){}
注：
Object对象自己也有get、set方法！ --》 见es8
例子1
结果
例子2
location没有设置成功？没有get设置？
结果
一直打印set
因为返回this.location就相当于又走了set
例子3
没有set设置？
结果
直接一直set
因为初始化设置this.location就相当于又走了get
class的set和get并不是关注于对已有属性的直接操作，可以操作已有属性的里面的属性或者未定义的属性！
实例
对dom节点的获取和操作！
结果
3、静态方法和属性
不用实例化，直接通过类名访问的！
直接通过className.xxx方式添加的属性，不能通过新的实例访问，只能通过className. xxx 方式访问！这种就类似静态方法，但是不应该这么做，而是用：
static 属性名
static FunName(){}
注：静态方法this指向的类名，访问不到实例的 this.属性 ！
p48 es13 补充
4、一些不需要根据传值，且一开始就要初始化的属性，就可以在类的最外面定义
5、私有属性和方法
#+属性、方法
6、静态代码块
结果
7、#xxx in this/xxx 判断类是否含有该私有属性/方法 （了解）--》 对象也适用
MDN：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in
p21
class继承 --》 extends
1、construct 里的 super就是调用父类的construct方法！ --》 必写，而且只能写第一行
MDN：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super
2、自己身上方法和父类相同，覆盖父类！
注意：
js只能重写不能重载！
3、自己身上的方法和父类一致，但是 之后或者之前 多了一点别的操作，使用 super.父类方法()
4、静态的属性和方法也可以继承 或者 覆盖！调用方式 子类.静态属性或方法()
实例
020-ES6-Class继承 P21 - 12:26
p22
defer属性 <scriptsrc="file.js" defer></script>
浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。
注：所有的defer脚本保证是按顺序依次执行的。
async属性<scriptsrc="file.js" async></script>
async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在js的onload 事件完成时阻塞渲染进行js执行。
模块化 module
1、模块化，添加 type=“module”，就能实现异步加载
2、模块化，添加 type=“module”，里面的方法全部无法直接访问，除非导出 export {} 或者 export default {} ，两者也可以一起使用
前者以 {相同名字, 相同名字} 接收，后者以变量接收，自己随便取名，但是会全部导出！
注意：
如果 {相同名字} 接收重名可以用 as 重命名！
这个就是和后者一样了！
3、模块化，添加 type=“module”，即使重名，但是导入 import 时，会给不一样的名字
4、在哪里用在哪里引入，就不存在乱的问题，而且不会出现重复引入，会判断js是否已经下载完成
p23
nodejs的模块化 --》 commonJS --》 require
1、
这种不行，后面会覆盖前面
2、
3、node 13.2之后支持es6模块化，但是也不能直接使用
a、使用 npm init 并配置package.json ，加一个 "type":"module" ，但是加了这个common.js就不支持了，除非改回 "type":"commonjs"
b、把扩展名改成 .mjs ，都要改，代表module的js
c、想两个混合使用可以使用webpack！！！
4、commonJS支持按需导入，es11之前，js不支持！
es11之前只能这样写
es11之后见 p36
es7新规范
p24
1、求幂运算符 **
2、数组增加 includes
注意：
1、includes 可以找到NaN，indexOf 不行！
2、includes将数组中缺失的元素视为undefined
> [1, , 3].indexOf(undefined)
-1
> [1, , 3].includes(undefined)
true
es8新特性
p25
async、await
1、async本身返回就是一个promise对象！
2、async 返回的promise的走向，看async里面的逻辑返回的是什么？
a、是非promise对象，状态自动由pending --》fulfilled，走then
b、是 promise对象，根据返回的promise对象的状态确定走then还是catch
(其实如果使用了async函数本身，那就是链式调用！！！)
3、配合promise.all
p26
1、Object.key()
对象方法扩展
2、Object.values()
3、Object.entries()
a、对象转Map
4、Object.getOwnPropertyDescriptors() --》 获取属性描述符
作用：克隆（拷贝）对象！【浅拷贝】
5、Object对象自己也有get、set方法！
例子
主要用于对没有的属性进行拦截，或者依赖已有属性，对已有的会和class一样进入循环！（类似class）
p32 es10 补充
6、Object.fromEntries --》把键值对列表转换为一个对象
结果
a、Map转对象
b、特殊字符串转对象
注：
URLSearchParams 可以将url转换为类似对象的结构！ --》 可以获取，但是打开看是找不到的！
031-ES10-Object.fromEntries P32 - 05:33
结果
p27
字符串填充
一个往前填充、一个往后填充
使用padStart补0
es9新特性
p28 对象扩展运算符 在上面
p29 正则扩展 （暂时不看）
p30 promise的finally 在上面
p31
异步迭代
期望结果：1秒出现第一个结果，再过2秒出现第二个，再过3秒出现第三个！
例子1 直接使用
结果
三个promise对象（X）
例子2 async await
结果
注：
其实for循环已经执行完毕，只是因为内部被await搞成了异步，所以会出现该效果！await并行执行！
例子3 * yield
结果
111
222
同步遍历器遍历promise对象时，感觉不太好！没有链式调用！
异步遍历器 --》要想用for await of 必须遍历这个
async 结合 * yield
结果
结果
简化 for await of
解决上面的问题
结果
注：等待结果调用后，再执行整个代码块！
es10新特性
p32 Object.fromEntries 在上面
p33
去空格方法：(新增红色标出)
1、String.trim --》 前后都去
2、String.trimStart === String.trimLeft
3、String.trimEnd === String.trimRight
结果
p34
1、flat、flatMap 在上面
2、Symbol description属性 在上面
3、catch可以不接收参数了！
es11新特性
p35 promise.allSettled 在上面
p36 module新增
1、按需引入（动态引入） --》 import()
解决：
注：
1、返回值是promise
2、之前commonJS的require可以动态引入
结合p49看
结果
优化
2、import.meta --》 了解
3、export * as obj from "module"
解决：
需要在一个已存在的模块上添加功能，已存在的模块别人在用，不能修改，但是我也需要用其中的方法！
结果
p37 String的matchAll 配合正则（暂时不看）
p38 （暂时用处不大）
BigInt
1、和Number比较
结果
注意：
比较正常，但是运算有问题！--》 运算要把Number转成BigInt
2、转化为BigInt类型 --》 BigInt()
3、介绍一个库：json-bigint
p39
globalThis 获取顶层对象 --》 不取环境
window、self理解：
https://juejin.cn/post/6844903919445868552
注：
窗口顶层是window
web worker顶层是self
node顶层是global
p40
空值合并运算符 --》?? --》 逻辑操作符
?? 只要左边不是null 或者 undefined 就返回右边！
p41
可选链操作符 --》 ?.
es12新特性
p42（暂时用处不大）
新增逻辑操作符
1、逻辑赋值操作符
a = a && b --》 a&&=b
a = a || b --》 a||=b
a = a ?? b --》 a??=b
p43（暂时用处不大）
数字分隔符 --》 _
结果
true
注：
只是方便程序员看！
p44
字符串replaceAll
p45 promise.any 在上面
p46（暂时用处不大）
1、垃圾回收机制
https://juejin.cn/post/6971245488058302477
2、WeakSet
a、普通Set的内存泄漏
外面的引用没了，里面的还在！
b、使用WeakSet --》 WeakMap一样
I、只能 add 引用类型（dom节点也是），不能是普通类型
II、WeakSet 引用 不会触发垃圾回收机制 的 +1或者标记！
例子
结果
III、WeakSet 无法使用for of循环以及size，因为其中的内容是不确定的！
3、WeakMap
a、普通Map的内存泄漏
结果
外面的引用没了，里面的还在！
b、使用WeakMap
4、WeakRef --》 将一个对象的引用变成弱引用
a、没有之前，只能这样才能成功回收！
b、
结果
结果
解决a的问题
结果
p47（暂时用处不大）
FinalizationRegistry()
结果
es13 新特性
p48 类新增特性 在上面
p49
顶层await
该图片来源：
vue3学习笔记
结果
注：
1、只能在模块化中使用，因为模块化中的导出数据可能是异步取回的
2、数据不返回就不导出
3、该种方式会卡住整个 js
结果
开始和data-11111一起打印
所以要配合动态引入
p50
at函数 --》 数组、String都支持
结果
p51 正则匹配的开始和结束缩引（暂时不看）
p52 其他新增特性
1、findLast、findLastIndex 在上面
2、
