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 = https://www.cnblogs.com/zh1q1/p/false // 或0或''
const value = https://www.cnblogs.com/zh1q1/p/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"]
}
未完待續
原文-有道云筆記鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/298270.html
標籤：JavaScript
上一篇：前端SEO技巧