async / await

async / await

ES7  The grammar of

          ES6  The proposal ,  however  ES6  The implementation is not very good

           Again  ES7  Optimized when

         Purpose :

          1.  The ultimate solution to hell

          2.  Write asynchronous code to look like synchronous code

 

Usage method :

        1. async  Write in front of the function ,  Is a modifier keyword for this function

        2. await  Use ,  There has to be  async  keyword , await  Can be used inside the function

        3. await  Waiting must be a  promise  object ,  There will be waiting results ,  Otherwise, it doesn't make sense

         When you meet the above three conditions ,  Yours  promise  The object should have been  then  The results received inside

           You can define variables directly

           Yours  promise  The asynchronous code inside doesn't end before

           Will not continue down

 //fn  It's an asynchronous function
 async function fn() {
// await  keyword ,  This function must have  async
 const res = await pAjax({ url: './server/a.php', dataType: 'json' })
//  When  pAjax  The request sent did not come back before , res  Will not be assigned
//  Only after asking to come back , res  Will be assigned a value
//  If this print comes back before the request , res  No results
//  If  res  It turns out ,  prove :  This code has been delayed ,  Postpone to the later  promise  After the object is completed
 console.log(res)
 console.log(' Subsequent code ')
 }
 fn()
 async function fn() {
 const res1 = await pAjax({ url: './server/a.php', dataType: 'json' })
 console.log(' demand 1: ', res1)
 const res2 = await pAjax({ url: './server/b.php', dataType: 'json', data: res1 })
 console.log(' demand 2: ', res2)

 const res3 = await pAjax({ url: './server/c.php', dataType: 'json', data: res2 })
 console.log(' demand 3: ', res3)
}
console.log('start')
fn()
console.log('end')
 const div = document.querySelector('div')
 div.addEventListener('click', async () => {
 const res1 = await pAjax({ url: './server/a.php', dataType: 'json' })
 console.log(' demand 1: ', res1)

 const res2 = await pAjax({ url: './server/b.php', dataType: 'json', data: res1 })
 console.log(' demand 2: ', res2)

 const res3 = await pAjax({ url: './server/c.php', dataType: 'json', data: res2 })
 console.log(' demand 3: ', res3)
 })

generator  function

         Something that looks like a function

         But not a function ,  Function generator ( iterator )

Usage method :

         When redefining a function ,   Again  function  Back   perhaps   Precede the function name with   asterisk (*)

         A function can be used internally  yield  keyword

           Be similar to  return  The same thing

           Can give you a result

           Let this  generator  Pause

           When you come back to this again  generator  When ,  From the last time  yield  Continue to execute the code backwards

        generator  The return value of is an iterator

           Contains a  next()  Method

           every time  next  perform ,  Will proceed to the next  yield  Up to the position

 //  When there is an asterisk , fn  It's no longer a function
 function* fn() {
 console.log(' I'm the first paragraph   Code ')
 yield ' The first paragraph ends '
 console.log(' I'm the second paragraph   Code ')
 yield ' The second paragraph ends '
 console.log(' I'm the third paragraph   Code ')
 return ' The third paragraph ends '
 }
 // result  Namely  fn  Generate a for   iterator
 const result = fn()
 //  for the first time ,  from  fn  Execute from the beginning of to the first  yield,
 //  hold  yield  The latter is treated as a return value
 const first = result.next()
 console.log(first)
//  The second time ,  From the first time  yield  Then start to execute to the second  yield  end
//  hold   the second  yield  The latter is treated as a return value
 const second = result.next()
 console.log(second)
 const third = result.next()
 console.log(third)

for ... of  loop

        for () { }  Traversal array

        forEach()  Traversal array

        for ... of  loop ,  Can traverse array

         Purpose :  Ergodic iterator

           Traversal array ,  It's just easy

         Iterators are not just  generator

Usage method :  for (let value of  Array ) {}

const arr = ['hello', 'world', ' Hello ', ' The world ']
 const obj = { name: 'jack' }
 for (let key in arr) {
 console.log(key, arr[key])
 }
 for (let value of arr) {
 console.log(value)
 }

 Set  data structure

        ES6  New data structure

         Iterate over structured data

         Usage method : new Set()

           When you can re instantiate ,  Pass an array

           Every data in the array is  set  Every data of data type

         characteristic :  Do not accept duplicate data

           It can be used to remove heavy

         Common methods

          1. add()

             Usage method : set data type .add( Data to add )

 const s = new Set(['hello', 'world', ' Hello ', ' The world '])
 // 1.  add to
 s.add(true)

          2. delete()

             Usage method : set data type .delete( Data to delete )

const s = new Set(['hello', 'world', ' Hello ', ' The world '])
 // 2.  Delete
s.delete(' The world ')

          3. has()

             Usage method : set data type .has( The data you want to judge )

             Return value :  Whether the data you want to judge exists

const s = new Set(['hello', 'world', ' Hello ', ' The world '])
 // 3.  Judge
console.log(s.has(' Hello '))

          4. clear()

             Usage method : set data type .clear()

             Clear all data

          5. forEach()

             grammar : set data type .forEach(function (item, item, set) {})

  s.forEach(function (item, t, set) {

      console.log(item, '-----', t, '-----', set)

    })

          6. for of  Loop to traverse

// 6. for of  Loop to traverse
for (let value of s) {
 console.log(value)
 }

          7. size  attribute

             Length , Set  How much data is there in the data structure

  console.log(s.size)

    console.log(s.length)

duplicate removal

  const arr = [1, 2, 3, 4, 5, 4, 3, 2, 3, 4, 5, 2, 1]

    const res = [...new Set(arr)]

    console.log(res)