A collection of 20 questions you must Know to understand ES6

A collection of 20 questions you must Know to understand ES6

20 questions from es6

1. What is ES6 and why should you study it?

Answer: ES6 is a new generation of JS language standard. It has upgraded and optimized the core content of JS language, standardized JS usage standard, and added JS native methods, making JS use more standard, more elegant, and more suitable for large-scale application development. Learning ES6 is the only way to become a professional front end regular army.

2. What is the difference between ES5, ES6 and ES2015?

A: ES2015 refers to the new generation of JS language standards released in 2015. ES6 refers to the next generation of JS language standards, including ES2015, ES2016, ES2017, and ES2018. Currently, ES2015 is equivalent to ES6 by default in most scenarios. ES5 generally refers to the previous generation of language standards. ES2015 is the time demarcation between ES5 and ES6.

3. What is Babel and what does it do?

A: Babel is an ES6 transcoder that converts ES6 code into ES5 code for compatibility with platforms that don’t yet support ES6.

4. What is the use of “let”?

A: Before ES6, var was the only way to declare variables. Var declaration was not reasonable, precisely because ES5 did not have block-level scope, which brought a lot of difficult problems, such as for loop var variable leakage, variable overwriting and so on. Variables declared by let have their own block-level scope and fix variable promotion problems caused by var declarations.

5. What are some common upgrades ES6 makes to the String type?

• Optimization part:

In ES6, a string template is added. When concatenating large strings, backslash (‘) is used instead of adding strings. All Spaces and newlines are preserved, making string concatenation more intuitive and elegant.

• Upgrade part:

ES6 adds an includes() method to the String prototype. This method replaces the traditional method of using only indexOf to find characters. In addition, startsWith(), endsWith(), padStart(),padEnd(),repeat() and other methods are added, which can be conveniently used to find and complete strings.

6. What are some common upgrades ES6 does to Array types?

• Array destruct assignment.

ES6 can directly assign variables in the form of let [a,b,c] = [1,2,3]. When declaring many variables, it does not need to write a lot of let(var). In addition, the mapping relationship is clear, and default values are supported.

• Extend the operator.

New ES6 extension operators (…) (Important) can easily convert arrays and loose sequences into each other, can replace arguments object and apply method, and can easily obtain the set of parameters when the number of parameters is unknown. (Especially in ES5, arguments is not a real array, but an array-like object, but the inversion of the extension operator can return a real array). The extension operator also makes it easy to copy and deconstruct arrays (let a = [2,3,4]; Let b = […a])

7. Common upgrade optimization for Number type by ES6?

• Optimization part:

