Skip to main content

ES6 generator functions

 Generators are a new function control and usage scheme in ES6 that gives you more control over how functions continue, pause, and more. We usually write a lot of functions, and the conditions for these functions to terminate are usually return values or exceptions. Generator functions are also functions, but with a few differences from regular functions. First, generator functions should add the symbol "*" after the function. The generator function can then use the yield keyword to control the execution. Finally, the return value of a generator function is a generator. A generator is actually a special kind of iterator.

Declaration method:

  function* function name (parameter1, parameter...n).

Generator function call:

  • A generator's iterator object is returned when the generator object is called.
  • The iterator has a next() method that returns an object containing value and done, where value is the return value and done is the execution (true or false).
  • Each time the next() method is called, execution is suspended at the position of the yield expression.
  • value indicates the return value of the yield expression, and done indicates whether the last value of the generator has been generated.
  • If you pass a parameter to the next() method, the value of the parameter will replace the return value of the yield expression. If you call return in the generator, the generator will end early.

Example:

Define a generator function that calls the next() method each time.

function * fun(){
    console.log("before");
    yield *fun2();
    console.log("11111");
    yield '1111---yield';
    console.log("2222");
    yield '2222---yield'
}
function * fun2(){
    console.log("fun2----111");
    yield "666666";
    console.log("fun2-2222");
}
let f=fun();
console.log(Object.prototype.toLocaleString.call(f));
f.next();
f.next();
f.next();
// f.next();
// f.next();
Iterate over the output:
for(let val of f){
    console.log(val.value,val.done);
}

Note: calling return in a generator, the generator will end early:

The value passed in the first call to next() is not used, just to start executing the generator function. The value passed in the second call to next() will be used as the return result of the first yield statement, which can be received by yourself in a variable, and then printed out for viewing.

Comments

Popular posts from this blog

vue routing global guard beforeEach and afterEach

 Global routing front guard (beforeEach) This function is used the most. Its function is to perform permission-related verification before routing jumps. This function contains three parameters: to: the object of the target route that is about to enter; from: the route that the current route is leaving; next: confirm the release. It can be used to log in and register, to determine whether there is a token before logging in, and release if it exists. , if it does not exist, it will not be released. The post routing guard (afterEach), its role is to trigger after the routing jump.

Native ajax usage

 What is AJAX? AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications for data interaction between browsers and servers. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, which allows web pages to request small amounts of information from the server instead of the entire page. AJAX describes a web application architecture that mainly uses scripts to manipulate HTTP. The main feature of AJAX applications is to use scripts to manipulate HTTP and web servers for data exchange without causing page reloads. Simply put, without reloading the entire web page, AJAX loads data in the background and displays it on the web page, which can partially refresh the page. The user has a better experience using the web page, but cannot go back.

Using ref to bind elements in Vue

 Vue provides us with a property to manipulate dom, ref. When bound to the dom element, it is used similar to the id. It is called through this.$refs, and it can also be bound to the component. It is very troublesome to obtain DOM elements in the previous native way. It needs to be obtained with such a long AP as: documentgetElementXXX/querySXXX.... Then jQuery was born to solve this pain point. The use of $("id") makes Our operation has become easier. But there are other problems, jQuery is just a library (plug-in) and cannot be used to build a framework. Now Vue can help us solve this problem. Vue also has its own method to obtain DOM, which is ref. It can get not only DOM elements but also components. If you add ref to the dom element, you can get the dom element, and if you add it to the component, you can get the component instance, and you can use the component method.