ES6 analysis of learning records of lottery projects

Posted by luv2climb on Tue, 29 Oct 2019 19:06:22 +0100

14. iterator and for...of loop

*Different data structures achieve the goal of reading different data structures through the unified form of for...

*But the iterator interface behind it is different.

iterator

{
  //Circular array
  let arr = ["hello", "world"];
  let map = arr[Symbol.iterator]();
  console.log(map.next()); //{value: "hello", done: false}
  console.log(map.next()); //{value: "world", done: false}
  console.log(map.next()); //{value: undefined, done: true}
}

{
  //custom iterator Interface
  let obj = {
    start: [1, 3, 2],
    end: [7, 9, 8],
    [Symbol.iterator]() {
      let self = this;
      let index = 0;
      let arr = self.start.concat(self.end);
      let len = arr.length;
      return {
        next() {
          if (index < len) {
            return {
              value: arr[index++],
              done: false
            };
          } else {
            return {
              value: arr[index++],
              done: true
            };
          }
        }
      };
    }
  };
  for (let key of obj) {
    console.log(key); //1 3 2 7 9 8
  }
}

for...of

{
  let arr = ["hello", "world"];
  for (let item of arr) {
    console.log("item", item);
    // hello
    // world
  }
}

15. Generator

Asynchronous programming solution

Basic definition

{
  // Basic definition
  let tell = function*() {
    yield "a";
    yield "b";
    return "c";
  };
  let k = tell();
  // call next()The first one yield，Ensure the asynchronous operation process in the function body
  console.log(k.next());
  console.log(k.next());
  console.log(k.next());
  console.log(k.next());
  // {value: "a", done: false}
  // {value: "b", done: false}
  // {value: "c", done: true}
  // {value: undefined, done: true}
}

Relationship between generator and iterator

{
  let obj = {};
  obj[Symbol.iterator] = function*() {
    yield 1;
    yield 2;
    yield 3;
  };

  for (let value of obj) {
    console.log(value);
    //1
    //2
    //3
  }
}

State machine

{
  //State machine
  let state = function*() {
    while (1) {
      yield "A";
      yield "B";
      yield "C";
    }
  };
  let status = state();
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());
  console.log(status.next());
  // {value: "A", done: false}
  // {value: "B", done: false}
  // {value: "C", done: false}
  // {value: "A", done: false}
  // {value: "B", done: false}
}

// async await
// {
//   let state = async function() {
//     while (1) {
//       await "A";
//       await "B";
//       await "C";
//     }
//   };
//   let status = state();
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
// }

Example

{
  //Luck draw
  let draw = function(count) {
    //Specific lottery logic
    console.log(`Surplus ${count}second`);
  };
  //Computation times
  let residue = function*(count) {
    while (count > 0) {
      count--;
      yield draw(count);
    }
  };

  let star = residue(5);
  let btn = document.createElement("button");
  btn.id = "start";
  btn.textContent = "Luck draw";
  document.body.appendChild(btn);
  document.getElementById("start").addEventListener(
    "click",
    function() {
      star.next();
    },
    false
  );
}

{
  //Long polling
  let ajax = function*() {
    yield new Promise(function(resolve, reject) {
      setTimeout(() => {
        resolve({ code: 0 });
      }, 200);
    });
  };

  let pull = function() {
    let generator = ajax();
    let step = generator.next();
    step.value.then(function(d) {
      if (d.code != 0) {
        setTimeout(() => {
          console.info("wait");
          pull();
        }, 1000);
      } else {
        console.info(d);
      }
    });
  };

  pull(); //{code: 0}
}

16. Decorator - decorator

A function used to modify the behavior of a class, which can be understood as extending the function of a class

{
  let readonly = function(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor;
  };

  class Test {
    //The modifier is added here. Reassignment is not allowed.
    @readonly
    Time() {
      return "2019-07-11";
    }
  }

  let test = new Test();

  console.log(test.Time()); //2019-07-11
}

{
  let typename = function(target, name, descriptor) {
    target.myname = "hello";
  };

  @typename
  class Test {}
  //Class modifier
  console.log(Test.myname); //hello
}

{
  let log = type => {
    return function(target, name, descriptor) {
      let src_method = descriptor.value;
      descriptor.value = (...arg) => {
        src_method.apply(target, arg);
        console.info(`log ${type}`);
      };
    };
  };

  class AD {
    @log("show")
    show() {
      console.info("ad is show");
    }
    @log("click")
    click() {
      console.info("ad is click");
    }
  }

  let ad = new AD();
  ad.show();
  ad.click();
}

17. Modularity

Method 1

export

/*Method 1
export let A = 123;

export function test() {
  console.log("test");
}

export class Hello {
  test() {
    console.log("class");
  }
}
*/

Introduce

// import { A, test, Hello } from "./class/lesson17";
// import { A } from "./class/lesson17";
// import * as lesson from "./class/lesson17";

Method 2 (recommended)