ES6+
ES6(2015)
【支持IE9以上,支持IE9以下版本需要使用Babel】
- 严格模式(ES6模块默认启用)【函数的参数不能有同名属性、不能使用with语句、顶层函数调用this指向undefined】 https://blog.csdn.net/fw19940314/article/details/78318708
- 新增Symbol (创建唯一值,避免对象属性冲突)类型
- let 与 const
- 模板字符串
- 解构赋值
- ...延展操作符【可作为剩余运算符(例如函数参数),也可以作为展开运算符】
- 对象属性简写
- 箭头函数(Arrow Function)【指向'外层'作用域】
- 函数参数默认值以及拖尾逗号
- Generator函数
- class类
- Promise
- Proxy 对象【无法polyfill】
- Set (类似数组) 和 Map (类似对象) 数据结构
- Reflect 对象(反射机制)
- for...of // 迭代具有iterator接口的对象【Array、 String、FormData、Map、 Set、 arguments(伪数组都可以)、 NodeList对象、 TypedArray(二进制数据缓冲区)】 注意:任何实现了Iterator接口的对象都可以使用展开符转为数组(@ruanyifeng ES6 p138)
Array.prototype的新增方法
- Array.prototype.from() // 将伪数组转为数组
- Array.prototype.find() // 查找元素(传入回调函数),返回第一个符合条件的元素
- Array.prototype.findIndex() // 查找符合条件的元素的下标
- Array.prototype.copyWithin(target[, start, end]) // [1, 2, 3, 4, 5, 6, 7].copyWithin(2, 0) // [1, 2, 1, 2, 3, 4, 5] 从target下标开始,从start覆盖后面的内容知道end【p143】
ES7(2016)
- Array.prototype.includes() // [1, 2, NaN].includes(NaN) // true indexOf的缺点: ①[1, 2, NaN].indexOf(NaN) // -1 原因是indexOf使用===比较符 ② 不存在返回-1,表达不够直观。
- 指数操作符**
- 类的装饰器【一般用于扩展类的方法】 https://github.com/chaos-zhu/typescript-study/blob/master/16.类的装饰器.ts
- :: // 双冒号,更改函数内部的this指向 示例: obj::fn(123) // 等价于fn.call(obj, 123)
ES8(2017)
- async...await【Generator+Promise的语法糖】
- Object.values() 和 Object.entries()
js
Object.keys({a: 1, b: 2, c: 3}) // ['a', 'b', 'c']
Object.values({a: 1, b: 2, c: 3}) // [1, 2, 3]
Object.entries({a: 1, b: 2, c: 3}) // [["a", 1], ["b", 2], ["c", 3]]
- Object.getOwnPropertyDescriptors() // 获取一个对象所有的属性的描述符
- String.padStart() 和 String.padEnd() // 长度不够参数1补充参数2的字符串 举例:'8'.padStart(2, '0') // 08
- SharedArrayBuffer实例
js
new SharedArrayBuffer(10) // 所创建的数组缓冲区的大小,以字节(byte)为单位
- Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作
ES9(2018)
- for await ... of // 异步迭代
- Promise.finally() // 指定Promise的最终逻辑,无论成功失败都会执行
- 正则相关:正则表达式命名捕获组、正则表达式反向断言、正则表达式dotAll模式
js
// 捕获组
const reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/
const match = reg.exec('2021-02-23')
console.log(match.groups) // {year: '2021', month: '02', day: '23'}
// 反向断言
...有点难,待学习
// dotAll模式 增强 . 匹配,支持匹配除换行和结束符(之前是不支持的)
/hello.world/.test('hello\nworld') // false
/hello.world/s.test('hello\nworld') // true
- Rest/Spread 属性 // 展开数组或对象
js
const values = [1, 2, 3, 5, 6]
console.log(Math.max(...values))
let obj = {a: 1, b: 2, c: 3}
let {a, ...rest} = obj
console.log(a) // 1
console.log(rest) // {b: 2, c: 3}
ES10(2019)
- Array.flat() 和 flatMap() 方法 // 扁平化数组【Infinity:"number"无穷大】
- String的 trimStart() 方法和 trimEnd() 方法 // 去除首尾空格
- Object.fromEntries() // 可将FormData转化为json 【Object.entries()的逆向操作】
js
let entries = [["a", 1], ["b", 2], ["c", 3]]
Object.fromEntries(entries) // {a: 1, b: 2, c: 3}
let fd = new FormData()
fd.append('a', 1)
Object.entries(fd) // []
Object.fromEntries(fd) // {a: '1'}
let map = new Map([['a', 1]])
Object.entries(map) // []
Object.fromEntries(map) // {a: '1'}
- String.prototype.matchAll // matchAll可以更好的用于分组 【https://juejin.im/post/5ca2e1935188254416288eb2#heading-53】
- 修改 catch 绑定 // try { } catch (e) { } ,可省略(e)
js
try {
// ...
} catch {
// ...省略(e)
}
ES11(2020)
- 新的基本数据类型BigInt
js
**截至ES11一共有七种基本数据类型,分别是: String、Number、Boolean、Null、Undefined、Symbol、BigInt**
**一种引用类型(Object[包含object\function\array\date\math\regExp])**
- Nullish coalescing Operator(空值处理??) 如果左侧为
undefined
或null
,返回其右侧
js
let a = ''
let b = null
let c = undefined
let d = false
console.log(a ?? '1') // ''
console.log(b ?? '1') // 1
console.log(c ?? '1') // 1
console.log(d ?? '1') // false
- Optional chaining(可选链)
js
let user = {}
let u1 = user.childer.name // 报错:TypeError: Cannot read property 'name' of undefined
let u1 = user.childer?.name // undefined
- Promise.allSettled([...]) // 返回一个resolve的Promise
js
const promise1 = Promise.resolve(1)
const promise2 = 2
const promise3 = new Promise((resolve, reject) => reject('我是失败的Promise_1'))
const promise4 = new Promise((resolve, reject) => reject('我是失败的Promise_2'))
const promiseList = [promise1, promise2, promise3, promise4]
Promise.allSettled(promiseList)
.then(values=>{
console.log(values)
})
// res
[
{status: 'fulfilled', value: 1},
{status: 'fulfilled', value: 2},
{status: 'rejected', reason: '我是失败的Promise_1'},
{status: 'rejected', reason: '我是失败的Promise_2'},
]
- import() // 异步/按需加载模块
ES12(2021)
- replaceAll // 返回一个全新的字符串,所有符合匹配规则的字符都将被替换掉
js
const str = 'hello world'
str.replaceAll('l', '') // "heo word"
- Promise.any(
PromiseList
) // 都成功只返回最先resolve的那个value,都失败进入catch
js
// 都成功
Promise.any([Promise.resolve(1), Promise.reject(2)])
.then(value => {
console.log(value) // 1
})
// 都失败
Promise.any([Promise.reject(1), Promise.reject(2)])
.catch(e => {
console.log('都失败了: ', e) // 都失败了: AggregateError: All promises were rejected
})
- 逻辑运算符和赋值表达式
js
a ||= b
//等价于
a = a || (a = b)
a &&= b
//等价于
a = a && (a = b)
a ??= b
//等价于
a = a ?? (a = b)
- 数字分隔符
js
const money = 1_000_000_000
//等价于
const money = 1000000000
- WeakRefs 使用WeakRefs的Class类创建对对象的弱引用
ES13(2022)
- 类成员声明 // 在ES13之前,我们只能在构造函数里面声明类的成员,而不能像其他大多数语言一样在类的最外层作用域里面声明成员
js
// ES12
class Car {
constructor() {
this.color = 'blue';
this.age = 2;
}
}
const car = new Car();
console.log(car.color); // blue
console.log(car.age); // 2
// ES13
class Car {
color = 'blue';
age = 2;
}
const car = new Car();
console.log(car.color); // blue
console.log(car.age); // 2
class类支持定义私有变量
- ES13之前,我们是不可能给类定义私有成员的。所以一些程序员为了表示某个成员变量是一个私有属性,会给该属性名添加一个下划线(_)作为后缀。可是这只能作为程序员之间的君子之约来使用,因为这些变量其实还是可以被外界访问到的
class类支持定义静态属性和静态方法
使用in来判断某个对象是否拥有某个私有属性
支持顶层await
Array/TypedArray/String支持at函数
js
const arr = ['a', 'b', 'c', 'd'];
console.log(arr.at(-1)); // d // 倒数第一个元素
console.log(arr.at(-2)); // c // 倒数第二个元素
const str = 'Coding Beauty';
console.log(str.at(-1)); // y
console.log(str.at(-2)); // t
const typedArray = new Uint8Array([16, 32, 48, 64]);
console.log(typedArray.at(-1)); // 64
console.log(typedArray.at(-2)); // 48
Object.hasOwn()
- 来检查某个对象自身是否拥有某个属性。
Object.prototype.hasOwnProperty()
有问题
findLast()和findLastIndex()
- 用于find()和findIndex()的逆序查找
ES14(2023)
新增不改变原数组的方法,返回新数组
Array.prototype.toReversed() Array.prototype.toSorted(compareFn) Array.prototype.toSpliced(start, deleteCount, ...items) Array.prototype.with(index, value) 替换index索引的值为value,负数index会从数组末尾开始计数
WeakMap 支持 Symbol 作为 key。WeakMap 原本只支持 object 类型的 key,现在支持了 Symbol 类型作为 key。