Chaoszhu'Blog

Appearance

ES6+ ​

ES6(2015) ​

【支持IE9以上，支持IE9以下版本需要使用Babel】

  • 新增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，表达不够直观。
  • 指数操作符**
  • :: // 双冒号，更改函数内部的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'}
  • 修改 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。