ES6 has added isFinite(), an isNaN() method to the Number prototype to replace the traditional global isFinite() method, which detects whether a value isFinite and NaN. The isFinite() and isNaN() methods of ES5 will first convert non-numeric parameters to Number. This is not reasonable and will cause isNaN(‘NaN’) === true. But isNaN says this isNaN. Number.isfinite () and number.isnan () do not have this problem (number.isnan (‘NaN’) === false). (isFinite()

• 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.

8. Common upgrade optimizations for ES6 Object types? (important)

• Optimization part:

A. Object attribute variable declaration.ES6 can declare object properties or methods directly as variables. It is more concise, convenient and semantic than traditional key-value pair formal declaration.

The benefits of this approach are most obvious when objects are destructively assigned (see Optimizations section B.) or modules output variables:

You can see that declaring properties as property variables looks much cleaner. Methods can also be written succinctly:

ES6 objects can also be destructively assigned to variables in the same way arrays are destructively assigned:

let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'};

C. Extension operators for objects (…) . The use of extension operators for ES6 objects is not fundamentally different from the use of array extension operators, since arrays are just special objects. One of the most common and useful uses of object extension operators is to easily extract all or part of the traversable properties of a target object to merge and decompose the object.

D. Super keyword.ES6 added a new super keyword like this to the Class. Unlike this, which always points to the object of the current function, the super keyword always points to the prototype object of the object of the current function

• Upgrade parts

A. ES6 added is() method to the Object prototype to make an equal comparison between two target objects to improve the ‘===’ method. Object. Is fixed a minor bug where NaN === NaN //false in the ‘=== =’ method was actually unreasonable. (Object.is(NaN, NaN) // true)

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

Note: The assign object only merges its own attributes in source1 and source2, but does not merge inherited attributes in source1 and source2, nor does it merge non-enumerable attributes. The get and set attributes cannot be copied correctly. Take the value of return.

C. 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.

D. ES6 adds getPrototypeOf() and setPrototypeOf() methods to get or set the prototype of the current Object. The significance of this method is that, in ES5, the prototype pair is obtained and set through the proto attribute. However, the proto attribute is not explicitly specified in the ES specification, but is “privately” added by the browser manufacturers. It is only used by default because of its wide application scope. 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.

D. ES6 also added object.keys (), object.values (), object.entries () methods to the Object prototype, which are used to obtain all keys, all values and all key-value pairs arrays of objects.

9. What is the common upgrade optimization for ES6 Function type? (important)

• Optimization part:

A. Arrow function (core) Arrow function is one of the upgrade items of ES6 core, arrow function does not have its own this, which changes the most difficult to understand this operation mechanism of JS functions in the past. Main optimization points:

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.

The arrow function does not have its own this, so there is no argument object inside the arrow function. (You can use the extension operator instead.)

B. Function default assignment. Before ES6, function parameters could not be given default values and could only be implemented inside functions by workarounds. ES6 does default function assignment in a cleaner and more explicit way.

function es6Fuc (x, y = 'default') {
 console.log(x, y);
}
es6Fuc(4) // 4, default
Copy the code

• Upgrade part:

ES6 adds the double colon operators to replace bind, call, and apply.

foo::bar;
/ / is equivalent tobar.bind(foo); foo::bar(... arguments);/ / is equivalent to
bar.apply(foo, arguments);
Copy the code

10. What is the Symbol?

A: Symbol is the seventh primitive data type introduced in ES6. All values generated by Symbol() are unique, which can fundamentally solve the problem of overwriting attribute names caused by too many object attributes. The Symbol() attribute in the object cannot be used for… In traversal, but it’s not private either.

11. What is a Set and what does it do?

A: Set is a new data structure introduced in ES6 that is similar to Array. The members of the Set instance are similar to the members of the Array item, except that the members of the Set instance are unique. This feature makes array de-duplication easy.

12. What is Map and what does it do?

A: Map is a new data structure similar to Object introduced in ES6. It can be understood as a superset of Object. Instead of defining objects in the form of traditional key-value pairs, the key of objects is no longer limited to strings, but can also be objects. Can describe the properties of the object more comprehensively

13. What is Proxy and what does it do?

A: 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. For example, by intercepting the get/set method of an object, you can easily customize the key or value you want. As you can see in the example below, you can define any key of myOwnObj as the function you want.

14.Reflect what it is?

A: 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.

15. What are promises and what do they do?

A: Promise is a new object introduced in ES6. Its main purpose is to solve the “callback hell” created by the callback mechanism in ASYNCHRONOUS JS. It’s not a breakthrough API, but it encapsulates the asynchronous callback form, making it more elegant to write, more readable, and chainable to call.

16. What is an Iterator and what does it do? (important)

A: Iterator is an important concept in ES6. It is not an object or 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.

Just as JavaScript is a concrete implementation of the ECMAScript standard, the concrete implementation of the Iterator standard is the Iterator traversator. The Iterator standard states that all deployable keys are [symbol. Iterator] and [Symbol. Iterator] values are standard Iterator interface functions. This function must return an object that contains a next method and that returns an Iterator containing value/done). The Iterator returned after next() is an Iterator.

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.

17. What is a Generator function and what does it do?

A: If JavaScript is a concrete implementation of the ECMAScript standard and the Iterator Iterator is a concrete implementation of Iterator, then Generator functions are a concrete implementation of the Iterator interface.

Execution of a Generator returns an iterator object. Each yield in a Generator is equivalent to the next() method of the iterator object, and the behavior of the Generator function can be changed by passing in a custom value through the next(value) method.

Generator functions can be combined with Thunk functions for asynchronous programming and control flow management with ease and elegance.

18. What is async function and what does it do?

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

19. What is Class and extends and what do they do?

A: 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. This differs from the ES5 constructor:

A. All methods defined internally by a class are not enumerable.

The class of B. es6 must be operated with the new command, while the constructors of ES5 can be executed without new.

C. Es6 class does not have variable promotion and must be defined before instantiation, unlike ES5 where constructors can be written after instantiation.

D. es5 creates an instance of this, and then adds methods from its parent class 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.

20. In daily front-end code development, what programming optimizations or specifications are worth improving with ES6?

1. Var self = this; In the practice.

2. Let is often used instead of var.

3. Commonly used array/object structure assignment to name variables, the structure is clearer, more explicit 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, using import and export methods.