摘要

对参数进行base64格式编码、解码对参数进行UTF-8格式编码、解码作用与上个知识点基本相同，多用于URL中传递中文参数乱码问题

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

未完待续

原文-有道云笔记链接