New features of ES6

summary

1.var let const

One 、var

1、 stay ES5 in , The properties of top-level objects are equivalent to global variables , use var Declared variables are global variables , It's also a top-level variable ：

• Top objects , In browser environment, it means window object , stay Node refer to global object

2、 Use var The declared variable has the condition of variable promotion

3、 Use var, We can declare a variable many times , The variables declared later will override the variables declared earlier ：

• Use... In functions var When declaring variables , The variable is local
• And if you don't use var, The variable is global

Two 、let

1、let yes ES6 New orders , Used to declare variables

2、 The usage is similar to var, But the declared variable , Only in let The command is valid in the code block , There are no variables ：

• As long as there is... In the block level scope let command , This area is no longer affected by external influences

3、 Use let Before declaring variables , None of the variables are available , That is what we often call a temporary dead zone ：

• let Duplicate declarations in the same scope are not allowed
• Note that the same scope , The following situation will not be reported wrong , therefore , We can't redeclare parameters inside a function

3、 ... and 、const

1、const Declare a read-only constant , Once declared , You can't change the value of a constant ：

• const Once a variable is declared , It must be initialized immediately , It cannot be left for later assignment
• If used before var or let Declared variable , Reuse const Statements also report errors

2、const It is not actually guaranteed that the value of the variable cannot be changed , Instead, the memory address that the variable points to holds the same data ：

• For simple types of data , The value is stored at the memory address that the variable points to , So it's equivalent to a constant
• For complex types of data , The memory address that the variable points to , It's just a pointer to the actual data ,const It can only be guaranteed that the pointer is fixed , There is no guarantee that the structure of the change quantity will remain unchanged

Four 、 difference

1、 Variable Promotion ：

• var Declared variables have variable Promotion , That is, variables can be called before declarations , The value is undefined
• let and const No variable promotion , That is, the variables they declare must be used after declaration , Otherwise, the report will be wrong

2、 Temporary dead zone ：

• var There is no temporary dead zone
• let and const There is a temporary dead zone , Only wait until the line that declares the variable appears , To get and use this variable

3、 Block level scope ：

• var There is no block level scope
• let and const There are block level scopes

4、 Repeat statement ：

• var Allow variables to be declared repeatedly
• let and const Repeated declaration of variables in the same scope is not allowed

5、 Modify declared variables ：

• var and let Sure
• const Declare a read-only constant . Once declared , You can't change the value of a constant

5、 ... and 、 Use

• It works const Try to use const, Most other cases use let, Avoid using var

Array expansion

One 、 Application of extension operators

1、ES6 By extending the element symbol ..., like rest Inverse operation of parameter , Convert an array to a comma separated sequence of parameters ：

• Mainly used for function calls , Change an array into a sequence of parameters
• Some data structures can be converted into arrays , It is easier to copy arrays , The merging of arrays is also more concise

2、 Extension operators can be combined with deconstruction assignments , Used to generate arrays . If the extended operator is used for array assignment , It can only be placed in the last bit of the parameter , Otherwise, an error will be reported ：

• You can turn a string into a real array

3、 Defines the traverser （Iterator） Object of the interface , Can be converted to a real array with the extension operator . If not Iterator Object of the interface , Use the extension operator , Will be an error

Two 、 Constructor adds new methods

1、Array.from()： Turn two types of objects into real arrays ： Array like objects and traversals （iterable） The object of （ Include ES6 New data structure Set and Map）

• The second parameter... Is acceptable , Used to process each element , Put the processed value into the returned array

2、Array.of()： Used to put a set of values , Convert to array

• When there are no parameters , Returns an empty array
• When there is only one parameter , It's actually specifying the length of the array
• The number of parameters shall not be less than 2 Time ,Array() Will return a new array of parameters

3、 ... and 、 New methods for instance objects

1、copyWithin()： Copies a member of the specified location to another location （ Will overwrite the original members ）, Then return the current array

• target（ It's necessary ）： Replace data from this location . If it's negative , Said the bottom .
• start（ Optional ）： The data is read from this location , The default is 0. If it's negative , It means starting from the end .
• end（ Optional ）： Stop reading data before reaching this location , The default is equal to the array length . If it's negative , It means starting from the end .

2、find()、findIndex()：find() To find the first qualified member of the array

• Parameter is a callback function , Accept three parameters, which are the current value in turn 、 Current position and original array
• findIndex Returns the location of the first qualified array member , If all the members are not eligible , Then return to -1
• Both methods can take the second parameter , Used to bind callback functions this object

3、fill()： Using a given value , Fill an array

• You can also accept the second and third parameters , Used to specify the start and end positions of the fill
• Be careful , If the type of fill is object , It's a light copy

