First, the choice
1. The browser-side storage technology which ()
A.cookie B.localStorage C.session D.userData
The answer: ABD
analysis: cookie typically used to store user login information and other data that can be stored is limited and all requests will bring in the specified domain.
localStoage H5 is new for local storage, can store more data, typically 5M
session server and client to establish a session, not a browser-side storage technology
userData IE is proprietary storage solution can be used to store some of the data
2. (function () {return typeof arguments;}) (); return code will ()
A.object B.array C.arguments D.undefined
Answer: A
Analysis: arguments is an array of classes, under normal circumstances typeof [] will return to "object", so typeof arguments will return to "object"
3. function fn () {return fn ;} new fn () instanceof fn; above code output ()
A.true B.false
The answer: false
analysis: fn as a constructor, declare a return statement if no internal display, by default returns an instance of an object fn, which is the new fn () instanceof fn returns true,
However, there are return fn; this statement, then the new fn () returns fn, so the result is false
4. Which of the following attributes will not let out of div document flow (normal flow) ()
A.position: absolute B.position: fixed C.position: relative D.float: float
Answer: C
Analysis: position: relative positioning with respect to their own, without departing from the document flow
The regular expression / ^ \ d * \ * [ ^ \ d] * [\ w] {6} $ /, the following string which exactly matches? ()
A. *** abcABCD_89 B.abc * abcABCDEF
C.123 * abcABCD_89 D.123 * ABCabcd-89
The answer: A, C
Analysis:
^ means match the character must start behind the rules
\ D * means zero or more digital
\ * To match only the character *
[^ \ D] * which matches zero or more non-numeric characters
[\ W] represent the matching alphanumeric characters corresponding to underscore [0-9a-zA-Z_]
{6} is set to the number of characters to be matched is greater than or equal to 6
The answer A, * belong to the initial matches, the other is the rest of the match rules
6. (function () {var a = b = 5;}) (); console.log (b); console.log (a); output the code :()
A.5, B.undeinfed. 5, undefined C .5, undefined D. program throwing error
Answer: D
Analysis: After the completion of the implementation of the program will first print 5, then throwing error, because var a = b = 5; equivalent to b = 5; var a = 5 ; in non-strict mode, the global environment is not a direct statement
Assigned to the window object corresponding to the assignment, the equivalent window.b = 5; however, a scope within an anonymous self-executing function, the global scope of the following is not accessible
Second, the simple question
7. code output below in the order?
console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
new Promise(function(resolve, reject) {
console.log('three');
resolve();
}).then(function() {
console.log('four');
});
console.log('five');
答案：one three five four two
Analysis: The program is executed from top to bottom first print out one, new Promise performs his constructor this time to print three,
Promise is an asynchronous microtask since then, this time the main thread will continue to execute the code to print out five, this time will perform microtask queue,
Print out four, the next task execution queue to print out two macrotask
8. The following code output?
falseStr = "false";
if (true) {
var falseStr;
if (falseStr) {
console.log("false" == true);
console.log("false" == false);
}
}
Answer: false false
Analysis: The following rules for determining == operator compares the two values are equal:
1. If the two values of the same type, then detect their equivalence. If the two values are identical, they are equal. If they are not identical, they are not equal.
2. If the two values of different types, they may still be equal. With the following rules and casting to detect their equality:
2.1 If the value is a null, another value is undefined, they are equal.
2.2 If a value is a number, the other value is a string, the string is converted to digital, and then the converted value is compared.
If a value of 2.3 is true, to convert it to 1, and then compared. If a value is false, converts it to 0, and then compared.
If a target value is 2.4, the other value is a number or a character string, the values of the original object into type, then compared.
2.5 Other combinations of values are not equal.
9. The following code output?
It has length = 10;
var obj = {
length: 5,
func: function() {
console.log(this.length);
}
};
var func = obj.func;
func();
obj.func ();
Answer: 10,5
Analysis: The scope of a function is defined when the decision has nothing to do with the execution environment, so var func = obj.func; can be understood as defined in the global scope func
So func within this function should be global, browser environment is a window, so the length is 10. Obj.func function execution context object is obj, so
length is 5
10. PNG, GIF, JPG difference and how to choose?
GIF：
256 colors
Nondestructive editing to save time, not lose.
It supports simple animation
Support boolean transparent, that is, either completely transparent or opaque
JPG：
millions of colors
Lossy compression means that each time you edit will lose quality
Transparency is not supported
For photos, in fact, many are using this format camera
PNG：
Non-destructive, in fact, there are several PNG format, generally divided into two categories: PNG8 and truecolor PNGs
Compared with GIF:
It usually produces smaller file sizes
It supports alpha (variable) transparency
No animation support (can be animated by CSS3)
Compared with JPEG:
Larger files
Lossless
Therefore it can be used as a transit center JPEG picture format editing
in conclusion:
JPEG for photos
Animated GIF for
PNG8 suitable for any other kind - charts, buttons, backgrounds, graphics, etc.
11. Please use CSS to achieve the middle of the screen there is an element A, with the increase in the width of the screen, always following conditions are met:
1) A centering element perpendicular to the center of the screen
2) A screen element from the left and right margins of each 10px
Height 3) A element is always 50% A width of the element
Answer: This question has a variety of implementations, program follows,
1.1 CSS3 flex achieved, Parent set the style of display elements: Flex; align = left-items: Center;
1.2 Parent elements disposed postion: relative; A styling element position: absolute; top: 50% ; transform: translateY (-50%) ;
1.3 Parent elements disposed postion: relative; A set of elements: postition: absolute; top: 0; bottom: 0; margin: auto 0;
2.1 A元素margin-left: 10px; margin-right: 10px;
3.1 percentage achieved here by means of padding, padding is explained w3c percentage: padding a predetermined width based on the percentage of the parent element