Front-end common interview questions (1) ---- front end
1. NaN meaning :
not a number, number type. Verify: isNaN
2. == === and the difference between :
On behalf of the same == === strict on behalf of the same.
Double equal sign ==:
(1) If the two values are the same type, then compared three equal sign (===) of
(2) If two different value types, there may be equal, you need to be cast in the comparison according to the following rules:
1) If a is null, a is undefined, then the equal
2) If a string, a numerical value is then compared to the value after converting string
=== Third number:
(1) If the types are different, they will not equal
(2) If two values are, and the same value, equal; if at least one of which is a NaN, then unequal. (Determines whether a value is NaN, only use isNaN () to determine)
(3) If the two are strings of characters for each position are the same, then equal to, or not equal.
(4) If the two values are true, or false, then equal
(5) If both values refer to the same object or function, then equal to, or not equal
(6) If the two values are null, or undefined, then equal
3.null and undefined difference:
null: Null type, for "null", representative of a null object pointer, to give the typeof "Object", it can be considered that it is a special object value.
undefined: Undefined type, when a declaration of a variable is not initialized, get is undefined.
4.typeof bar === "object" verification of what the risk:
null is also the object, if the value is null will be a problem!
JQ解决方法：(bar !== null) && (typeof bar === "object") && (! $.isArray(bar))
5.get and post difference:
(1) .url visibility: GET, the parameters url seen post, url parameter is not visible
get the requested data on the url, i.e., the head of the HTTP protocol, the format: URL to divide and transmit data to & parameter connected between; HTTP POST data in the packet body (requrest body)?
(2) the size of the transmitted data:.
GET typically does not exceed the transmission data size of 4K-2K
POST request data is set according to the size of the transmission php.ini configuration file may be infinite
(3) data transmission:.
GET, the parameters passed by concatenating URL
POST, the parameters transmitted through the body member
(4) back page of reaction:
when get back the requested page does not have an impact
upon request post the page back, re-submit the request
(5) of the cache:.
GET request is cached
post request can not be cached
(6) Safety:
not safe, in principle, certainly better than get security post, after all, is not visible url transmission parameters, but also can not stop some people get caught in that busy right play, browser cache will get requested data. Safety personally think it is not much different, the gentleman is not anti-anti-villain is the truth. To encrypt the parameters passed, in fact, they are the same.
(7) .GET url requests only encoding, and supports a variety of encoding POST
(8) .GET request parameters will be retained in full in the browser history, and the POST parameters are not retained
(9) .GET only accepts data type of the parameter ASCII characters, but there is no limit POST
What is the use 6.use strict:
<script>
"use strict";
console.log("这是严格模式。");
</script> The establishment of the advantages of "strict mode":
- Eliminate unreasonable Javascript syntax, not rigorous place, reducing some of the bizarre behavior;
- Remove some of the insecurity code running, to ensure the safe operation of the code;
- Improve compiler efficiency, increase the operating speed;
- Pave the way for future new version of Javascript.
Note: After testing IE6,7,8,9 not support strict mode.
Cons:
now the site of the JS will compress some files with strict mode, while others do not. Then these documents could have been strict mode, after the merge, the string went to the middle of the file, not only did not indicate strict mode, but after compression wasted bytes.
7. What is the document object, what is the window object. the difference?
It is a document object properties window of.
Window object represents a browser to open the window.
If the document contains a frame (frame or iframe tag), the browser will be as HTML to create a document window object and create an additional window object for each frame.
All of the global functions and objects belong Window object properties and methods.
document read-only reference to the Document object.
Difference:
1, window refers to the form. document refers to the page. document is a child window object.
2, the user can not change document.location (because this is the location of the current display of the document). However, you can change window.location (using other documents to replace the current document) window.location itself is a target, but not the object document.location
8. prototype chain: constructor prototype object, an object instance of the three relationships:
[Image dump the chain fails, the source station may have security chain mechanism, it is recommended to save the picture down uploaded directly (img-SVBgy4Ar-1570936189664) (d: \ W519L \ Desktop \ 8c2dd16ea9e6ae9fa0b01128045ce3a2.jpg)]
9.apply and call the relationship:
/*apply()方法*/
function.apply(thisObj[, argArray])
/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);Difference: call and apply is to call a method of an object, to replace the current object with another object. The difference is that the transmission parameters, apply a maximum of only two parameters - and a new array of this object argArray, if the array will not error TypeError arg;
10. The method of alternative picture what?
canvas drawing, FontAwesome icon library.
11.MVC, MVVM framework principle:
MVC: The entire front page into View, Controller, Modal, change the view, through Controller (control) the response to the incoming Model (data sources), the above change View data by the data source.
MVVM: refer to View, Model, View-Model, View by View-Model of DOM Listeners binding events to the Model, and Model View is to manage the data through the Data Bindings, View-Model which play a connecting bridge role.
1, with the view to achieve the separation of the data
2, the data is driven by the view, the developer need only concern the data changes, DOM operations are encapsulated.
12. Enter the URL to the page from rendering what happened?
1. Network Communications
Address resolution, parse out the domain name dns resolution, a three-way handshake tcp find the server, the server and the client (browser) by ip address and arp, establish the link. The browser to send data, waiting for the server, the server processes the request and requests accordingly. Browser receives the request, get html code. ↓
2. page rendering
The basic process
1. Parsing the HTML file, create a DOM tree
2. Parse CSS, CSS object model form
3. The CSS and DOM merger, to build the render tree (renderingtree)
4. Layout and Drawing
13. What methods have to create an object?
1, the factory pattern
2, model constructor
3, the prototype model
What 14.new an instance of an object occur:
1, creating a new object
2, the scope of the constructor assigns a new object (the this)
. 3, the implementation of the constructor code (added to the new object attribute)
4 returns to the object.
15. The basic data types and reference data types What is the difference?
Basic data types : Number The, String, Boolean, Null, Undefined, the Symbol (for ES6), these types can be directly stored in the actual value of the operating variable.
Reference data types : Object (in JS addition to the basic data types are objects, a data object, the object is a function, the object is a regular expression)
the difference:
1, when you declare a variable memory allocation different
2, different memory allocation brings different access mechanisms
3, different variables when copying
4, various parameters passed (copy argument to the process parameter)
16. The difference between the function and a normal function of the arrow?
Arrow function:
let fun = () => {
console.log('lalalala');
}Normal function:
function fun() {
console.log('lalla');
}Arrow anonymous function is a function, not as a constructor, you can not use new
- this function is always an arrow pointing to the context of this, any method can not change its point, such as call (), bind (), apply ()
- this point to call it a normal function of that object
17. The array of several methods deduplication
1.定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。
2.先排序在去重，先将原数组排序，在与相邻的进行比较，如果不同则存入新数组
3.利用对象的属性去重（推荐），每次取出原数组的元素，然后再对象中访问这个属性，如果存在就说明重复
4.利用下标查询
5、利用ES6的set
Set数据结构，它类似于数组，其成员的值都是唯一的。利用Array.from将Set结构转换成数组18. The benefits of using a set of ES6:
Easier: to re-array, union, intersection, difference.
19.for cycle what can be replaced:
// reduce写法
sum = arr.reduce(function (prev, cur, index, arr) {
return prev + cur;
});
console.log(sum);
//forEach写法
sports.forEach(function (item) {
item.sex = '男';
})
console.log(sports);20.js several ways to traverse the object of
The first: for ...... in
The second:
1）、Object.keys（obj）
2）、Object.values（obj）
21.vue life cycle:
new vue →→ →→ component initialization has just been created →→ →→ dependent on imported components to create a complete, template →→ →→ compiler compiler configuration →→ →→ check vue check the configuration of the template attribute is bound to replace the bound element →→→ compile, mount the end of the life cycle after →→→→→ before →→→→→→ component updates →→→→→→ component updates