4、entries(),keys(),values()：

• keys() Is the traversal of key names
• values() Is the traversal of the key value
• entries() Is the traversal of key value pairs

5、includes()： Used to determine whether the array contains the given value

• The second parameter of the method indicates the starting position of the search , The default is 0
• If the parameter is negative, it indicates the position of the reciprocal

6、flat(),flatMap()： Flatten the array , Returns a new array , No impact on the original data

• flat()： By default, only “ Flatten ” First floor , If you want to “ Flatten ” Multiple nested arrays , Can be flat() The parameter of the method is written as an integer , Indicates the number of layers you want to flatten , The default is 1
• flatMap() Method executes a function on each member of the original array, which is equivalent to executing Array.prototype.map(), Then execute... On the array of return values flat() Method . This method returns a new array , Do not change the original array .flatMap() Method can also have a second parameter , It is used to bind the this

Four 、 Array vacancy

1、 Empty bits in an array refer to , There is no value in one position of the array

• ES6 It is clear that the vacancy will be changed to undefined
• Include Array.from、 Extension operator 、copyWithin()、fill()、entries()、keys()、values()、find() and findIndex()

3. Object addition and expansion

One 、 Short form of property

1、ES6 in , When the object key name is equal to the corresponding value name , Can be abbreviated . Methods can also be abbreviated . As the return value in the function , It will also become much more convenient ：

• Be careful ： Abbreviated object methods cannot be used as constructors , Otherwise, an error will be reported

Two 、 Property name expression

1、ES6 When you allow literals to define objects , Put the expression in parentheses . Expressions can also be used to define method names ：

• Be careful , Attribute name expression and concise representation , Can't be used at the same time , Will report a mistake
• Be careful , If the property name expression is an object , By default, the object is automatically converted to a string [object Object]

3、 ... and 、super keyword

• this The keyword always points to the current object where the function is located ,ES6 Another similar keyword has been added super, Prototype object pointing to the current object

Four 、 Application of extension operators

1、 In Deconstruction assignment , Unread traversable properties , Assign to the specified object ：

• Be careful ： The deconstruction assignment must be the last parameter , Otherwise, an error will be reported

2、 Deconstruction assignment is a shallow copy . Object's extension operator is equivalent to using Object.assign() Method

5、 ... and 、 Property traversal

1、ES6 Altogether 5 There are two ways to traverse the properties of an object ：

• for...in： Loop through the object's own and inherited enumerable properties （ Not included Symbol attribute ）
• Object.keys(obj)： Returns an array , Including the object itself （ Without inheritance ） All enumerable properties （ Not included Symbol attribute ） Key name of
• Object.getOwnPropertyNames(obj)： Back to an array , Contains all the properties of the object itself （ Not included Symbol attribute , But include enumerable properties ） Key name of
• Object.getOwnPropertySymbols(obj)： Returns an array , Contains all of the object itself Symbol The key name of the property
• Reflect.ownKeys(obj)： Returns an array , That contains the object itself （ Without inheritance ） All key names , Whatever the key name is Symbol Or a string , It doesn't matter whether it's enumerable or not

2、 The above traversal , All follow the same property traversal order rules ：

• First, traverse all numeric keys , Arrange in ascending numerical order
• Second, traverse all string keys , In ascending order of joining time
• Finally, traverse all Symbol key , In ascending order of joining time

6、 ... and 、 Object new method

1、Object.is()： Strictly judge whether the two values are equal , And strict comparison operators （===） The behavior is basically the same , There are only two differences ： One is +0 It's not equal to -0, Two is NaN Equal to itself

2、Object.assign()：

• Object.assign() Method is used for merging objects , Put the source object source All enumerable properties of , Copy to target object target
• Object.assign() The first parameter of the method is the target object , Later parameters are all source objects
• Be careful ：Object.assign() The method is shallow copy , If an attribute with the same name is encountered, it will be replaced

3、Object.getOwnPropertyDescriptors()： Returns all the properties of the specified object （ Non inherited properties ） Description object of

4、Object.setPrototypeOf()： Prototype object used to set an object

5、Object.getPrototypeOf()： The prototype object used to read an object

6、Object.keys()： Return to your own （ Without inheritance ） All traversable （enumerable） An array of key names of properties

7、Object.values()： Return to your own （ Without inheritance ） All traversable （enumerable） The array of values corresponding to the key of the property

8、Object.entries()： Returns the of an object itself （ Without inheritance ） All traversable （enumerable） An array of key value pairs of property

9、Object.fromEntries()： Used to convert an array of key value pairs into objects

4. Function addition and expansion

