What is the ES6

ES6 is a new generation of JS language standard, JS core content has been upgraded and optimized. It not only standardized the use of JS standards, but also added JS native methods, making JS more standardized, more suitable for large-scale application development.

Arrow function

What is the difference between ES5, ES6 and ES2015

ES2015 refers to the new generation of JS language standards released in 2015. ES6 generally refers to the next generation of JS language standards, including ES2015, ES2016, ES2017, and ES2018. In most scenarios, ES2015 is the same as ES6 by default. ES5 generally refers to the previous generation of language standards. ES2015 is the time boundary between ES5 and ES6

What is a bable and what does it do

Babel is an ES6 transcoder that converts ES6 to ES5, compatible with platforms that do not support ES6

Let var const

  • let constIt’s not going to go up, andvarcan
  • In the same scope,let constCan’t repeat the statement, andvarcan
  • constDeclares a read-only constant that must have an initial value and cannot be changed

Give someES6rightStringString type to do common upgrade optimization

  • To optimize the part

In ES6, template strings are added to concatenate large strings, with a backslash instead of the previous summing method, can preserve all Spaces and newlines, making string concatenation look more straightforward.

  • Upgrade parts

ES6 adds an includes method to the String prototype to replace the traditional indexOf method. Includes can return true or false to make semantics clearer and more explicit. In addition, startsWith(), endWith(), padWidth(), padEnd(), repeat() and other methods are added, which can be conveniently used to find and complete strings.

Give someES6rightArrayArray types do common upgrade optimizations

  • To optimize the part

ES6 can use arrays to deconstruct assignments. When declaring more variables, there are no more lets to write, and the mapping is clearer. Default values are supported

Extended operator, can easily achieve array copy and structure assignment.

  • Upgrade parts

The find method has been added to replace the traditional indexOf. CopyWithin (), includes(), fill(),flat() and other methods have been added to facilitate string lookup, completion, conversion, etc.

Give someES6rightNumberCommon upgrade optimizations for numeric types

  • To optimize the part

New isFinite() isNaN() method. ES5 causes the strange behavior of isNaN(‘NaN’) === true. ES6 does not

  • Upgrade parts

ES6 has added math.cbrt (), Trunc (), hypot() and other scientific counting methods to Math object, which can perform cube root, summation cube root and other scientific calculations in a more comprehensive way

Give someES6rightObjectObject to do common upgrade optimization

  • To optimize the part
  1. ES6Directly toVariable form declares object properties or methods, is more concise and convenient than the traditional key-value pair method
  2. Object destructuring assignment
  3. Object extension operator
  4. The super keyword,ES6inclassAdded something likethisThe key wordsuper. withthisThe current function is on a different object,superA prototype object that always points to the object of the current function
  • Upgrade parts

  1. ES6 added is method on Object prototype to do the equality comparison between two target objects. Object. Is fixed a minor bug in the === method where NaN == NaN //false in the ‘=== =’ method is actually unreasonable.

  2. ES6 adds a new assign() method to the Object prototype, which can be used to add attributes to objects or merge multiple objects.

  3. ES6 added on the Object prototype getOwnPropertyDescriptors () method, this method enhances the ES5 getOwnPropertyDescriptor in () method, which can obtain the specified Object all its attributes describe objects. With the defineProperties() method, you can copy objects perfectly, including get and set properties

  4. ES6 adds getPrototypeOf() and setPrototypeOf() methods to Object prototypes to get or set the prototype Object of the current Object. The meaning of this method is that in ES5, the __proto__ attribute is achieved through the __proto__ attribute. However, the __proto__ attribute is not explicitly specified in the ES specification, but is added by the browser manufacturers by default because it is applicable to a wide range of properties. This is not always available in a non-browser environment, so to be on the safe side, use the new ES6 standard usage when getting or setting the current object’s Prototype object.

  5. ES6 also adds object.keys (), object.values (), object.entries () methods to the Object prototype, which retrieve all keys, all values, and all key-value pairs arrays of objects

