Interview questions (recently encountered)

1. The following code, outputting the contents of what is, and why
A. 0 1 2 3 B. 0 0 0 0 C. 4 4 4 4 D. 3 3 3 3

var length = 4;
for(var i=0; i<length; i++){
    setTimeout(function ting(){
        console.log(i);
    }, 2000);
}

答案是C，原因如下：
setTimeout is asynchronous calls, and delayed the implementation of two seconds, so wait until setTimeout executed, this time ivalue has become 4, so the cycle will be four times the output of four 4.
These are personal understanding, there is more detail: poke me so you can see

2. Below that option is a return to true
A. null == undefined
B. null === undefined
C. null instanceof Object
D. NaN == NaN
答案是A，原因如下：
null and undefined is similar values, undefined value is derived from the null value, a thus returns true; but also because the value of null and undefined, although similar, but were made of different types of values, and therefore B returns false; instanceof operator is used to detect the presence or absence constructor.prototype parameters in the prototype object, and therefore returns C false; NaN because not equal to any value, including NaN itself, thus returns false D

3. The following code values are returned what
A. 3 1 B. 1 2 C. 1 3 D. 2 1

// 第一段
var one = 1;
function ha (ha_val){
    ha_val = 2;
    ha2(ha_val);
}
function ha2(ha2_val){
    ha2_val = 3;
}
ha(one);
console.log(one);

// 第二段
var two = {
    'val': 1
};
function changeVal_1(two){
    two.val = 2;
    changeVal_2(two.val);
}
function changeVal_2(value){
    value = 3;
}
changeVal_1(two);
console.log(two.val);

答案是B，原因如下：

• This problem is examined with the content of local variables global variables, the first paragraph of the code, but the onevalue passed to the function ha, and the function assigned to the local variable ha_val, so the ha_valvalue of the variable changes will not affect the variable onevalue, so the final output value is 1.
• Second segment code passed to the function changeVal_1is an object two, rather than just pass the twovalue change is therefore an object twovalue; and passed to the function changeVal_2is the two.valvalue, change its value, will not change the target twovalue, thus 2 is the final output value.
  Click to view the corresponding reference article

4. After use of the following which, vertically offset about invalid
A. position: Absolute
B. position: relative
C. position: Fixed
D. position: static
答案是D，原因是：
static position is the default attribute. At this time, then we say that the elements are not positioned, only set position, we can use the offset parameter to specify the location that we want for our element, otherwise the top, left, right, bottom, etc. offset setting is invalid

5.Ajax request how many Callback, What are they?
Ajax requests in total there are eight Callback, namely: onSuccess, onFailure, onUninitialized, onLoading , onLoaded, onInteractive, onComplete and onException.

What is the difference with the synchronous request 6.ajax asynchronous request is?
Synchronization request: When will stop execution of the current ajax behind the implementation of JS code, until after ajax is finished, before proceeding to the back of the JS code.
Asynchronous Request: When the ajax request is sent, in this process of waiting for server response, the foreground will continue ajax block behind the script until the server returns the correct end result will be to carry out success, that is to say at this time is executed two threads, blocks ajax request a thread and a rear block ajax script (another thread)
refer to the article:
AJAX and use the difference between synchronous and asynchronous
synchronization request and the difference between the asynchronous request

7. Using javascript to write a one-second timed task, the pop-pop-second later, the content is "Hello"

// 我当时的做法是这样的
var isPause =  false;
var startTime = new Date().getTime();
while(!isPause){
   var nowTime = new Date().getTime();
   if (nowTime - startTime >= 1000) {
       window.alert('你好');
       isPause = true;
   }
}

After go online to see if there is a better way, I found that most online directly with setTimeout, it seems that I think too much?

8. Talk about the understanding of front-end engineering

Front-end engineering