One 、 Parameters

1、ES6 Allows you to set default values for parameters of a function ：

• The formal parameters of the function are declared by default , Out of commission let or const Once again
• The default value of the parameter can be used in combination with the default value of the deconstruction assignment
• Deconstruction can only be performed when the parameter is an object , If no parameters are provided , Variable x and y It doesn't generate , To report a mistake , Set the default value here to avoid
• The default value of the parameter should be the tail parameter of the function , If it is not a non tail parameter, set the default value , In fact, this parameter is not omitted

Two 、 attribute

1、length：

• length The number of parameters without a specified default value will be returned
• rest Parameters are not included length attribute
• If the parameter with default value is not tail parameter , that length Properties are no longer included in later parameters

2、name：

• Returns the function name of the function
• If you assign a named function to a variable , be name Property returns the original name of the named function
• Function Function instance returned by constructor ,name The value of the property is anonymous
• bind Return function ,name The property value is added with bound Prefix

3、 ... and 、 Scope

1、 Once the default value of the parameter is set , When the function performs declaration initialization , Parameters form a separate scope

2、 Wait until initialization is complete , The scope disappears . This grammatical behavior , When the parameter default is not set , It's not going to happen

Four 、 Strict mode

• As long as the function parameters use default values 、 Deconstruct assignment 、 Or extension operators , Then the function interior cannot be explicitly set to strict mode , Otherwise, an error will be reported

5、 ... and 、 Arrow function

1、 If the arrow function does not require parameters or requires more than one parameter , Just use a parenthesis to represent the parameter part

2、 If the code block part of the arrow function is more than one statement , Just use curly braces around them , And use return Statement returns

3、 If you return an object , You need parentheses to wrap the object

4、 Be careful ：

• In function body this object , Is the object of definition , Instead of using the object
• Can't be used as a constructor , in other words , Not available new command , Otherwise, an error will be thrown
• Not available arguments object , The object does not exist inside the function . If you want to use , It can be used rest Parameters instead of
• Not available yield command , So the arrow function cannot be used as Generator function

5.Set Map

One 、 Definition

1、Set It's a data structure called a set ,Map It's a data structure called a dictionary

2、 What are collections and dictionaries ：

• aggregate ： It's made up of a bunch of disordered 、 The associated , And non repetitive memory structure 【 In mathematics, it is called element 】 A combination of components
• Dictionaries ： It's a collection of elements . Each element has an element called key The domain of , Of different elements key Each are not identical

3、 difference ：

• Common ground ： aggregate 、 Dictionaries can store non duplicate values
• Difference ： Set is based on [ value , value ] Store elements in the form of , The dictionary is based on [ key , value ] Form storage of

Two 、Set

1、Set yes es6 New data structure , It's like an array , But the values of the members are unique , There are no duplicate values , We generally call it a set

• Set Itself a constructor , Used to generate Set data structure

2、 Additions and deletions ：

• add()： Add a value , return Set Structure itself . When adding elements that already exist in the instance ,set Will not be processed to add
• delete()： Delete a value , Returns a Boolean value , Indicates whether the deletion is successful
• has()： Returns a Boolean value , Determine if the value is Set Members of
• clear()： Clear all members , no return value

2、 Traverse ：

• keys()： Returns the traverser of the key name
• values()： The traverser that returns the key value
• entries()： Returns the traverser of the key value pair
• forEach()： Use the callback function to traverse each member

3、Set The traversal order of is the insertion order ：

• keys Method 、values Method 、entries Methods return traverser objects
• forEach() Used to perform some kind of operation on each member , no return value , Key value 、 The key names are equal , alike forEach Method has a second argument , Used to bind handler functions this
• Extension operators and Set Structure to achieve array or string de duplication
• Realize Union 、 intersection 、 And subtraction

3、 ... and 、Map

1、Map A type is an ordered list of key value pairs , Keys and values can be of any type

• Map Itself a constructor , Used to generate Map data structure

2、 Additions and deletions ：

• size：size Property returns Map The total number of members of the structure .
• set()： Set the key name key The corresponding key value is value, Then go back to the whole Map structure . If key There has been a value , Then the key value will be updated , Otherwise, the new key will be generated . At the same time, it returns the current Map object , Chain writing can be used
• get()：get Method reading key Corresponding key value , If you can't find it key, return undefined
• has()：has Method returns a Boolean value , Indicates whether a key is currently Map Among objects
• delete()：delete Method to delete a key , return true. If the deletion fails , return false
• clear()：clear Method to remove all members , no return value

3、 Traverse ：

