ECMAScript版本知识点汇总
ES5
btoa、atob
对参数进行base64格式编码、解码
/**
* btoa()
* base64编码
* @param {string} str
* @return {base64} encodeStr
**/
const str = 'myName is zzz'
window.btoa(str) // 'bXlOYW1lIGlzIHp6eg=='
/**
* atob()
* base64解码
* @param {base64} encodeStr base64字符串
* @return {string} str
**/
const encodeStr = 'bXlOYW1lIGlzIHp6eg=='
window.atob(encodeStr) // 'myName is zzz'
encodeURIComponent、dencodeURIComponent
对参数进行UTF-8格式编码、解码
作用与上个知识点基本相同，多用于URL中传递中文参数乱码问题
/**
* encodeURIComponent()
* URL编码
* @param {string} url
* @return {UTF-8} encodeURLStr
**/
const url = 'https://www.baidu.com?name=zzz&age=18'
window.encodeURIComponent(url) // 'https%3A%2F%2Fwww.baidu.com%3Fname%3Dzzz%26age%3D18'
/**
* dencodeURIComponent()
* URL解码
* @param {UTF-8} encodeURLStr
* @return {string} url
**/
const encodeURLStr = 'https%3A%2F%2Fwww.baidu.com%3Fname%3Dzzz%26age%3D18'
window.dencodeURIComponent(encodeURLStr) // 'https://www.baidu.com?name=zzz&age=18'
ES6
let、const
新的数据声明方式，两者都具有 块级作用域、无变量提升、不能重复声明、具有暂时性死区
const表示常量，声明时必须赋值且无法修改。
解构赋值
可用于数组、对象，快速获取内部指定元素
// 对象解构
const user = {
name: 'zzz',
age: 18
}
const { name, age } = user // name='zzz', age=18
// 数组解构
const arr = [1, 2, 3]
[a, b, c] = arr // a=1, b=2, c=3
模板语法
允许在 HTML 中之插入 JS 变量以及表达式
const name = 'zzz'
console.log(`你好，我是${name}!`) // '你好，我是zzz'
扩展运算符
将一个数组转为用逗号分隔的参数序列，对象也可使用
// 数组
const arr = [1, 2, 3]
[...arr, 4, 5] // [1, 2, 3, 4, 5]
// 对象
const obj = { name: 'zzz' }
{...obj, age: 18 } // { name: 'zzz', age: 18 }
// 搭配解构赋值
[a1, ...a2] = [1, 2, 3] // a2 = [2, 3]
箭头函数
不会创建自己的this，它只会从自己的作用域链的上一层继承this
const fun = (a, b) => { a + b }
// 只有单条return语句可以省略{}
// ...args剩余参数
const fun2 = (...args) => args.reduce((pre,cur) => pre+cur)
fun2(1) // 1
fun2(1, 2) // 3
Set数据结构
特性是成员都是唯一的，返回一个类数组
// 数组去重
// 需搭配Array.from()或...扩展运算符转换为真数组
Array.from(new Set([1,2,1])) // [1, 2]
[...new Set([1,2,1])] // [1, 2]
ES7
幂操作符
顾名思义，用于实现幂次方操作，与Math.pow()是等价的
const num = 2**3 // 8
const num2 = Math.pow(2, 3) // 8
includes
判断value是否在数组内，返回Boolean类型值
const arr = [-1, -0]
arr.includes(-1) // true
arr.includes(1) // false
// 注意：不会区分 +0、-0、0
arr.includes(-0) // true
arr.includes(0) // true
ES8
padStart、padEnd
用于在字符串（开头/结尾）填充字符
'1'.padStart(2, '0') // '01'
'2'.padEnd(4, '021') // '2021'
// 可实现时间格式化
// ...代码略
async/await
将异步函数转换成同步函数，解决JS异步调用、回调地狱等问题
async function fun() {
await fun2() // 阻塞线程，等待回调
console.log('等await返回了，我才被执行')
}
ES11
可选链运算符
为了简化访问深层嵌套的属性的操作，避免需要写多个的&&链去检查每个属性是否存在
let name = result && result.data && result.data.name
// 可选链运算符写法
let name = result?.data?.name
空值合并运算符
为了避免参数设置默认值时，使用 || 运算符会导致 false 、0 , ' '等属性值被覆盖掉，导致运算结果不准确
let nullValue = false // 或0或''
const value = nullValue || true // true，原值false被覆盖，不是预期效果
// 空值合并运算符写法
const value = nullValue ?? true // false
Promise.allSettled
如果一个Promise任务失败了，其他任务还会继续执行，这样才能最大限度的保障业务的可用性
Promise.allSettled([promise1, promise2])
.then((results) => results.forEach((result) => console.log(result)))
// {status: "fulfilled", value: "ok"},{status: "rejected", reason: "bad"}
BigInt
Number类型只能安全的表示-(2^53-1) 至 2^53-1范围的值，超出这个范围的整数计算或者表示会丢失精度
let bigIntNum = 9007199254740993n // 或 BigInt(9007199254740993)
let big = 9007199254740994n + 9007199254740994n // 结果为 18014398509481988n
⚠️ BIgInt 与 Number 不严格相等，即
123n == 123 // true
123n === 123 // false
项目配置
项目中使用ES11（2020），只需要在babel配置文件中添加以下语句
{
"presets": ["es2020"]
}
