Ecmascript6 interview questions

1. Please describe let And const as well as var The difference between ？ And what is a temporary dead zone ？ What is variable Promotion ？

difference ：

let It has block level function Cannot repeat declaration It can be assigned repeatedly

const Has block level scope Cannot repeat declaration You can't repeat the assignment

var Global scope Can be repeated It can be assigned repeatedly

Temporary dead zone ：

I personally understand , The so-called temporary dead zone is used in the accounting scope let Variable declared , So this variable is not

Will be affected by external factors , I understand this as a temporary dead zone .

Variable Promotion ：

Personal understanding , The so-called variable promotion is to declare variables in advance , And then I'm doing the assignment

2. Please tell me what you think of es6 The understanding of template string ？ What are the characteristics of ?

Personal understanding , The so-called template string actually refers to when we splice strings , Is through the connector ”+” I came to pick it up , also

If you need to use escape characters for line breaks, etc , Otherwise you will report an error . This makes it very inconvenient for us to write . therefore ,ES6 We have introduced

Template string , Help us solve this problem , also , Use... Within the template string ${} Package variables , Is to change the declaration into

Quantity

Use mode: Back single quotes You can insert variables directly You can wrap lines without using escape symbols

3. Please tell us the difference between arrow function and ordinary function ？

Ordinary functions have been proposed for a long time , The arrow function is es6 Proposed , They are different in grammar , And between ordinary functions and

Arrow function they this Don't point the same way , In ordinary functions this Point to the event element if it is not bound ,this

Point to the window, Or in a closure this It also points to window, If the function is bound to an event , But there is no closure

package , This this Points to the currently invoked event object , Within arrow function this Point to the parent scope . Arrow functions cannot be used arguments, Ordinary functions can use ,arguments Is to obtain the parameters passed by a function in the form of a collection Count

Arrow functions cannot be instantiated as constructors , Ordinary functions can be instantiated

4. What are the default parameters of a function ？

The so-called default parameter of a function actually refers to when no parameter is transferred to the function parameter , You can specify a default for the formal parameters of a function Recognition

5, Please say Object.assign() What's the use of ?

Object.assign() Method is mainly used to copy the source object to the target object ,Object.assign() Method has two parameters , First of all A parameter representing the target object , The second parameter represents the source object .

Generally used in the project object.assign() Used to merge objects

6. Please tell me what you think of promise The understanding of the ？ And say promise How do you use ？

Personally, I am right promise The understanding is ,promise Is a solution to asynchronous programming , It is more than traditional callback functions plus events

Add rationality and strength , Now I use it promise In addition to using its asynchronous operations , Also used promise The callback was resolved in the project

Hell and so on .

promise There are two characteristics :

Objects are unaffected by the outside world , also promise There are three states , They are in progress , success , Or failure , Only different

Result of step operation , You can decide which state it is , No other operation can change this state , Once the status changes , It won't change , You can get that at any time ,promise There are only two ways to change the state of

can , Or success , Or failure .

If you want to use promise Must also be right promise instantiate , After instantiation promise There is a callback function inside , this

There are two arguments in a function , Namely resolve and reject, When our state changes , If it is successful, it will

adopt resolve Return the successful results , If you fail , So you can go through reject Return the wrong information , I

We can go through .then Method receives and returns a successful result , adopt catch Can accept the result of failure .

promise The common method is promise.all Method , It is mainly used to package multiple instances into a new instance , as well as

promise.rece() Method

So in the project, I usually use promise Come on api The interface is encapsulated , And some asynchronous operations , Will be used

promise

7. Please tell me what you think of es6 Modular understanding ?

I'm talking about this es6 Before modularization , I think it is necessary for me to introduce modularity first , Modular development is a kind of management

type ,= It's a way of production , It can also be understood as a solution , A module actually represents a module that implements a specific function

file , So here we can also understand it as a js File is a module , With the module, we can easily make

Use someone else's code , What features do you want , Just load what module , But module development needs a certain scheme , So later, slowly

It's born amd,cmd standard , however es6 It also provides us with a modular solution , Namely import and export, also

Module import and export

amd and cmd standard , Actually amd Specification is a specification on the browser side , and cmd Specification is a kind of specification for server-side modularization

Fan , Between amd The main representative of the specification is sea.js, however sea.js At present, we have eliminated , In the foreground development, use the modular open

Hair , We all use es6 Provide a modular approach , and cmd The specification is currently in node I used cmd standard

es6 The syntax of the module is import export

cmd The normal syntax is require("") module.export

8. Please say es5 And es6 The difference between ？

es5 In fact, it means ecmascript The fifth version

es6 In fact, it means ecmascript The sixth version

es6 stay es5 A lot of new features have been added on the basis of

9. Please tell us what you should pay attention to when using the arrow function ？

1. Arrow function does not have its own this object

（1） Ordinary functions ,this Points to the event source itself , If there is nesting inside ,this The direction of will be shifted

（2） Arrow function ,this Point to the object that called the function （this The direction of is static ）

2、 Arrow functions cannot be used as constructors , That is, the arrow function cannot be used new command , Otherwise, an error will be thrown

3、 Not available arguments object , The object does not exist inside the function , If you want to use , It can be used reset Parameters instead of

4、 Not to be used yield command , So the arrow function cannot be used as Generator function

10. Please say es6 What are the new features ？

How variables are declared , Namely let And const

