ECMAScript version knowledge points summary

Time:2021-12-2

ECMAScript version knowledge points summary

ES5

btoa、atob

Encode and decode the parameters in Base64 format

/**
* btoa()
*Base64 encoding
* @param {string} str
* @return {base64} encodeStr
**/
const str = 'myName is zzz'
window.btoa(str) // 'bXlOYW1lIGlzIHp6eg=='
/**
* atob()
*Base64 decoding
*@ param {Base64} EncodeStr Base64 string
* @return {string} str
**/
const encodeStr = 'bXlOYW1lIGlzIHp6eg=='
window.atob(encodeStr)  // 'myName is zzz'

encodeURIComponent、dencodeURIComponent

Encode and decode the parameters in UTF-8 format

The function is basically the same as that of the previous knowledge point. It is mostly used to pass Chinese parameters in URLs

/**
* encodeURIComponent()
*URL encoding
* @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 decoding
* @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

New data declaration methods, both of which have block level scope, no variable promotion, no repeated declaration and temporary dead zone

Const represents a constant, which must be assigned and cannot be modified when declared.

Destructuring assignment

It can be used for arrays and objects to quickly obtain internal specified elements

//Object deconstruction
const user = {
    name: 'zzz',
    age: 18
}
const { name, age } = user  // name='zzz', age=18
//Array deconstruction
const arr = [1, 2, 3]
[a, b, c] = arr    // a=1, b=2, c=3

Template syntax

Allow JS variables and expressions to be inserted into HTML

const name = 'zzz'
Console.log ('Hello, I'm ${name}! '//' Hello, I'm zzz '

Extension operator

Converts an array into a comma separated sequence of parameters, and objects can also be used

//Array
const arr = [1, 2, 3]
[...arr, 4, 5]  // [1, 2, 3, 4, 5]
//Object
const obj = { name: 'zzz' }
{...obj, age: 18 }    //  { name: 'zzz', age: 18 }
//Collocation deconstruction assignment
[a1, ...a2] = [1, 2, 3]    // a2 = [2, 3]

Arrow function

It will not create its own this, it will only inherit this from the upper layer of its scope chain

const fun = (a, b) => { a + b }
//Only a single return statement can omit {}
//... args remaining parameters
const fun2 = (...args) => args.reduce((pre,cur) => pre+cur)
fun2(1) // 1
fun2(1, 2)  // 3

Set data structure

Property is that all members are unique and return an array of classes

//Array de duplication
//It needs to be converted to a true array with array. From() or... Extension operator
Array.from(new Set([1,2,1]))    // [1, 2]
[...new Set([1,2,1])]   // [1, 2]

ES7

Power operator

As the name suggests, it is used to implement power operation and is equivalent to math. Pow()

const num = 2**3    // 8
const num2 = Math.pow(2, 3) // 8

includes

Judge whether value is in the array and return a Boolean value

const arr = [-1, -0]

arr.includes(-1) // true
arr.includes(1) // false

//Note: it will not distinguish between + 0, - 0 and 0
arr.includes(-0) // true
arr.includes(0) // true

ES8

padStart、padEnd

Used to fill characters in a string (beginning / end)

'1'.padStart(2, '0')    // '01'
'2'.padEnd(4, '021')    // '2021'
//Time formatting can be realized
//... code omitted

async/await

Convert asynchronous functions into synchronous functions to solve problems such as JS asynchronous calls and callbacks

async function fun() {
    Await fun2() // block the thread and wait for the callback
    Console.log ('I will not be executed until await returns')
}

ES11

Optional chain operator

In order to simplify the operation of accessing deeply nested attributes and avoid writing multiple & & chains to check whether each attribute exists

let name = result && result.data && result.data.name
//Optional chain operator writing
let name = result?.data?.name

Null merge operator

In order to avoid using the | operator when setting the default value of parameters, the attribute values such as false, 0 and ” will be overwritten, resulting in inaccurate operation results

Let nullvalue = false // or 0 or ''
Const value = nullvalue | true // true, the original value false is overwritten, which is not the expected effect
//Null merge operator
const value = nullValue ?? true    //  false

Promise.allSettled

If a promise task fails, other tasks will continue to be executed, so as to maximize the availability of the business

Promise.allSettled([promise1, promise2])
    .then((results) => results.forEach((result) => console.log(result)))
// {status: "fulfilled", value: "ok"},{status: "rejected", reason: "bad"}

BigInt

The number type can only safely represent values in the range of – (2 ^ 53-1) to 2 ^ 53-1. Integer calculation beyond this range or precision will be lost

Let bigintnum = 9007199254740993n // or bigint (9007199254740993)
Let big = 900719925474094n + 900719925474094n // the result is 18014398509481988n

⚠️  Bigint and number are not strictly equal, i.e
123n == 123  // true
123n === 123  // false

Project configuration

To use es11 (2020) in the project, you only need to add the following statement in the Babel configuration file

{
  "presets":  ["es2020"]
}

Unfinished to be continued

Original text – Youdao cloud notes link