Give someES6rightFunctionFunction to do common upgrade optimization

  • To optimize the part
  1. Arrow function (core). The arrow function isES6One of the core upgrade items, the arrow function does not have its ownthis, this changes the JS function in the past the most difficult to understand this operation mechanism

  • The this in the arrow function refers to the object on which the function was defined, not the object on which the function was executed. In ES5, this always refers to the object on which the function is executed. This makes it difficult to understand the direction of this in many cases, especially in non-strict mode. This sometimes refers to global objects, which can even be attributed to a language level bug. The arrow function in ES6 optimizes this by not having its own this inside, which results in this always pointing to this at the upper level. If the upper level is still an arrow function, it continues pointing up until it points to a function with its own this as its own this

  • The arrow function cannot be used as a constructor because it does not have its own this and cannot be instantiated

  • Since arrow functions don’t have their own this, there are no arguments objects in arrow functions. (You can use the extension operator instead.)

  1. The function is assigned by default.ES6Previously, function parameters could not be given default values, but could only be implemented within the function via workarounds.ES6Default function assignment in a cleaner and more explicit way
  • Upgrade parts
  1. The double colon operator has been added to ES6 instead of the previous onebind.call, andapply. (Not currently supported by browsers,BabelTranscoding is already supported.
  • foo::bar; // Equivalent to bar.bind(foo); foo::bar(... arguments); // equivalent to bar.apply(foo, arguments);Copy the code

SymbolWhat is it? What does it do

Symbol is a new data type introduced in ES6, which generates unique values. It fundamentally solves the problem of attribute name conflict overwriting caused by too many attributes.

SetWhat is it? What does it do

Set is a new data structure similar to Arrary introduced in ES6. The members of the Set instance are similar to the members of the array item, but the difference is that the members of the Set instance are unique and not repeated. This feature makes array de-duplication easy.

MapWhat is it? What does it do

A Map is a new data structure similar to Object introduced in ES6. A Map can be regarded as a superset of Object, breaking the traditional definition of an Object in the form of key-value pairs. The key of an Object can also be an Object instead of a string. Can describe the properties of the object more comprehensively.

ProxyWhat is it? What does it do

Proxy is a new constructor in ES6, which can be understood as a Proxy of JS language. It is used to change some of the default LANGUAGE behaviors of JS, including intercepting the default get/set and other low-level methods, so that JS has more freedom to use and can meet the needs of developers to the maximum extent

ReflectWhat is it? What does it do

Reflect is a new Object introduced in ES6. Its main Function is to integrate the original methods scattered in Object, Function or global Function (such as apply, delete, get, set, etc.) into Reflect. This makes it easier and more uniform to manage some native apis. Second, because Proxy can rewrite the default native API, it may not be found once the native API is not rewritten, so Reflect can also backup the native API, so that even after the native API is rewritten, the default API can be used in the modified API.

PromisseWhat is it? What does it do

Promisse is a new object introduced in ES6, which is used to solve the “callback hell” caused by callback mechanism in JS asynchronous mechanism. It’s not a breakthrough API, but it encapsulates the asynchronous callback form so that it can be written more elegantly, more readable, and can be chained

IteratorWhat is it? What does it do

Iterator is an important concept in ES6. It is not an object, nor is it any data type. ES6 adds a Set and Map type, which is similar to Array and Object. Array and Object can be traversed, but neither Set nor Map can be traversed with a for loop. There are two solutions to solve this problem: one is to add a separate API for traversing Set and Map. The other option is to add a unified traversal API for sets, Maps, arrays, and Objects. Obviously, the second option is better, and ES6 naturally needs a design standard to unify the traversal of all traversable types. Iterator is just such a standard. Or a normative idea

ES6 adds the Symbol. Iterator method to Set, Map, Array, and String. The [Symbol. Iterator] function conforms to the standard iterator interface specification. So Set, Map, Array, and String are all traversable by default.

for… In and for… What’s the difference between “of”

All Iterator interface objects (traversable objects) can be passed through the for… Of, for, for In can only iterate over objects.

This means that arrays can also be used for… Of traversal, this greatly simplifies array values, and avoids many programs using for.. Go through the bad habits of several groups.

GeneratorWhat is the function? What does it do

Generator functions are the implementation of the Iterator interface. Together with Thunk functions, Generator functions can easily and elegantly implement asynchronous programming and control flow management

asyncWhat is the function? What does it do

Async functions can be understood as Generator function syntactic sugar with built-in autoexecutor, which implements asynchronous programming solution almost perfectly with ES6 Promise

Class,extendsWhat is it? What does it do

An ES6 class can be thought of as just a syntactic sugar for the constructor of an ES5 generated instance object. It references the Java language and defines a class concept that makes object prototyping clearer and object instantiation more like object-oriented programming. Class classes can be inherited through extends

  • All methods defined internally by a class are not enumerable

  • ES6 classes must be operated with the new command, while ES5 constructors can be executed without new

  • ES6’s class class does not have variable promotion and must be defined before instantiation, unlike ES5 where constructors can be written after instantiation

  • ES5 inheritance essentially creates a subclass instance object, this, and then adds the parent class’s methods to this. ES6 has a completely different inheritance mechanism, essentially adding the properties and methods of the superclass instance object to this (so the super method must be called first), and then modifying this with the constructor of the subclass

What are module, export and import and what are their functions

Module, export and import are the design ideas and implementation schemes used by ES6 to unify the front-end modularization scheme. The emergence of export and import unified the implementation scheme of front-end modularization, integrated and standardized the browser/server side modularization method, used to replace the traditional AMD/CMD, requireJS, seaJS, commondJS and a series of different implementation schemes of front-end modules, so as to make the front-end modularization more unified and standardized. JS is also more capable of realizing large-scale application development.

Import introduces modules that are statically loaded (loaded at compile time) rather than dynamically loaded (loaded at run time).

Import import export The exported interface values are dynamically bound, that is, the real-time values inside the module can be obtained through the interface.

What programming optimizations or specifications are worth improving with ES6 in daily front-end code development

Var self = this; In the practice.

2. Let is commonly used to replace var command.

3, commonly used array/object structure assignment to name variables, clearer structure, more clear semantics, better readability.

4. In the case of long string multi-variable combination, using template string instead of string accumulation can achieve better effect and reading experience.

5. Replace the traditional constructor with a Class Class to generate instantiated objects.

6. In the development of large-scale applications, it is necessary to keep the modular development thinking of modules and distinguish the relations between modules, usually using import and export methods.