ES6
let
- Variables cannot be declared twice
- Block-level scope (valid only within a code block, not outside)
- There is no variable promotion (it is not allowed to use the variable before it is declared)
- The scope chain is not affected
- Temporary dead zones (as long as the let command exists in the block-level scope, its declared variables are “binding” to this zone, no longer subject to external influence)
const
Used to declare constants (values that cannot be modified are called constants)
- Be sure to assign an initial value
- Use uppercase for general constants (unspoken, lowercase also works)
- Constant values cannot be modified
- Block-level scope
- Changes to elements of arrays and objects do not count as changes to constants. So we recommend using const for data, object creation
Const ARR = [1,2,3]; Arr.push (4) does not report an error because the address arr points to has not changed, only the array data has changed
Variable structure assignment
ES6 allows you to extract values from arrays and objects and assign values to variables in a pattern called deconstructed assignment
- Array deconstruction
- Object destruct assignment
Template string ‘ ‘
- A newline character can appear directly in the content
- You can concatenate variables directly
Simplify object writing
ES6 allows variables and functions to be written directly inside curly braces as object properties and methods
Arrow function =>
Arrow functions are suitable for callbacks unrelated to this, timers, and array methods. Not suitable for callbacks related to this, event callbacks, and object methods
- This is static and always refers to the value of this in the scope in which the function was declared. Call and Apply cannot change the pointer
- Objects cannot be instantiated as constructors
- Arguments variables cannot be used (arguments are used to hold arguments)
- Omit the parentheses when the parameter has one and only one
- Omit the curly braces. When the code body contains only one statement, the return must also be omitted, and the result of the statement is the return value of the function
It is possible to assign initial values to function arguments
- The initial value of a parameter with a default value, usually placed later (unspoken rule)
- Default values can be used in conjunction with destructively assigned values
The rest argument is introduced to get arguments to functions instead of arguments
- ES5
- ES6
- The REST parameter must be placed after the parameter or an error will be reported
Extended operators…
The extension operator converts an array to a comma-separated sequence of arguments
application
- Array merging
- Array clone (shallow copy)
- Convert a pseudo-array to a real array
Symbol
Represents a unique value. It is the seventh data type of JS and is a string-like data type
features
- The value of Symbol is unique and is used to resolve naming conflicts
- The Symbol value cannot be evaluated with other data (cannot be implicitly typed)
- Object properties defined by Symbol cannot use for… In loops through, but you can use reflect.ownkeys to get all the key names of the object
- The Symbol stack cannot use the new command because Symbol is a primitive data type, not an object
create
Usage scenarios
Add attributes and methods to an object to indicate that it is unique
- Adding attribute methods to an object safely does not affect the object’s own data
- When writing an object, you want to add a unique attribute to an object
Symbol attribute
In addition to defining their own Symbol values, ES6 provides built-in Symbol values that implement methods used internally in the language. These methods can be called magic methods because they are automatically executed in a particular scene.
| Attribute values | instructions |
|---|---|
| Symbol.hasInstance | This method is called when another object uses the instanceof operator to determine whether it is an instanceof that object (you can control the result returned). |
| Symbol.isConcatSpreadable | Object Symbol. IsConcatSpreadable attribute is a Boolean value that is equal to the said that the object is used to Array. The prototype. The concat (), whether can be expanded |
| Symbol.unscopables | This object specifies which attributes are excluded from the with environment when the with keyword is used |
| Symbol.match | When str.match(myObject) is executed, if the property exists, it is called, returning the return value of the method |
| Symbol.replace | When this object is called by the str.replace(myObject) method, the return value of that method is returned |
| Symbol.search | When this object is called by the str.search(myObject) method, the return value of that method is returned |
| Symbol.split | When this object is called by the str.split(myObject) method, the return value of that method is returned |
| Symbol.iterator | Object for… The Symbol. Iterator method is called during the of loop, returning the default traverser for the object |
| Symbol.toPrimitive | This method is called when the object is converted to a value of the original type, returning the corresponding value of the original type of the object |
| Symbol.toStringTag | When the toString method is called on this object, the return value of the method is returned |
| Symbol.species | This property is used when a derived object is created |
The Symbol approach
- Symbol.for()
Use to point a Symbol variable describing the same Symbol to the same Symbol value
- Symbol.keyFor()
Returns the key of a registered Symbol type value, used to check whether the Symbol value for the name of the string argument is registered
A1 is already registered with symbol.for (), so the key returned is “a”, while A2 is not registered, so undefined is returned
Symbol. For () and Symbol
The same
- They all define values of type “symbol”
The difference between
- Values defined by Symbol() are created each time, even if they are described identically
- The values defined by symbol.for () first check if the given description already exists. If not, a new value is created and the value is registered in the global environment for search. Values defined by symbol.for () with the same description are searched
The Iterator (Iterator)
Iterator is an interface that provides a uniform access mechanism for various data structures. The Iterator interface provides a uniform access mechanism for all data structures. The Iterator interface provides a uniform access mechanism for all data structures. Of loop)
- ES6 created a new traversal command for… Iterator (Symbol. Iterator); Iterator (Symbol. Iterator); Of consumption
- Data native to the Iterator interface (available for… Of traversal)
-
- Array, Arguments, Set, Map, String, TypedArray, NodeList
The characteristics of
for… The of loop calls the traverser interface, which returns only properties with numeric indexes. This has something to do with… The in loop is also different
In the above code, for… The of loop does not return the foo property of the array arr
The purpose of the Iterator interface
It provides a unified access mechanism for all data structures. Of circulation. When using the for… When the of loop iterates over some data structure, the loop automatically looks for the Iterator interface
The working principle of
- Creates a pointer object that points to the start of the current data structure
- The first time the object’s next method is called, the pointer automatically points to the first member of the data structure
- The next method is then called repeatedly, moving the pointer back until it points to the last member
- Each call to the next method returns an object containing the value and done attributes
application
- Implement custom traversal data, traversal of the object, the Banji object deployment Iterator interface, Symbol. Iterator property corresponds to a function, after the implementation of the current object traversal object
- An easy way to deploy Iterator for array-like objects (with numeric keys and length attributes, strings, DOM NodeList objects, arguments objects) is to use the symbol. Iterator method to refer directly to the Iterator interface of the array
Iterator interface (symbol. Iterator method)
- Deconstruction assignment
- Extended operator
- yield*
- Other situations: Since array traversal calls the traverser interface, any situation that takes an array as an argument actually calls the traverser interface
Iterator object return(), throw()
- return()
Is used if for… The return() method is called when the of loop exits prematurely (usually because of an error or a break statement). The return() method can be deployed if an object needs to clean up or release resources before completing traversal
Note that the return() method must return an object, as Generator syntax dictates
In the code above, after the first line of case 1 output file, the return() method is executed to close the file; Case two throws an error after the return() method closes the file
- throw()
This method is used mainly with Generator functions, and is not used for general traverser objects
Comparison with other traversal syntax: Take arrays as an example
- for… The in loop iterates through the key names of a number group
disadvantages
- Array keys are numbers, but for… The in loop takes strings as keys “0”, “1”, “2”, and so on
- for… The IN loop iterates not only over numeric key names, but also over other manually added keys, even keys on the prototype chain
- In some cases, for… The in loop iterates through the key names in any order
- for… The in loop is designed primarily for traversing objects, not for traversing groups of numbers
- The for loop
- for… The of loop iterates through the keys of a set of numbers
- Has the same for… Same concise syntax as in, but without for… In those disadvantages
- Unlike the forEach method, it can be used with break, continue, and return
- Provides a unified operation interface for traversing all data structures
The Generator Generator
Generator functions are an asynchronous programming solution provided by ES6 that have completely different syntactic behavior from traditional functions
features
- There is an asterisk between the function keyword and the function name
- Inside the function body, use yield expressions to define different internal states (yield means “output” in English)
The next method of the traverser object must be called to move the pointer to the next state. That is, each time the next method is called, the internal pointer executes from the head of the function or where it was last stopped until the next yield expression (or return statement) is encountered. In other words, Generator functions are executed piecewise, yield expressions are paused tokens, and the next method can resume execution
Function arguments to a generator
An example of an asynchronous operation
Next method
The next method can take a single parameter, which will be treated as the yield of the last expression. (The next method returns whatever follows yield.) Next or yield)
Generator.prototype.throw()
In the code above, the traverser object I throws two consecutive errors. The first error is caught by a catch statement inside the Generator. I Throws an error the second time. Since the catch statement inside the Generator has already been executed and will not be caught again, the error is thrown into the Generator body and caught by the catch statement outside the Generator
The throw method can take an argument, which is accepted by the catch statement, suggesting that an instance of an Error object be thrown
Do not confuse the throw method of an traverser object with the global throw command. The error in the code above is thrown by the throw method of the traverser object, not by the throw command. The latter can only be caught by a catch statement outside the function
Generator.prototype.return()
You can return the given value and terminate traversing the Generator function
Next (), throw(), return()
Each of these functions allows the Generator function to resume execution and replaces the yield expression with a different statement
- Next () replaces the yield expression with a value
In the code above, the second next(1) method is equivalent to replacing the yield expression with a value of 1. If the next method has no arguments, it is equivalent to replacing undefined
- Throw () replaces the yield expression with a throw statement
- Return () replaces the yield expression with a return statement
Promise
Is a new solution for asynchronous programming introduced in ES6. Syntactically, a Promise is a constructor that functionally encapsulates an asynchronous operation and can retrieve the result of its success or failure
methods
then
The THEN method returns a Promise object whose state (success or failure) is determined by the result of the execution of the callback function (the result of the execution of the function within the THEN)
- If a callback returns non-PROMISE data, then the object is in the success state and returns the value of the object’s success. (If you do not return a value, undefined is returned by default.)
- If a promise object is returned, the state returned by the internal promise method determines the state returned by the then method, and the return value is the return value of the internal promise
- Throws an error, which returns a failed status with an error message
catch
A callback to a failed promise object
all
The parameter takes an array and returns a promise that will succeed only if all promises succeed, or if only one fails
race
The parameter takes an array and returns a promise, the result of which is determined by the first completed promise
Syntactic sugar
- Promise.resolve()
- Promise.reject()
Handwritten Promise implementation
Set
Map
class
How objects are instantiated in ES5 and ES6
- How objects are instantiated in ES5
- The way objects are instantiated using class in ES6
- Static members
ES5 constructor inheritance and ES6 class inheritance
- ES5
- ES6
Note: Subclasses cannot directly call methods of the same name in their parent class. For example, declaring call() in ChildPhone overwrites the call in the parent class
Get and set
Get usually encapsulates dynamic properties, such as counting, and set can add control judgments, such as whether the added value conforms to a set rule
Numerical extension
- Number.EPSOLON
- Number.isFinite: checks whether a Number isFinite
- Number.isNaN: Checks whether a value is a NaN
- Number.parseInt and number. parseFloat: String to integer/float
- Number.isInteger: checks whether a value is an integer
- Math.trunc: Erases the decimal part of a numeric value
- Math.sign: Determine if a value is positive (1), negative (-1), or zero (0)
Object method extension
- Object.is: Determines whether two values are exactly equal
- Object.assign: Merges objects
- Object. SetPrototypeOf and Object. GetPrototypeOf
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =