JSCORE day_ 05(7.6)

review

• Array higher order functions

  • Higher order function : Other functions are used in the function , It's called higher order function

  • every: Everyone is satisfied

  • some: At least one satisfies

  • filter: Filter out those that meet the conditions

  • map: mapping -- The data convert to HTML Code

  • forEach: Simple traversal , no return value

    • for..in: Traversing objects , General solution

    • for..of: Traversal array , Exclusive solutions

  • reduce: Array merge

• let/const

  • ES6 New way to declare variables

  • advantage 1: No global pollution , Because the declared variables are stored in Script scope

  • advantage 2: More detailed division

    • let: Variable variables

    • const: Constant , After initializing the assignment , Can no longer be modified

  • advantage 3: About declaration promotion

    • Many people think that : No promotion declared -- myth

    • Temporary deadband : Through the breakpoint, you can see the promotion , The default value is undefined, Same as var

      however : Before declaring the code Cannot use variable .

      Author's idea : Do not want to subversively remove the statement to improve , Use error reporting , Force users to declare before using

• Block level scope

  • use {} coordination let/const Use , Form a locally private scope , Similar function scope

  • ES6 Medium block level Instead of Closure scheme

• an : ...

  • ... Array

  • ... object

• The remaining parameters : Function parameters can be written ... The name of the parameter

  • Pay attention to distinguish between : this ... and Unfold ... It doesn't matter , Only the appearance is the same

• Parameter defaults : function ( Shape parameter = value ){}

• Deconstructive grammar

  • Array : var [ Variable , Variable ] = Array

  • object : var { Property name , Property name : Alias } = object

  • Shape parameter : function ({ Property name , Property name }){}

One 、 How to trigger the function

Q: classmate , Tell me about the triggering methods of functions ?

A: use (), apply bind and call

---

Q: Talk about their functions and differences

A: call- When you call a function , Temporarily set its this Point to

bind- Returns a new function , hold this Point and parameter are bound above it , Delay trigger

apply- Immediately trigger the function , The difference is that Parameter use Array to pass

---

Q: Arrow functions can be modified with them this Point to ?

A: The arrow function doesn't this, All cannot be modified

Two 、call

The essence of a function is an object type
Prototypes of functions Function.prototype

  use ( ) Trigger function : Is the most common way to trigger functions , But it is not the only way to trigger
 ( ): Characteristic is ` Automatically ` Of this Point setting

  apply, call, bind : This is a 3 Kind of Manually set this The way to point
  It provides more options for function triggering

 call Application

  Make a function , Calculate their areas respectively

The original method is to pass parameters , Call again

  use call Trigger function is to pass the function into the object for application , Then delete the passed in function after using

The following is to help understand , The execution process of putting a function into an object .

  3、 ... and 、apply

apply: And call be similar , But the difference is that the parameters should be placed in the array

 apply Usage scenarios of

demand : hold a The value of the array , Merge into nums in

push: You can add values to the array ,ES6 Then you can use the expanded syntax to realize this operation

  And in the ES6 Before , Relatively troublesome , Provides an idea to use apply The trigger function method of realizes the combination of two arrays .push Is the sharing method of array , Stored in the prototype of the constructor ,nums: As push Methodical this, amount to nums.push(), Array type again , Use the following code to realize ：

  Four 、bind

bind: Used for binding this Point to , Delay trigger function

5、 ... and 、class

class Grammar comes from Java Language , because web The front end is more and more popular , So a lot of Java Programmers change careers , Cause a lot of Java Programmers make complaints about : JS How can I even class There is no grammar ?? It's too hard to use. .JS In the early : Didn't want to do too comprehensive ,  stay ES6 Joined the high voice class grammar , The reality is that : a large number of JS The programmer ` conservative `, Not willing to write class grammar , class grammar and JS Syntax object , It's written differently .

JS grammar , Create objects ：

 

 java Of class grammar Implement the same code :

  6、 ... and 、 structure

Constructors : Functions for building and creating objects

 

Java Constructor for ：Java Programmers are writing JS When the constructor for , The most unacceptable thing is Prototype theory , Java There is no prototype concept : Everything is automated ,class Meeting ` Automatically ` Save all the methods in In the prototype of constructor , And automatically non traversable .

  7、 ... and 、 Inherit

There are three characteristics of object-oriented : encapsulation Inherit polymorphic
    1. encapsulation : use {} Seal the code together , Name it . Later, call this code by name
    2. Inherit : What you don't have Find in the parent .. JS Prototype chain of __proto__
    3. polymorphic : Rewriting theory

The key words of inheritance are extends , In the following example ,Son: son ,Father: Dad , The son inherited Dad

  Advantages of inheritance : After the inheritance operation , An object can expand and expand infinitely

  One class After inheriting another class , You can use all its properties
And prototype It will be The prototype associated with the parent class , You can use your own method and The father's method

8、 ... and 、 polymorphic

polymorphic : A parent class You can have different subclasses . Because subclasses can override , So different subclasses call the same method or property Different states can occur

Override the method with the same name as the parent class , When using eat Method when , According to the proximity principle of prototype chain , Prefer to use your own prototype eat Method

  Nine 、 Back to hell

 JS Asynchronous operation of Usually, callback functions are used to realize -- Network request
  When multiple asynchronous operations need to be executed synchronously , Will appear Back to hell

expect : When you click the register button , We should verify in an orderly way : Is the user name duplicate -> mailbox ..-> cell-phone number -> register

  Such indentation will occur

  Ten 、Promise

ES6 Provides Constructors Promise, The callback hell problem can be avoided grammatically

Study Promise, Have to recite Its fixed format
resolve: solve    reject: Refuse   then: then  catch: Grab

Promise There are three states
1. pending: undetermined . new Promise Then in a state
2. fulfilled: Has been cashed in . call resolve After the state of the , On behalf of success
3. rejected: Rejected . call reject After the state of the , For failure

Promise application

 

  Transform the example ： Store... With variables new Coming out promise object ; Reuse p call then and catch

 

By calling functions , The return value is new Promise()

11、 ... and 、 Regular expressions

A set of Universal String format of Fuzzy matching scheme , Not JS proper

english : Regular Expression abbreviation RegExp

working principle : The official provides a special set of characters , Each represents different meanings

Check the special characters and meanings of regular expressions on the official website

matching

In programming languages : Use a special format To make various literal quantities
 b   Variable
 'b' character string
 [b] Array
 { b }   object
/b/   Regular

Regular substitution

  Regular verification

  Regular construction