ES6~ES13新特性整理
简单整理下ES6-13新特性的知识点
1.ES6
1.1 let和const
var会有变量提升，let和const不会；
let和const存在暂时性死区；
let和const不可重复声明；
var定义的变量为函数级作用域，let和const 块级作用域；
const声明一个只读的常量。一旦声明，常量的值就不能改变。
【const一旦声明变量，就必须立即初始化。】实际上是指变量指向的内存地址保存的数据不可改动。对象数组，变量指向的内存地址保存的只是指针并不是实际的数据，所以const声明对象的时候，该对象本身是可以改的，但是不能将这个对象指向另一个地址。严格模式下可以用Object.freeze()。
1.2 class类
一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。
类的方法内部如果含有this，它默认指向类的实例。
//以项目中使用为例
class Person {
constructor(first, last) {
this.firstName = first
this.lastName = last
}
}
export default Person
//使用的时候引入
import Person from 'xxxxxx'
const person = new Person('kkkk', 'oooo')
//打印出 Person {firstName: 'kkkk', lastName: 'oooo'}
ES6 规定，子类必须在constructor()方法中调用super()，否则就会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super()方法，子类就得不到自己的this对象。
class Person {
constructor(first, last) {
this.firstName = first
this.lastName = last
}
play() {
console.log('play')
}
}
class LittlePerson extends Person {
constructor(x, y, color) {
super(x, y) // 调用父类的constructor(x, y)
this.color = color
}
play() {
super.play() // 调用父类的play()
}
}
export default LittlePerson
//引用以后
const person = new LittlePerson('kkkk', 'oooo', 'pppp')
console.log(person)
//LittlePerson {firstName: 'kkkk', lastName: 'oooo', color: 'pppp'}
person.play()//打印 play1.3 解构赋值
1.4 模板字符串
1.5 字符串的几个常用方法
const s = 'nanjing fuzi'
s.includes('a') //true
s.includes('a',3) //false
s.startsWith('na')//true
s.startsWith('na',1)//false
//includes和startsWith第二个参数都是指起始下标到字符串结束
s.endsWith('zi')//true
s.endsWith('zi', 8)//false
//endsWith第二个参数都是指从下标0到该下标位置
'na'.repeat(0) // ""
'na'.repeat(2) // "nana"
'na'.repeat(2.9) // "nana"
//参数是小于-1的负数或者Infinity报错
//0 到-1 之间的小数，则等同于 0,因为先取整为-0
'na'.repeat('2')//'nana' 参数是字符串，则会先转换成数字
1.6 数值的常用方法
Number.isFinite(9999)//true
Number.isNaN(9999)//true
//这两个新方法只对数值有效,所以参数为字符串返回false
1.7 箭头函数、函数参数默认值
1.8 promise
1.9 set
1.10 map
1.11 模块化(import export)
1.12 Proxy Reflect
2. ES7
2.1 数组的includes
const arr = ['111', '222', '333']
arr.includes('000')//false
arr.includes('111')//true2.2 指数运算符**
3. ES8
3.1 async await
3.2 Object.values()
const obj = Object.freeze({
name: 'kkk',
age: 18,
})
console.log(Object.values(obj)) //['kkk', 18]3.3 Object.entries()
const obj = Object.freeze({
name: 'kkk',
age: 18,
})
console.log(Object.entries(obj))//[['name', 'kkk'],['age', 18]]3.4 Object.getOwnPropertyDescriptors()
3.5 padStart padEnd
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(4, 'ab') // 'xaba'3.6 函数参数列表结尾允许逗号
3.7 SharedArrayBuffer 对象
3.8 Atomics 对象
4. ES9
4.1 异步迭代
4.2 promise.finally()
4.3 Rest/Spresd属性
4.4 正则表达式命名捕获
4.5 正则反向断言、正则dotAll、正则Unicode转义
5.ES10
5.1 Array.flat() 和flatMap()
5.2 String.trimStart()和trimEnd()
const s = ' abc ';
s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"
5.3 String.prototype.matchAll
为所有匹配的匹配对象返回一个迭代器
5.4 Symbol.prototype.description
5.5 Object.fromEntries()
//与Object.entries()相反
const obj = Object.freeze({
name: 'kkk',
age: 18,
})
const a = Object.entries(obj)
console.log(a)
const obj1 = [
['name', 'kkk'],
['age', 9],
]
const b = Object.fromEntries(obj1)
console.log(b)5.6 可选catch
其实就是try...catch中可以省略catch绑定的参数和括号。
5.7 稳定的排序算法Array.sort()
const array = [
{ a: 1, b: 2 },
{ a: 2, b: 2 },
{ a: 1, b: 3 },
{ a: 2, b: 4 },
{ a: 5, b: 3 },
]
const arr = array.sort((a, b) => {
return a.a - b.a
})
console.log(arr)5.8 Function.toString()
从头到尾返回源代码中的实际文本片段
5.9 JSON.stringify() 加强格式转化
6. ES11
6.1 动态import
6.2 ??
const num = 0
const num1 = num || 8
const num2 = num ?? 8
console.log(num1, num2)//8 06.3 可选链接 ?.
该使用方法虽然好用，但是不能滥用，有时候会把一些错误隐藏了
6.4 bigInt
6.5 promise.allSettled
返回一个组合后的 promise，当所有 promise 全部切换为 fulfiled或 rejected状态时，该 promise 将切换为 fulfiled 状态；
6.6 for-in结构，规范for-in语句顺序结构
6.8 globalThis
7. ES12
7.1 replaceAll()
'aabbcc'.replaceAll('b', '_')// 'aa__cc'7.2 promise.any()
总结下：
promise.all()
返回一个组合后的 promise，当所有 promise 全部切换为fulfiled状态后，该 promise 切换为 fulfiled 状态；但若有任意一个 promise 切换为rejected 状态，该 promise 将立即切换为 rejected 状态。简而言之，需要全部fulfilled才会返回fulfilled
promise.race()
返回一个组合后的 promise，当 promise 中有任意一个切换为fulfiled 或rejected状态时，该 promise 将立即切换为相同状态。
promise.allSettled()
返回一个组合后的 promise，当所有 promise 全部切换为 fulfiled或 rejected状态时，该 promise 将切换为 fulfiled 状态；
promise.any()
返回一个组合后的 promise，当 promise 中有任意一个切换为 fulfilled 状态时，该 promise 将立即切换为 fulfilled 状态，但只有所有 promise 全部切换为 rejected 状态时，该 promise 才切换为 rejected 状态。7.3 逻辑赋值操作符 ??=、&&=、 ||=
ES11中的??用法赋值简写
let num = 0
num ??= 9
console.log(num)//0
//等同于 num = num??9
let num = 0
num ||= 9
console.log(num)//9
//等同于 num = num||9
let num = 0
num &&= 9
console.log(num)//0
//等同于 num = num&&97.4 下划线分隔符
7.5 WeakRef
7.6 Intl.ListFormat 构造函数，用来处理和多语言相关的对象格式化操作。
7.8 dateStyle 和 timeStyle
const a = new Intl.DateTimeFormat('en', {
timeStyle: 'short',
dateStyle: 'short',
})
console.log(a.format(Date.now()))//8/29/22, 9:35 PM
const b = new Intl.DateTimeFormat('en', {
timeStyle: 'medium',
dateStyle: 'medium',
})
console.log(b.format(Date.now()))//Aug 29, 2022, 9:35:39 PM
const c = new Intl.DateTimeFormat('en', {
timeStyle: 'long',
dateStyle: 'long',
})
console.log(c.format(Date.now()))//August 29, 2022 at 9:35:39 PM GMT+88. ES13
8.1 声明类的字段
class Test {
name='kkk'
}
//类字段可以在类的顶层被定义和初始化
//之前是在constrsuctor构造器中定义类的字段和初始化
8.2 用#前缀来定义类的私有方法和字段
8.3 增加了静态公共字段、静态私有方法和静态私有字段的特性
8.4 使用 Object.hasOwn(object, property)替代 Object.prototype.hasOwnProperty.call(object, property)
8.5 用in检测私有字段
8.6 at()
const str = 'hello';
str.at(1) // "e"
str.at(-1) // "o"
const array = [
{ a: 1, b: 2 },
{ a: 2, b: 2 },
{ a: 1, b: 3 },
{ a: 2, b: 4 },
{ a: 5, b: 3 },
]
const r = array.at(-1)
console.log(r) //{ a: 5, b: 3 }8.7 正则索引/d
const reg = /test(\d)/g
const reg1 = /test(\d)/dg
const str = 'test1test2'
const arr = [...str.matchAll(reg)]
const arr1 = [...str.matchAll(reg1)]
打印出来的结果差距就还挺大的。
8.8 Error Cause
大致就是以上，有些具体详细的地方懒得写了。。。。