• The use of technology and software engineering to develop front-end projects, maintenance and management
• All can reduce costs and improve the efficiency of the total thing called engineering
• Software engineering is concerned that aspects of performance, stability, availability, maintainability, etc., all with the goal of these jobs are "front-end engineering"

Front-end engineering is divided into four parts: standardized, automated, modular, component-based.

The following are some detailed analysis of the four parts of the above contents refer to the article:
1. https://www.jianshu.com/p/2e096d7d3e03
2. http://www.xuefeng666.com/WebGCH/WebGCH/#%E5%BD % E7 Bl 92%%%% BB% E6% E8 8F 8F%%% B0 the BF
3. https://segmentfault.com/a/1190000009815823

9. What is the end result would enter the following code?

function Test(){
    this.a = 0;
    this.b = function(){
        alert(this.a);
    }
}
Test.prototype = {
    b: function(){
        this.a = 20;
        alert(a);
    },
    c: (function(){
        this.a = 20;
        alert(this.a);
    })()
};
var fanshu = new Test();
fanshu.b();
fanshu.c;

fanshu.b digital pop () is: 0
fanshu.c pop-up figures are: 20
原因是：fanshu是Test的实例，当调用fanshu.b()时，会先在实例上查找有没有b属性，发现有对应的b属性，因此不会继续往上查找，因此弹出的值是0；当调用fanshu.c时，在实例没有查找到对应的属性，因此继续在原型对象上查找，查找到对应的c属性， c属性是一个立即执行的函数，因此可以直接执行，弹出值20。

10. advantage of the event delegate, how to optimize?
Advantages: 1 reduced binding event handler, save memory; dom nodes 2 operate to reduce, improve performance
optimization: reduced 1 level, the low level in the event binding element, or the document is not binding on the element body. ; 2. even with the event delegate, but also reduce the number of binding.
Reference article: in-depth understanding of - event delegate , event delegate advantages and disadvantages

11. Use javaScript write a method to replace the alternative method, the following string replace

var type = { "company": "信息科技公司", "adjective": "领导nice" };
var date = "{{ company }} {{ adjective }}，而且人才很多。";

Additional Thoughts: type of order may be inconsistent with the order of variables inside of a string, and the string variable does not necessarily exist in the type of.
code show as below:

function replaceString(type, string){
    var result = [];
    // 对字符串进行第一次切割
    var items = string.split("{{");
    // 循环切割后得到的数组
    for(var i=0; i<items.length; i++){
        var item = items[i];
        // 对有“}}”的字符串进行二次切割，没有则放进新数组中
        if(item.indexOf('}}') !== -1){
            var pieces = item.split("}}");
            // 获取对应的映射值，并放进新数组中
            var mappingVal = type[pieces[0]] ? type[pieces[0]] : ("{{" + pieces[0] + "}}");
            result.push(mappingVal);
            // 若"}}"后面还有字符串，则放进新数组中
            if(pieces.length > 1 && pieces[1] !== ''){
                result.push(pieces[1]);
            }
        }
        else if(item !== ''){
            result.push(item);
        }
    }
    // 连接数组中各项
    var result = result.join('');
    return result;
}

Later, a discussion with a friend, the findings also can use the recursive method + substring of:

function replaceString(type, stringVal){
    var startIndex = 0;
    var res = '';
    function runStr(stringVal, startIndex){
        var leftIndex = stringVal.indexOf('{{', startIndex);
        var rightIndex = stringVal.indexOf("}}", startIndex);
        if(leftIndex !== -1 && rightIndex !== -1){
            var val = stringVal.substring(leftIndex + 2, rightIndex);
            if(type[val]){
                res = stringVal.substring(0, leftIndex) + type[val] + stringVal.substring(rightIndex + 2, stringVal.length);
                startIndex = res.indexOf("{{");
            }
            else {
                startIndex = res.indexOf("}}") + 2;
            }
            runStr(res, startIndex);
        }
    }
    runStr(stringVal, startIndex);
    return (res !== '' ? res : stringVal);
}