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()//打印 play
1.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')//true
2.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 0
6.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&&9
7.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+8
8. 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
大致就是以上,有些具体详细的地方懒得写了。。。。