Summary of the most commonly used knowledge points about the new features of ES6

  • 2021-12-04 18:10:50
  • OfStack

Directory 1. Keywords 2. Deconstruction 3. String 4. Regular 5. Arrays 6. Functions 7. Objects 8.Symbol 9. Assemble 10. Observer mode of Proxy and Reflect 11. Promise 12. Traverser 13.Generator 14.async 15.Class 16. Decorator 17.Moudle Summarize

1. Keywords

The Let keyword works in the same code block as the let. Before let, you can't assign a value to change this variable

The Const keyword is a read-only variable, so it needs to be assigned at the time of definition.

2. Deconstruction

Deconstruction of variables,

1 > The array structure uses [], and local values can be assigned to the array

For example:

Let [a,,c]=[1,,3]

Let [a,... c] c can be assigned as an array

2 > The object structure uses {} to deconstruct objects, which is similar to arrays. The difference is that there is one more attribute problem, and the most important thing is that the object attributes have no order, but come in order.

3. String

1 > for of allows you to traverse every 1 character of a string.

2 > For determining whether a character is included: include startswith endwith

3 > . Padstart. . . And so on to replace the complete function

4 > . string template, you can add variables to the string ${variable}. You can also add the label of html

5 > Numeric value is mostly the operation of a function, judging whether it is a number, type conversion, etc.

4. Regular

1 > Two usages

One: Regex r=new Regex ('Matching Rule', 'Modification')

Two: Regex r =/Matching thing/Modification

Regex where I g y is the modifier

2 > Does the. sticky property have a modifier

Flags returns a match modifier

3 > Supports assertions for subsequent lines

5. Arrays

1 > You can use const [... a2] = a1 to assign directly, and you can also interchange two variables

2 > Multiple numbers can be combined with []

3 > Combined with knot deconstruction

For example:

[a, … rest] = list list is an array

6. Functions

1 > The use of default values for parameters, which cannot have parameters with the same name

2 > The parameter is evaluated lazily, which means that the default value is recalculated every time

3 > You can still use deconstruction for function assignment. (Personally, it is similar to object deconstruction.)

7. Objects

Objects in es6 use a type similar to the original struct in the C language, but the difference is that methods can be used inside objects in es6

For example:


Const person={

  Name : wl ; 

Birth , 

CalTime(){console.log( " );}

8.Symbol

1 > Equivalent to an extra 1 defined keyword to prevent the defined variables from being accidentally rewritten and overwritten.

2 > The main role is to eliminate magic strings (personal understanding: is a pile of strings directly out, changed into variables, improve code readability it)

9. Assemble

1 > Personal understanding: It is somewhat similar to the collection in java and C #. Just because of the features of es6, there are 1 different functions to implement complex operations. Set can be transformed into an array for 1 deconstruction operation.

There is one more set with the prefix weak. (This is the place where things are temporarily stacked. If you say no, you will not have it, so you can't traverse it.)

10. Observer mode of Proxy and Reflect

Proxy is an interception operation, and Reflect is a reflection operation, reading variables for modification.

Proxy monitors the change, intercepts the operation, and reflect changes the value to realize the simplest observation mode

11. Promise

Is a constructor, you can call back two functions. (Personal understanding: It is more used when there are two results, and different functions are called for use when there are different situations)

ArrayBuffer is also a constructor, using a variety of function operations, personal sense in order to standardize the array.

12. Traverser

The traverser simulates next and moves the pointer until the end. In es6, unlike the languages I used before, C and C + +, it will output undefined at the end, and will not directly crash the program.


  next: function() {

         return nextIndex < array.length ?

        {value: array[nextIndex++], done: false} :

        {value: undefined, done: true};// Constantly increasing nextIndex That is, let the subscript add itself. 

13.Generator

The essence is to record the internal state of the function and operate asynchronously. I feel that it should be applied more in multithreading. Single thread didn't think of the value of application. Essentially using yield for deferred operation, you can directly use * to change the function into a deferred function without yield.

14.async

Essentially, it is an improved operation of Generator, which does not use yield for deferred operation, but uses await for this operation. But it differs from Geneator in that it returns something different. Geneator returns the traverser, which returns the Promise object

15.Class

For the original js language, the operation of the class encapsulates a lot of things and has a fixed template. In order to better read and understand, plus inheritance, it also reduces the writing of repeated codes. And the pattern is strict, which is more normative for language. It is somewhat similar to class in object-oriented language.

16. Decorator

This writing is similar to the annotation of java, but in a different way. Personally, I understand that the annotations of java are for the sake of code regulation and easy modification. However, in es 6, a decorator is essentially a function executed at compile time.

17.Moudle

Modularize some statically compiled things and reduce repeated writing. Just like python introduced various libraries, it is relatively uncomplicated to introduce some libraries into something.


  import { stat, exists, readFile } from 'fs';// Introduce 

export {firstName, lastName, year};// Output 

Summarize


Related articles: