Dig deep into YIELD in JS

What is the yield

  • Yield is a new ES6 keyword that suspends the execution of a generator function, and the value of the expression following the yield keyword is returned to the caller of the generator. It can be thought of as a generator-based version of the return keyword.
  • The yield keyword actually returns an IteratorResult object with two attributes, value and done, representing the return value and completion, respectively.
  • Yield does not work alone and needs to be combined with other functions of the generator, such as next, which provides lazy operations to demonstrate powerful active control features.

A simple example of a yield application

demo1

  1. If you see a yield in a function, that function is already a generator
  2. Yield can be used to enforce control, lazy loading
  3. Calling a function pointer is not the same as calling a generator. Notice the results above, countAppleSales and myArr.
  4. The next() function is needed in conjunction with each call, which returns two values: value and done, representing the iteration result and completion
  5. The function next() is an iterator object that can be passed by default, calling the function by default.

Wrong call

demo2

{value: 7, done: false} {value: undefined, done: true}

Because next in the while judgment will also be consumed, the output result is inconsistent with the expectation and only the even items that meet the conditions are obtained

Some instructions

  1. Yield does not produce a value directly, but produces a function that waits for output
  2. Compatible with all browsers except IE (including Edge for Win10)
  3. A function that contains yield means that the function is already a Generator
  4. If yield is in other expressions, you need to enclose it in separate brackets ()
  5. The yield expression itself returns no value, or always returns undefined(as returned by next).
  6. Next () can be called indefinitely, but always returns undeinded after a given loop is complete

The next() function and arguments

  1. In JS, it borrows from Python, but has its own twist. There is no send() function, so you cannot directly pass yield.
  2. Next () can take an argument, which is considered to be the return value of the last yield whole, as shown later in the code.
  3. In some ways, next() can be used as send() directly

Its significance is that it is possible to adjust the behavior of a function by injecting different values directly from the outside into it at different stages (something that is difficult or costly to do in other loops)

Comparison of yield parameters

js

\

python

  1. Modify the GENERATOR function in JS, as opposed to yield in Python on the right. They work the same way, but are called differently
  2. Calling next() yields many values for I, but does not affect reset because yield returns the value directly.
  3. When a value of true is passed, yield and all of its arguments become true and are assigned to reset, which is executed to satisfy the judgment condition within the loop
  4. The use of next has already achieved the effect of send
  5. This does not necessarily increase the time complexity of the loop because it does not take up more memory when no parameters are passed

Understand yield in a deeper way

If that didn’t make it clear to you, this example will make it clear once and for all

The ginseng

Analysis of the

Next () is passed to yield as a whole, otherwise yield is similar to return

Group A

  1. Yield (x + 1); yield (x + 1); yield (x + 1)
  2. On the second call, no argument is passed in, so y is NaN(2* undefined)
  3. The third call is the same as above

Group B

  1. Yield (x + 1); yield (x + 1); yield (x + 1)
  2. On the second call, 12 is passed in, so y is 24(yield (x + 1)= the input), yielding the second yield: yield (y / 3)=8
  3. The third call returns the final z value and return=42

Availability in the current project

In the front-end project, there are few opportunities to use it, and it can be completely ignored, but in the background project, it is more important, because of its superior controllability, but greatly improve the efficiency of the thread.

At present, it is only summarized according to the official website, ES6 specification, big station, etc., but unfortunately, due to the relatively simple Node project in our current project, there is no need to carry out actual transformation.

If you need an example, you can refer to some Python backend projects on Github. The call method is slightly different. Since js references Python, they are both dynamic languages, so the principle is the same, and the use is the same.