ECMAScript版本知识点汇总

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"]
}

未完待续

原文-有道云笔记链接