What features are added in es6

1. Added let const keyword

1. The difference between let var const

• let is code block valid var is globally valid

• let can't be declared repeatedly var can be declared multiple times

• let does not exist variable promotion var exists variable promotion

• const stores simple data types that store constants

2. Newly added destructuring assignment

Destructuring assignment performs pattern matching on arrays or objects, and then assigns values ​​to variables in it.

let [a,b]=[1,2]

let {user}={user:“xiaosi”}

3. Added arrow function

The difference between arrow function and ordinary function

1. Ordinary functions have variable promotion, arrow functions do not

1. The this of the ordinary function points to whoever calls it, and the arrow function points to whoever it is defined

1. Ordinary functions can be used as constructors, but arrow functions cannot

1. Arrow functions have no arguments, to accept all parameters use...rest

4. The data type of js

1. simple data type

Number 、 String 、 Boolean 、 null 、undefined 、Symbol 

1. reference data type

Object Array Function Date RegExp

5. Data type judgment (accurately know the shortcomings of each data type judgment)

1. typeof can judge the basic data type, return the basic data type lowercase string form except null, use typeof to judge null return Object

1. instanceof can judge the reference data type. It is no problem to judge that A is an instance of B normally, but all objects of reference data type can be judged by instanceof to be instances of Object.

1. The constructor constructor can judge any data type except undefined and null, and the page solves the problem of instanceof

1. The perfect solution Object.prototype.toString.call() returns [Object data type]

6. ES6 adds modularity

According to the functional encapsulation module is imported through import and then exported through export

You can use export to export or use export default to export

We use import to import

The difference between export and export defualt

1. export can export multiple properties or methods, which need to be enclosed with {} and accepted with {} when accepting with import

1. The export default is thrown as a whole, and only one is accepted when accepting

7、promise

Promise is a way of es6 to deal with asynchrony. Its essence is an object. The parameter of promise is a callback. The callback has two parameters: resolve success callback reject failure callback. It has three states: the initial state pending, fulfilled, and rejected. A state change has only two outcomes: completion or failure.

There are two ways for promise to handle errors. The first is to pass two callbacks in then, and the second callback is an error callback.

The second way is to achieve through the catch method

Promise's commonly used APIs are then () to handle the callback function catch () to catch exceptions, and there are two commonly used static methods

Promise.all() processes multiple promise requests together, and all requests succeed only if they succeed.

Promise.race() handles multiple promise requests together, and if one succeeds, it will succeed

In es7, async can be used to achieve asynchronous processing, and there is also a keyword await to realize the synchronization of asynchronous functions

8. Add class keyword

The class keyword is the syntactic sugar of the es5 constructor + prototype mode to create objects. The way to create a class class class name {constructor and method} implements inheritance through the extends keyword.

Interview questions to be recorded:

1. js data type

1. js data type judgment

1. The difference between arrow function and ordinary function

1. The difference between let const var

1. promise

9. What features are added in es6?

1. es6 has added promise (title) to say what is promise

1. es6 has added modularity. What is modularity?

1. The new class keyword needs to be explained

1. Arrow functions have been added, let’s talk about the difference between arrow functions and ordinary functions

1. New destructuring assignment needs to explain what is destructuring assignment

1. The new let const keyword needs to say the difference between let const var

1. Added simple data type symbol

10. Scope and scope chain

Scope: It is the scope of use of the variable. The scope in js is divided into global and local

The scope of js is divided into global scope and local scope. Data in the local scope cannot be accessed in the global scope. To access variables in the local scope, if there is one in the current scope, it can be directly accessed. If not, then access it in the upper scope. If the upper scope does not exist, continue to search until you find the global window scope. Without returning undefined, access to the entire scope forms a scope chain

11. Talk about closures

concept

A closure is a function that has access to variables in the scope of another function. Can be understood as (a function that can read variables in the scope of another function)

characteristic

1: Function set of functions

2: Internal functions can directly access internal variables or parameters of external functions

3: Variables or parameters will not be recycled by the garbage collection mechanism

definition

Plain Text

<script> //The first way of definition function outer(){ var num=10; function inner(){ return num+=10 } return inner() } //call console.log(outer()) //second Two ways to define function out(){ var num=10; return inner=function(){ return num+=10 } } // call console.log(out()())</script>

Advantages and disadvantages

advantage:

1: Variables reside in memory for a long time

2: Avoid pollution of global variables

3: Existence of private members

shortcoming:

Improper use of resident memory to increase memory usage can cause memory leaks.

12. Prototype and prototype chain

Prototype: Each object has a prototype property that can mount the properties and methods to be extended, and the properties and methods mounted on the prototype can be called on any instance of this object.

When an object calls a property/method that does not exist in itself, it will go to the parent class object associated with the prototype to find it. If it cannot find it, continue to search for the object associated with the parent class until it finds the properties and methods of the Object. Find it until the call , can not find return undefined

13. Shallow copy and deep copy of object

Since the data of the reference data type is stored in the heap space, the reference address of the data is stored in the stack space.

The shallow copy of the object is to copy the address in the stack space, and the two addresses point to the same data

Shallow copy can use Object.assign() to realize deep copy can use JSON.stringify() to convert to json string copy first, and then convert back through JSON.parse()

14. Talk about the event mechanism of js

There are two event mechanisms in js, one is the bubbling event mechanism proposed by ie and the other is the capture event mechanism proposed by Netscape

The bubbling event mechanism is the direct element that triggers the event first, and then spreads outward like bubbling. The capture type is that the event is executed from the outside to the inside. The third parameter of the event listener in js addEventListener is false by default, and the bubble is true to capture

We can achieve this through event.stopPropagation()

15. The principle of rem layout

The size of 1rem is the value of the font-size of the root element <html>. By setting the size of the font-size of the root element <html>, the font size, element width and height, inner and outer margins, etc. in the entire html document can be controlled.

16. How to implement responsive layout

Responsive layout allows the website to adapt to different resolutions and different mobile terminals at the same time, allowing customers to have a better experience

Solutions for responsive layout implementation:

1. percentage layout

1. media query

1. rem layout

1. vw vh layout

1. flex flex box layout

17. The difference between $route and $router

$route is a route object for jumping. Each route will have a $route object, which is a local object, and can obtain the corresponding name, path, params, query, etc.

$router is an object of VueRouter. A router instance object is obtained through Vue.use(VueRouter) and Vue constructor. This object is a global object, which contains all routes, including many key objects and properties .

18. The difference between params and query parameters

1. The parameter passed by params is part of the route, so the transfer must add the parameter value to transfer the query parameter and the routing configuration has nothing to do

1. The acquisition method is different. query this.$route.query. The parameter name params is this.$route.params. The parameter name

19. The difference between mpa and spa

mpa multi-page application

A system consists of multiple pages, and the switching between pages is realized by the herf attribute of the a tag and the location.href of the script

spa is a single page application

A system is carried by a page, and data switching is realized by routing

Advantages and disadvantages of mpa and spa:

• For the switch, the switch of the route is definitely smoother than the switch of the page, so the switch of the spa will be better

• The first screen of spa loads slowly, while the first screen of mpa loads quickly