Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

1. Async Iteration

Asynchronous iterator

1.1 introduction

In some use cases of async/await, we might want to execute asynchronous code in synchronous loops:

async function fn(arr) {
  for (let s of arr) {
    await doSomeThing(i)
  }
}
Copy the code

After ES2018, asynchronous iterators were introduced so that async/await can be used in combination with for-OF to run asynchronous code sequentially

async function fn(arr) {
  for await (let s of arr) {
    await doSomeThing(s)
  }
}
Copy the code

However, in real development, we might want to be able to execute concurrently while async/await traversing a Promise array to improve efficiency, and the concurrency modification is as follows:

function fn(arr) {
  arr.map(async(s) => {
    await doSomeThing(s)
  })
}
Copy the code

2. Object Rest Spread

Object structure assignment and extension operators

2.1 introduction

ES6 introduces Rest parameters and extension operators (…) While ES6 is limited to arrays, ES2018 provides the same Rest parameters and expansion operators for object structures as arrays

const obj = {
  a:1.b:2.c:3
}
const{a, ... x} = obj// a = 1
// x = { b: 2, c: 3 }
// If the right hand side of an assignment is undefined or null, an error will be reported at runtime

const{... x1} =null // Cannot destructure 'null' as it is null.
const{... x2} =undefined // Cannot destructure 'undefined' as it is null.
// The argument to destruct the assignment must be the last argument, otherwise an error is reported

let{... x3, name} = {name: 'alice'.age: 19 } // SyntaxError: Rest element must be last element
// A copy of a deconstructed assignment is a shallow copy. If the value of a key is a value of a compound type such as array, object, or function, only the reference is copied, i.e. the value before and after the deconstruction occupies the same heap

let obj = { a: { b:1}}let { ...copy } = obj
copy.a === obj.a // true
As with arrays, object extension operators can follow expressions

constobj = { ... (2 > 1 ? { a : 1}, {a : 2 }), 
  b: 2
}
// obj = { a: 1, b: 2 }
By default, the get function inside the argument object is executed

let obj = {
  get fn() {
    console.log('fn')}}lettest = {... obj}Copy the code

3. Promise Finally

3.1 introduction

The finally method returns a promise. At the end of the promise, either pity or Reject executes the specified callback function.

promise
.then(res= > {})
.catch(err= > {})
.finally(() = > {})
// For example, if the server side uses Promise processing, the server can be shut down ina finally callback
server
 .listen(port)
 .then(() = > {})
 .finally(() = > {
   server.stop
 })
// The front-end can also handle loading in finally
let isLoading = true
fetch(param)
  .then((res) = >{... }) .catch((err) = >{... }) .finally((err) = > {
    isLoading = false
  })
Copy the code

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

ES Series summary (2)

ES Series summary (1)

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage