2017 first wave of JavaScript front-end questions

Interview questions by type, mainly related to "technology" and "non-technical" two categories, today we are mainly talking about "technical", in this large category of sub-categories involved are:

• Mobile & PC-side layout classes
• JavaScript Core base class
• Derived framework Classes
• Project Application Class

The four categories of questions, if the frequency of occurrence to divide, then interview 100% will ask questions: "Mobile end &pc-End layout class, JavaScript core base class." This time we chose these two kinds of more difficult "JavaScript core Basic Class" interview questions, to give you an analysis and answers, for everyone to prepare before the interview.

Special Note:

If you are stuck in the interview by these questions, you have to face up to their knowledge of the short board, and the heart of the city to study diligently, until the learning! After all, want to become a qualified "web front-end engineer", master the basic knowledge of the following JavaScript core, only to bear the word "qualified", or "counterfeit" Oh ~

So, let's take a look at the 15 JavaScript core Basic class interview questions that the wonderful JS lecturers have compiled for you:

What data types does the typeof of JavaScript return? Analysis:

This problem test is the JS basic skills, in the wonderful classroom JS Basic course has to say, as long as the typeof operator is understood, there is not much difficulty. Specific in the answer, then combine the theoretical knowledge and the actual situation in the coding process to answer. In addition, taking into account the rigor of the interview, Miao Taste the new type of ES2015 also incorporated into the reply, for your reference.

Suggested reply:

First, there are two big data types in JavaScript:

1. Base type
2. Reference type

• The underlying types are: number, String, Boolean, Null, Undefined, Symbol (new type in the type bit ES2015)
• Reference types include: the Object typeof operator returns the type information as a string, and it is important to note that there is a slight difference between the type returned by typeof and the type defined by the JavaScript. typeof returns seven possible values: "Number", "string", "Boolean", "Object", "symbol", "function", and "undefined".

Second, please write the following results of the operation:

alert(typeof null);alert(typeof undefined);alert(typeof NaN);alert(NaN == undefined);alert(NaN == NaN);var str = "123abc";alert(typeof str++);alert(str);

Analysis:

This problem and "topic one" is a chain buckle, when "topic one" after the answer, through the question again to strengthen the operator and data type of basic skills.

Suggested reply:

The main point is to examine the types of typeof judgment values, and their output results are:

alert(typeof null);  // objectalert(typeof undefined);  // undefinedalert(typeof NaN);  // numberalert(NaN == undefined);  // falsealert(NaN == NaN);  // falsevar str = "123abc";alert(typeof str++);  // numberalert(str);  // NaN

Iii. examples of at least 3 coercion type conversions and 2 types of implicit type conversions? Analysis:

Type conversion may sound a bit broad, but this problem is clearly given the scope of the answer, for the students who have heard the JS entity class, this is almost a sub-problem, because the class lecturer on the explicit explanation of the type of conversion of several different forms, if you have to make notes ~

Suggested reply:

1. Coercion type conversion: explicitly call built-in functions, forcing a value of one type to be converted to another type. Forced type conversions include: Boolean, Number, String, parseint, parsefloat

2. Implicit type conversion: When using arithmetic operators, the data types on either side of the operator can be arbitrary, for example, a string can be added to a number. It is possible to perform operations between different data types because the JavaScript engine silently casts them implicitly before the operation. Implicit type conversions include: +, –, = =,!

What does the JavaScript event flow model have? Analysis:

Event flow Model This knowledge point is explained in detail in the chapter on event events in the middle of the wonderful taste, if you have forgotten friends, then go to the video of this stage. Aside from: The General pure Theory of Knowledge point of learning boring (good taste physical class students are also so), but the advantages of the theory is that when encountering problems, can quickly determine the principle of error, so that can accurately and quickly find the problem and accurate repair, you can make redundant code to the minimum, can no longer be wrong after the adoption of like luck "Try Dafa" to repair ~

Suggested reply:

The event flow describes the order in which events are received from the page. The DOM structure is a tree structure, when an element in the page triggers an event, the event starts from the topmost window object, propagates down to the target element, and the ancestor node of the path triggers the corresponding event, if the event handler function is bound to the current node. The function executes when the event reaches the target element and executes the binding function (if there is a binding), the event propagates up to the window element, and the ancestor node of the path triggers the corresponding event (if the event handler is bound)

--Does the word have a good wound? Who let the first lecture drawing explanation, you do not listen to the lecture but in there dozing? ^_^ Continue ~

The event stream consists of three phases:

• Event Capture Phase
• In the target phase
• Event bubbling Phase