Deconstruction and assignment of variables

Added some string and array methods , such as ： Template string ,includes Method ,startsWith Method ,endsWith Fang

Law , Or something else , Array methods have map Method ,filter Method ,foreach Method ,find Method ,findindex() Method

Added symbol type

Arrow function , Function parameter defaults

promise

modularization

class class

async await

set and map data structure

Regular expressions

11. Please tell me what you think of es6 class Class ？

So-called class Class is actually es5 Syntax sugar for constructors , The so-called syntax sugar is actually another way to write a constructor, and

has

 

12. Please say what is deep copy , What is shallow copy ？ And how to realize deep copy and shallow copy ？ use es6 How to realize deep copy ?

Before you know about shallow and deep copies , Let's get to know js Data type of
js There are two types of data
One is basic data type ： character string （String）、 Numbers (Number)、 Boolean (Boolean)、 In the air （Null）、 Undefined （Undefined）
One is the reference data type ： object (Object)、 Array (Array)、 function (Function)

Variables of basic types are stored in stack memory , Reference data types are placed in heap memory , The basic data type holds values , The reference data type usually stores the address of the object .
If we simply copy , Maybe it's just the address of the copied object , So this is the shallow copy , If the object is cloned , Changed the address of the reference object , So it's a deep copy

A shallow copy is a copy of a pointer to an object
Deep copy is the cloning of objects , And re point to a new address in the heap
Only reference data types have shallow and deep copies , The basic data type is assignment

The difference between a shallow copy and a deep copy is ： See if the copied sub object points to a new address in heap memory

The idea of implementing a deep copy ：

1. Check the type , Determine whether the type is a reference type , If yes, make a deep copy , Otherwise shallow copy
2. Using recursion
3. Check the ring , Determine whether the current reference points to itself , Avoid going into an endless loop
4. Need to ignore prototypes

Fast deep copy method

Get a new object by serializing and deserializing ,JSON.parse(JSON.stringify(a)); shortcoming ： Will ignore Function、Symbol、undefined, Cause attribute loss , If you know that the types of deep copy objects do not contain these types , This method is quite easy to use .
Third party tools ：jquery Provide a $.extend Can be used to make deep copies ,lodash Provided by function library _.cloneDeep It can also be used to make deep copies

13. Give me a few ES6 Yes String Common upgrade optimization for string type ?

Optimization part ：

ES6 Added string template , When splicing large strings , Use the backslash ( )` Instead of adding strings ,

Can keep all spaces and line breaks , Make string splicing look more intuitive , More elegant

Upgrade part ：

ES6 stay String The prototype added includes() Method , What is used to replace tradition can only be used indexOf Find the containing word

The method of symbol ( indexOf return -1 It's better to includes Method returns false More explicit , The meaning is clearer ),

In addition, it added startsWith() , endsWith(), padStart() , padEnd() , repeat() Other methods ,

It can be easily used to find , Completion string

14. Give me a few ES6 Yes Array Common upgrade and optimization of array type ？

ES6 stay Array The prototype added find() Method , What is used to replace tradition can only be used indexOf Find methods that contain array items , And

Repair the indexOf Can't find NaN Of bug([NaN].indexOf(NaN) === -1) . In addition, it added

copyWithin() , includes() , fill() , flat() Other methods , It can be used to find strings conveniently , completion , Conversion, etc

15.Map What is it? , What's the role ？

Map yes ES6 The introduction of a similar Object New data structure of , Map It can be understood as Object Superset , Break with The traditional key value pair form defines the object , Object's key No longer limited to strings , It can also be Object . More comprehensive description of The properties of the image

16.Set What is it? , What's the role ？

Set yes ES6 The introduction of a similar Array New data structure of , Set The members of an instance are similar to arrays item member , The difference is that Set The members of the instance are all unique , Not repeated . This feature can easily implement array de duplication

17.Proxy What is it? , What's the role ？

Proxy yes ES6 A new constructor , It can be understood as JS An agent of language , To change JS Some of the default language behaviors , Including interception default get/set Wait for the bottom method , bring JS More freedom of use , It can meet the needs of developers to the greatest extent .

For example, by intercepting objects get/set Method , You can easily customize what you want key perhaps value 

18.Class、extends What is it? , What's the role ？

ES6 Of class Can be seen as just a ES5 Generate the syntax sugar of the instance object's constructor .

It refers to java Language , Definition The concept of a class , Make the object prototype more clear , Object instantiation is more like object-oriented programming .

Class Class can pass through extends Implementation inheritance . It and ES5 The difference between constructors

19. Often in front-end code development , What are worth using ES6 To improve programming optimization or specification ？

Use arrow function instead of var self = this ; How to do it .

Commonly used let replace var command .

Common arrays / Object to name variables , Structure is clearer , The meaning is clearer , Better readability

In the case of long string multivariable combination , Replace string accumulation with template string , Can achieve better results and reading experience

use Class Class to replace the traditional constructor , The next generation is the instantiation object

In large application development , To maintain module Modular development thinking , Distinguish the relationship between modules , Commonly used import 、

export Method .

20. What is? Babel?

Babel It's a JS compiler , Bring your own set ES6 Grammar Converter , Used to transform JS Code .

These converters allow developers to use the latest in advance JS grammar (ES6/ES7), Instead of waiting for the browser to be fully compatible

Babel Only new is converted by default JS syntax (syntax), Instead of converting new ones API.