• keys()： Returns the traverser of the key name
• values()： The traverser that returns the key value
• entries()： Returns the traverser of all members
• forEach()： Traverse Map All members of

4、 The traversal order is the insertion order

Four 、WeakSet

1、WeakSet It is acceptable to have Iterable Interface object as a parameter

2、 stay API in WeakSet And Set There are two differences ：

• There is no traversal operation API
• No, size attribute

3、WeackSet Members can only be reference types , It can't be any other type of value

4、WeakSet The reference inside just disappears outside , It's in WeakSet The references in it will disappear automatically

5、 ... and 、WeakMap

1、WeakMap Structure and Map The structure is similar to , It is also a set used to generate key value pairs

2、 stay API in WeakMap And Map There are two differences ：

• There is no traversal operation API
• No, clear Emptying method

3、WeakMap Only objects are accepted as key names （null With the exception of ）, Other types of values are not accepted as key names

4、WeakMap The object pointed to by the key name of , Once no longer needed , The key name object and the corresponding key value pair will disappear automatically , Do not delete references manually

6.Promise

One 、 Definition

1、Promise, Commitment , Is a solution to asynchronous programming , More than traditional solutions （ Callback function ） More reasonable and stronger

2、 state ：pending（ Have in hand ）、fulfilled（ Have succeeded ）、rejected（ Failed ）

Two 、 advantage

• Chain operation reduces coding difficulty
• The readability of the code is significantly enhanced

3、 ... and 、 characteristic

• The state of the object is not affected by the outside world , Only results of asynchronous operations , You can decide which state you are in
• Once the status changes （ from pending Turn into fulfilled And from the pending Turn into rejected）, It won't change , You can get that at any time

Four 、 usage

1、Promise An object is a constructor , Used to generate Promise example ：

const promise = new Promise(function(resolve, reject) {});
 Copy code 

2、Promise The constructor takes a function as an argument , The two parameters of this function are resolve and reject：

• resolve The delta function is going to be , take Promise Object state from “ Hang in the air ” Turn into “ success ”
• reject The delta function is going to be , take Promise Object state from “ Hang in the air ” Turn into “ Failure

3、 Example method ：Promise The constructed instance has the following methods

• then()：then Is the callback function when the instance state changes , The first parameter is resolved Callback function for state , The second parameter is rejected Callback function for state
• catch()：catch() The method is .then(null, rejection) or .then(undefined, rejection) Another name for , Used to specify the callback function when an error occurs
• finally()：finally() Method is used to specify whether Promise What is the final state of the object , Will perform the operation

4、 Constructor method ：Promise The constructor has the following methods

• all()：Promise.all() Method is used to add more than one Promise example , Pack into a new one Promise example
• race()：Promise.race() Again, multiple Promise example , Pack into a new one Promise real
• allSettled()：Promise.allSettled() Method accept a group of Promise Instance as parameter , Pack into a new one Promise example
• resolve()： Convert an existing object to Promise object
• reject()：Promise.reject(reason) Method also returns a new Promise example , The state of the instance is rejected

5、 ... and 、 Use scenarios

• Write the loading of the image as a Promise, Once the load is complete ,Promise The state of is changing
• Through chain operation , Give multiple rendering data to then, Let them do their jobs . Or when the next asynchronous request depends on the result of the previous request , We can also solve problems friendly through chain operation
• adopt all() Implement the merging of multiple requests , Summarize all request results , Just set up one loading that will do
• adopt race You can set the picture request timeout

7.Generator

One 、 Definition

1、Generator The function is ES6 An asynchronous programming solution provided by , Grammatical behavior is totally different from traditional function

2、 perform Generator Function returns a traverser object , You can traverse through Generator Every state inside a function

Two 、 features

1、function There is an asterisk between the keyword and the function name

2、 Function body internal use yield expression , Define different internal states

3、 ... and 、 Asynchronous solution

1、 Callback function ： So called callback function , Just write the second paragraph of the task in a function , When the task is resumed , Call this function again

2、Promise：Promise Is to solve the callback hell , Nesting callback functions , Change to chain call

3、generator：yield Expressions can pause function execution ,next Method is used to resume function execution , This makes Generator Function is ideal for synchronizing asynchronous tasks

4、async/await： The above Generator The function is changed to async/await form , More concise , More semantically

5、 difference ：

• promise and async/await Is designed to handle asynchronous operations
• Generator Not designed for asynchrony , It has other functions （ Object iteration 、 Control output 、 Deploy Interator Interface ...）
• promise Writing code is better than Generator、async More complicated , And the readability is also slightly poor
• Generator、async Need and promise Object collocation handles asynchronous situations
• async Essence is Generator The grammar sugar of , It is equivalent to automatically executing Generator function
• async More concise in use , Write asynchronous code in synchronous form , Is the final solution for dealing with asynchronous programming