1. Event Capture Phase: The event is started by the top-level object and then propagated downward until the target element;
2. At the target stage: on the element that binds the event;
3. Event bubbling Stage: The event is received first by the specific element and then propagated upward until the element is not specific;

V. What are BOM objects, listing window objects? Analysis:

Remind again: This is the good Taste JS class BOM course notes. Back down, can't get out of the wall ...

Suggested reply:

1. The Window object is the topmost object of JS, and the other BOM objects are the properties of the Window object;
2. Location object, browser current URL information;
3. Navigator object, the browser itself information;
4. Screens object, client screen information;
5. History object, browser access to historical information;

Six, please briefly describe the AJAX and basic steps? Analysis:

If only AJAX is the basic requirement, then it is one of the interview plus points to understand the details of the instructor class. For this pure concept problem, it is recommended to write the original AJAX function before the packaging process, must be on the basis of understanding on the back, will be in the interview with good play.

Suggested reply:

• A brief description of Ajax:ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), is a web development technique for creating interactive Web applications. AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.

Basic AJAX steps:

1. Initializing an Ajax object
2. Connect address, Prepare data
3. Send Request
4. Receiving data (receiving, not yet completed)
5. Receive Data completion

//初始化ajax对象var xhr = new XMLHttpRequest();//连接地址，准备数据xhr.open(“方式”,”地址”,是否为异步);//接收数据完成触发的事件xhr.onload =function(){}//发送数据xhr.send();

Seven, HTTP status messages 200 302 304 403 404 500 What are the respective representations? Analysis:

When listening to the instructor on the AJAX course, take a close look at what the instructor has to tell you about the meaning of each number and the possible scenarios. What if the interviewer is not just letting you recite, but giving you a scene to ask questions? Therefore, "with understanding to Remember" is the best way to deal with conceptual problems, in addition to look at the extension of knowledge points, but also beneficial harmless.

Suggested reply:

1. 200: The request was successful, and the desired response header or data body will be returned with this response.
2. 302: The requested resource temporarily responds to the request from a different URI. Because such redirects are temporary, the client should continue to send subsequent requests to the original address. This response is cacheable only if specified in Cache-control or Expires.
3. 304: The server should return this status code if the client sends a conditional GET request and the request has been allowed, and the contents of the document (since the last access or condition of the request) have not changed. The 304 response suppresses the inclusion of the message body, so it always ends with the first empty line after the message header.
4. 403: The server has understood the request, but refuses to execute it.
5. 404: The request failed and the requested resource was not found on the server.
6. 500: The server encountered an unexpected condition, which caused it to be unable to complete the processing of the request. In general, this problem occurs when the source code on the server side is wrong.

Eight, synchronous and asynchronous differences? Analysis:

It's a concept problem, and it's easy to doze off in class, right? Take a look at the "suggested reply" below, perhaps a little different from the content of your class, because the lecturers have re-changed the metaphor to give a faint, in-depth knowledge, described in the form of an example. It is always pleasant to know the new experience, so how much can you bring to the memory of this knowledge? It is necessary to see everyone in the wonderful taste of learning during the heart to go.

Suggested reply:

• It is not a matter of first synchronizing asynchronously to block non-blocking. Synchronous asynchronous is mainly after the thing is done, how to deal with, or concern about is a message communication mechanism.
• In the case of synchronization, it is up to the processing message to wait for the message to be triggered;
• And the asynchronous case is triggered by the mechanism to notify the processing of the message;

For example, in the good taste class, you ask the teacher a question, this question may take a little time to think, this time the teacher may:

1. Think, think, ..., all right, there's an answer.
2. This problem takes a little time, you do something else, and so I think well, to find you.

The first is synchronization, and the second is asynchronous. So synchronous asynchrony can be said to be the request Towners said, the requested person uses what way to inform the processing results.

• Blocking is non-blocking, primarily for the requestor.
• Block: Make a request to wait for the result to return, and then handle the subsequent events;
• Non-blocking: The request does not wait for the result to return, you can continue to do the following things;

For example, or the previous example:

1. Teachers in the use of synchronous thinking, you can quietly wait for the teacher to give the answer, but also to do their own things while waiting for the teacher's answer, of course, this time you need to pay attention to whether the teacher has been thinking well, in the program needs to be polled. Cookbook (ˉεˉ Cookbook)
2. Teachers use asynchronous way, this time the teacher told you can do something else, good to inform you, then you can do something else, and then listen to events on the line, of course, you can also axis, I do not do anything else! I will be waiting for the teacher to "think good" incident occurred.

