欢迎光临
我的个人博客网站

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

未完待续

原文-有道云笔记链接

赞(0) 打赏
未经允许不得转载:张拓的天空 » ECMAScript版本知识点汇总
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