ES6(2015) 1、类(class)
2、模块化(ES Module)
3、箭头(Arrow)函数 箭头函数还修复了this的指向,使其永远指向词法作用域:
4、函数参数默认值
5、模版字符串(``)
6、解构赋值
7、延展操作符...
8、对象属性简写
9、Promise
10、let 和 const
ES7(2016) 1、Array.prototype.includes() 替代indexOf
2、指数操作符
ES8(2017) 1、async/await 异步终极解决方案
2、Object.values()、Object.entries()
3、String padding(字符串填充)
4、函数参数列表结尾允许逗号
5、Object.getOwnPropertyDescriptor() Object.getOwnPropertyDescriptor(obj, prop):obj需要查找的目标对象prop目标对象内属性名称
Object.getOwnPropertyDescriptors() 获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。 浅拷贝一个对象
6、SharedArrayBuffer对象 SharedArrayBuffer 对象用来表示一个通用的,固定长度的原始二进制数据缓冲区.
7、Aomics对象 Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。
ES9(2018) 1、异步迭代 await可以和for…of循环一起使用,以串行的方式运行异步操作
2、Promose.finally()
3、Rest/Spread 属性
4、正则表达式命名捕获组
5、正则表达式反向断言
6、正则表达式dotAll模式 正则表达式中点.匹配除回车外的任何单字符,标记s改变这种行为,允许行终止符的出现
ES10(2019) 1、Array.flat()和Array.flatMap() 扁平化多维数组:Array.flat()
但是好像只能扁平化单个数组啊,如果是对象数组就不行了
对象数组的扁平化
等同于reduce and concat
扁平化多维数组:Array.flatMap()
and map()flatMap()
and map() and split() flatMap()
2、String.trimStart()和String.trimEnd() 去除字符串首尾空白字符
3、String.prototype.matchAll matchAll()为所有匹配的匹配对象返回一个迭代器
4、Symbol.prototype.description 只读属性,回 Symbol 对象的可选描述的字符串。
5、Object.fromEntries() 返回一个给定对象自身可枚举属性的键值对数组
6、可选 Catch ES11(2020) 1、Nullish coalescing Operator(空值合并运算符??) 表达式在 ?? 的左侧 运算符求值为undefined或null,返回其右侧。
2、Optional chaining(可选链式云算法?.) ?.用户检测不确定的中间节点
3、Promise.allSettled 返回一个在所有给定的promise已被决议或被拒绝后决议的promise,并带有一个对象数组,每个对象表示对应的promise结果
Promise.all() 和 Promise.allSettled()的比较 相同点 都可以接受一组promise实例作为参数,并包装成一个新的promise实例 不同点 相同参数对应的处理方式的不同 Promise.allSettled()不管参数中的promise是fulfilled还是rejected,都会等参数中的实例都返回结果,包装实例才会结束。 Promise.all()只有在接受的所有promise实例全部是fulfilled才会走Promise.all([p1,p2,p3]).then()方法,只要有其中一个promise实例是rejected,就会直接走catch方法,并且catch中只会返回第一个变成rejected的promise的错误 对于包装实例本身 Promise.allSettled():一旦有了结果,包装实例本身总是fulfilled状态 Promise.all():必须是接受参数中的所有promise实例都变为fulfilled状态,包装实例本身才会变为fullfilled状态,否则有一个接受参数中有一个rejected,则包装实例就是rejected状态 返回的数据结构 Promise.allSettled():接受的结果与入参时的promise实例一一对应,且结果的每一项都是一个对象,告诉你结果和值,对象内都有一个属性叫“status”,用来明确知道对应的这个promise实例的状态(fulfilled或rejected),fulfilled时,对象有value属性,rejected时有reason属性,对应两种状态的返回值 Promise.all():只有当所有入参的promise实例都是fulfilled状态,才会在Promise.all().then()方法中结果,返回结果也是与入参一一对应,结果中只包含实际的resolve的结果,不包含类似allSettled的status和value属性。 4、import(specifier) 按需引入 众所周知,ES Module是一种静态加载模块,静态体现在如下信息: 静态模块: import/export声明只能出现在顶层作用域,不支持按需加载、懒加载 静态标识: 模块标识只能是字符串字面量,不支持运行时动态计算而来的模块名 严格的静态加载,有益于基于源码的静态分析,编译优化,但也同时存在以下的问题: 首屏需要加载所有import引入的模块,不利于首屏优化 模块较多的时候难以确定每个模块加载的含义 仅在特殊情况下需要加载的模块,首次就直接加载影响性能优化. import函数传入参数模块标识specifier ,返回promise,列如以下示例:
5、新基本数据类型BigInt 任意精度的整数,主要用来进行大数值运算,不能和普通数据类型做运算 基本数据类型(八种) number string bool null undefined symbol object bigInt
6、globalThis ES11 在语言标准的层面,引入globalThis作为顶层对象。也就是说,任何环境下,globalThis都是存在的,都可以从它拿到顶层对象,指向全局环境下的this。 列如: 在浏览器中它是 window 在 worker 中它是 self 在 Node.js 中它是global ...... 所以在ES11之后在任何情况下使用globalThis 都能拿到其顶层对象
ES12(2021) 1、replaceAll 返回一个全新的字符串,所有符合匹配规则的字符都将被替换掉
需要注意的是,replaceAll在使用正则表达式的时候,如果非全局匹配(/g),则replaceAll()会抛出一个异常
2、Promise.any() 当Promise列表中的任意一个promise成功,resolve则返回第一个resolve的结果状态 如果所有的promise均reject,则抛出异常表示所有请求失败
Promise.any与Promise.race十分容易混淆,务必注意区分,Promise.race 一旦某个promise触发了resolve或者reject,就直接返回了该状态结果,并不在乎其成功或者失败
3、WeakRefs 使用WeakRefs的Class类创建对对象的弱引用(对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为) 当我们通过(const、let、var)创建一个变量时,垃圾收集器GC将永远不会从内存中删除该变量,只要它的引用仍然存在可访问。WeakRef对象包含对对象的弱引用。对对象的弱引用是不会阻止垃圾收集器GC恢复该对象的引用,则GC可以在任何时候删除它。
WeakRefs在很多情况下都很有用,比如使用Map对象来实现具有很多需要大量内存的键值缓存,在这种情况下最方便的就是尽快释放键值对占用的内存。 目前,可以通过WeakMap()或者WeakSet()来使用WeakRefs
举个栗子:
我想要跟踪特定的对象调用某一特定方法的次数,超过1000条则做对应提示
如上虽然可以实现我们的功能,但是会发生内存溢出,因为传递给doSomething函数的每个对象都永久保存在map中,并且不会被GC回收,因此我们可以使用WeakMap
因为是弱引用,所以WeakMap、WeakSet的键值对是不可枚举的 WeakSet和WeakMap相似,但是每个对象在WeakSet中的每个对象只可能出现一次,WeakSet中所有对象都是唯一的
WeakSet与Set相比有以下两个区别 WeakSet只能是对象集合,而不能是任何类型的任意值 WeakSet弱引用,集合中对象引用为弱引用,如果没有其他对WeakSet对象的引用,则会被GC回收 最后,WeakRef实例有一个方法deref,返回引用的原始对象,如果原始对象被回收,则返回undefined
对于缓存远程数据来说,这可能不是一个好主意,因为远程数据可能会不可预测地从内存中删除。在这种情况下,最好使用LRU之类的缓存。
4、逻辑运算符和赋值表达式 逻辑运算符和赋值表达式,新特性结合了逻辑运算符(&&,||,??)和赋值表达式而JavaScript已存在的 复合赋值运算符有: 操作运算符:+= -= *= /= %= **= 位操作运算符:&= ^= |= 按位运算符:<<= >>= >>>= &&=:当LHS值存在时,将RHS变量赋值给LHS ||=:当LHS值不存在时,将RHS变量赋值给LHS ??= :当LHS值为null或者undefined时,将RHS变量赋值给LHS
5、数字分隔符 数字分隔符,可以在数字之间创建可视化分隔符,通过_下划线来分割数字,使数字更具可读性
继续优化~