So synchronization can be either blocked or non-blocking, and so is asynchronous.

Nine, get and post differences, when to use post? Analysis:

The idea that the concept of data interaction is more likely to be asked during an interview is also a reflection of its practical value at work. So nothing else, learn well, good back!

Suggested reply:

The difference between get and post:

Get: Commonly used for querying data, using URL pass parameters, because the browser has a limit on the length of the address bar, so the number of messages sent using Get method is limited, while the browser will record (history, cache) will retain the requested address information, including the data behind the address. Get can only send data in normal format (URL encoded format).

Post: Generally used to send data to the server, the size of the data sent is theoretically unlimited, the browser will cache the record address, but will not record the post submitted data. Post can send strings in plain text, URL-encoded format, and binary format, in various forms.

Use the POST request in the following situations:

1. A request for the purpose of submission (like semantics, get represents a request, post represents a commit);
2. Send private class data (user name, password) (because the browser caches the recording feature);
3. Send large amounts of data to the server (data size limit differences);
4. When uploading a file picture (data type difference);

X. Limitations of AJAX? Analysis:

Just above the problem also analyzed the principle of AJAX steps what, and now come up with a limitation? If you just know how to use it, it should be a face to see this problem ...

Suggested reply:

1. AJAX does not support the browser back button.
2. Security issues AJAX exposes the details of interacting with the server.
3. Support for search engines is weaker. Will not execute your JS script, will only manipulate the source code of your Web page;
4. There are certain restrictions on cross-domain requests. Solution: JSONP;

What did the Xi. new operator do? Analysis:

Principle concept problem, listen to the class, take notes, well understand ... La La la ~

Suggested reply:

When the constructor is called using the new operator, the function actually goes through the following steps:

1. Create a new object;
2. Point the context (scope) object in the function to this object;
3. Execute code to add a property or method to a new object through this;
4. Returns the object;

12. What is the difference between null and undefined? Analysis:

The classic concept problem, to answer well really need a solid foundation.

Suggested reply:

• The null:null represents a null value, which is 0 when converted to a value;

• undefined:undefined means "missing value", that is, there should be a value here, but there is no definition.

1. When a variable is declared but not assigned, it is equal to undefined.
2. The undefined object does not have an assigned property, and the value of this property is.
3. When the function does not return a value, undefined is returned by default.

13, JavaScript prototype, prototype chain? What are the characteristics? Analysis:

No analysis, all the wonderful taste of physical classes in class to talk about things ... Sunglass (▔,▔) deny

Suggested reply:

JavaScript Prototypes: Each function is created with a property of prototype, whose value is an object. The purpose of this object is to share the properties and methods on the prototype when the instance is created using the function.

Prototype chain: In JavaScript, each object has an internal link (proto) to its prototype (prototype) object. The prototype object has its own prototype until the prototype of an object is null (i.e. no more prototypes are pointing). This first-level chain structure is called the prototype chain (prototype chain). When looking up a property of an object, JavaScript will traverse the prototype chain up until it finds the property of the given name, and when the lookup reaches the top of the prototype chain (OBJECT.PROTOTYPE), the specified property is still not found, and the undefined is returned.

14, the realization of an array of chaotic sequence analysis:

This problem examines the array's sort () method, because it is disorderly order, so it is necessary to use the math.random () to generate random numbers, disrupting the ordering rule! --Don't blame me for talking, do you say in the physical classes?

Suggested reply:

Before writing the code, introduce the implementation principle before you start writing code:

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];var sign = 1; a.sort(function(a, b) {    return Math.random() - 0.5});

To implement a function clone (), you can copy values for 5 major data types in JavaScript, including number, String, Object, Array, Boolean. Analysis:

This topic examines the following points of knowledge:

1. Use typeof to judge the worthwhile type;
2. Use toString to distinguish between arrays and objects;
3. The use of recursive functions;

Suggested reply:

function clone(obj) {    //判断是对象，就进行循环复制    if (typeof obj === ‘object‘ && typeof obj !== ‘null‘) {        // 区分是数组还是对象，创建空的数组或对象        var o = Object.prototype.toString.call(obj).slice(8, -1) === "Array" ? [] : {};        for (var k in obj) {            // 如果属性对应的值为对象，则递归复制            if(typeof obj[k] === ‘object‘ && typeof obj[k] !== ‘null‘){                o[k] = clone(obj[k])            }else{                o[k] = obj[k];            }        }    }else{ //不为对象，直接把值返回        return obj;    }    return o;}

2017 first wave of JavaScript front-end questions