8.Proxy

One 、 Definition

• Custom behavior used to define basic operations

Two 、 The essence

1、 The modification is that the default form of the program is , It's like making changes at the programming language level , It belongs to metaprogramming (meta programming)

2、Proxy The same is true , A proxy for creating an object , So as to achieve the interception and customization of basic operations （ Such as attribute search 、 assignment 、 enumeration 、 Function calls, etc ）

3、 ... and 、 usage

1、Proxy by Constructors , Used to generate Proxy example

var proxy = new Proxy(target, handler)
 Copy code 

2、 Parameters ：

• target Indicates the target object to be intercepted （ Any kind of object , Including native arrays , function , Even another agent ））
• handler Objects that usually take functions as attributes , The functions in each attribute define the agent when performing various operations p act

Four 、 Use scenarios

1、Proxy Its function is very similar to the agent pattern in design pattern , Common functions are as follows ：

• Block and monitor external access to objects
• Reduce the complexity of a function or class
• Verify operations or manage required resources before complex operations

2、 Use Proxy Ensure the accuracy of data types ：

• Declared a private apiKey, Easy api Method calls inside this object , But I don't want to be able to access... From the outside api._apiKey

3、 Observer mode （Observer mode） It means that functions automatically observe data objects , Once the object changes , The function will execute automatically ：

• observable Function returns the of an original object Proxy agent , Intercept assignment operations , Trigger functions that act as observers

4、 The observer functions are put into Set aggregate , When modifying obj Value , At the meeting set Intercept... In function , Automatic execution Set All the observers

9.Module

One 、 Definition

1、 modular ：

• It is a collection of program statements that can independently name and complete certain functions （ That is, the aggregation of program code and data structure ）

2、 reason ：

• Variables and methods are not easy to maintain , Easy to pollute global scope
• The way to load resources is through script Label from top to bottom .
• The subjective logic of the dependent environment focuses on , More code will be more complex .
• Large project resources are difficult to maintain , Especially when many people work together , The introduction of resources will make people run away

Two 、 programme

1、CommonJs（ Typical representative ：node.js In the early ）：

• It passes through require To introduce modules , adopt module.exports Define the output interface of the module
• This module loading scheme is a server-side solution , It introduces modules in a synchronous way
• Because on the server side, the files are stored on the local disk , So reading is very fast , So there's no problem loading synchronously
• But if it's on the browser side , Because the module is loaded using network requests , So it's more appropriate to use asynchronous loading

2、AMD（ Typical representative ：require.js）：

• This scheme uses asynchronous loading to load modules , The loading of the module does not affect the execution of the following statements
• All statements that depend on this module are defined in a callback function , Wait until the load is complete before executing the callback function .require.js Realized AMD standard

3、CMD（ Typical representative ：sea.js）：

• This program and AMD The solution is to solve the problem of asynchronous module loading ,sea.js Realized CMD standard
• It and require.js The difference is that the processing of dependency is different when module is defined and when it is executed

4、ES6 Module：

• ES6 The proposal , Use import and export To import and export modules in the form of

10.Decorator

One 、 Definition

1、Decorator, I.e. decorator , It's easy to think of the decorator pattern from the name ：

• simply , Decorator pattern is a pattern of using inheritance without changing the original class , Design theory of dynamically extending object function

2、ES6 in Decorator So is the function , Its essence is not a tall structure , It's a normal function , Used to extend class properties and class methods ：

• The code becomes more readable , The name of the decorator is equivalent to a comment
• Without changing the original code , Extend the original function

Two 、 usage

1、 Class decoration ： When decorating the class itself , Can accept a parameter , That is, the class itself

2、 Decoration of class properties ： When decorating class properties , Can accept three parameters

• Class
• Attribute name to be decorated
• Description object of decoration attribute name

3、 Be careful ： Decorators cannot be used to decorate functions , Because the function has variable declaration

3、 ... and 、 Use scenarios

1、 be based on Decorator Powerful role , We can fulfill the requirements of various scenarios , Here are a few simple examples

2、 Use react-redux When , If written in the following form , It's neither elegant nor troublesome ：

class MyReactComponent extends React.Component {}
​
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
 Copy code 

3、 Through the decorator, it becomes much simpler ：

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
 Copy code 

4、 take mixins, It can also be written as a decorator , Make the use more concise ：

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}
​
//  Use 
const Foo = {
  foo() { console.log('foo') }
};
​
@mixins(Foo)
class MyClass {}
​
let obj = new MyClass();
obj.foo() // "foo"