美文网首页
前端面试1

前端面试1

作者: 卡农me | 来源:发表于2017-07-16 17:27 被阅读29次

    1.如何判别Object、Array对象

    通过Object.prototype.toString可以检测Object和Array(isArray对于检测Array很靠谱)

    letobj={};

    letarr=[];

    console.log(Object.prototype.toString.call(obj));//[object Object]

    console.log(Object.prototype.toString.call(arr));//[object Array]

    console.log(Object.prototype.toString.call(null));//[object Null]

    参考:你有必要知道的一些JavaScript 面试题(上)在JavaScript中,如何判断数组是数组?

    2.从这里可以知道self=this操作的意义(this的绑定):

    var myObject = {

    foo: "bar",

    func: function() {

    var self = this;

    console.log( this.foo);//bar

    console.log( self.foo);//bar

    (function() {

    console.log( this.foo);//undefined

    console.log(self.foo);//bar

    }());

    }

    };

    myObject.func();

    this还可以优雅的绑定:

    varobj = {

    func:function() {},

    say:function() {

    // 此时的this就是obj对象

    setTimeout(function() {

    console.log(this)

    this.func()

    }.bind(this));

    }

    }

    obj.say();// obj

    3.会输出什么?

    console.log(1+"2"+"2");

    console.log(1++"2"+"2");

    console.log(1+-"1"+"2");

    console.log(+"1"+"1"+"2");

    console.log("A"-"B"+"2");

    console.log("A"-"B"+2);

    4.

    var a={},

    b={key:'b'},

    c={key:'c'};

    a[b]=123;

    a[c]=456;

    console.log(a[b]);

    reason:

    The reason for this is as follows: When setting an object property, JavaScript will implicitly stringify the parameter value. In this case, since b and c are both objects, they will both be converted to “[object Object]”. As a result, a[b] anda[c] are both equivalent to a[“[object Object]”] and can be used interchangeably. Therefore, setting or referencing a[c] is precisely the same as setting or referencing a[b].

    5.给你一个 DOM 元素,创建一个能访问该元素所有子元素的函数,并且要将每个子元素传递给指定的回调函数。

    function Traverse(p_element,p_callback) {

    p_callback(p_element);

    var list = p_element.children;

    for (var i = 0; i < list.length; i++) {

    Traverse(list[i],p_callback);  // recursive call

    }

    }

    6.实现深度复制

    JavaScript 对象的深度克隆

    // 判断arr是否为一个数组,返回一个bool值functionisArray(arr){returnObject.prototype.toString.call(arr) ==='[object Array]';  }// 深度克隆functiondeepClone(obj){if(typeofobj !=="object"&&typeofobj !=='function') {returnobj;//原始类型直接返回}varo = isArray(obj) ? [] : {};for(iinobj) {if(obj.hasOwnProperty(i)){            o[i] =typeofobj[i] ==="object"? deepClone(obj[i]) : obj[i];        }    }returno;}

    7.setTimeout  0

    var fuc = [1,2,3];

    for(var i in fuc){

    setTimeout(function(){console.log(fuc[i])},0);

    console.log(fuc[i]);

    }

    虽然setTimeout函数在每次循环的开始就调用了,但是却被放到循环结束才执行,循环结束,i=3,接连打印了3次3。

    这里涉及到javascript单线程执行的问题:javascript在浏览器中是单线程执行的,必须在完成当前任务后才执行队列中的下一个任务。

    另外,对于javascript还维护着一个setTimeout队列,未执行的setTimeout任务就按出现的顺序放到setTimeout队列,等待普通的任务队列中的任务执行完才开始按顺序执行积累在setTimeout中的任务。

    所以在这个问题里,会先打印1 2 3,而将setTimeout任务放到setTimeout任务队列,等循环中的打印任务执行完了,才开始执行setTimeout队列中的函数,所以在最后会接着打印3次3。

    由此,可以知道虽然设置为0秒后执行任务,实际上是大于0秒才执行的。可是这有什么用呢?

    用处就在于我们可以改变任务的执行顺序!因为浏览器会在执行完当前任务队列中的任务,再执行setTimeout队列中积累的的任务。

    通过设置任务在延迟到0s后执行,就能改变任务执行的先后顺序,延迟该任务发生,使之异步执行。

    7.JSONP

    8.JavaScript事件委托的技术原理

    事件流:事件捕获阶段,处于目标阶段和事件冒泡阶段。

    事件捕获是从外层元素到目标元素的过程,事件冒泡是从目标元素到外层元素的过程。如图:

    事件委托的原理就是利用了事件冒泡,只需在DOM树中尽量最高的层次上添加一个事件处理程序,从而管理某一类型的所有事件。

    添加到页面上的事件处理程序的数量直接影响到页面的整体性能,原因:

        1)每个函数都是对象,都会占用内存,内存中对象越多,性能就越差

        2)事先绑定所有的事件处理程序而导致的DOM访问次数,也会延迟整个页面的交互就绪时间

    对“事件处理程序过多”问题的解决方案就是事件委托,因为只取得了一个DOM,只添加了一个事件处理程序,与普通方法相比,结果一样,但占用的内存更少。

    9.浏览器加载、解析、渲染的过程

    10.HTTP POST GET 本质区别详解

    (1)GET提交,请求的数据会附在URL之后;POST提交:把提交的数据放置在是HTTP包的包体中。

    (2)GET提交时,传输数据就会受到URL长度的 限制。POST:由于不是通过URL传值,理论上数据不受 限。

    (3)POST的安全性要比GET的安全性高。

    11.从输入URL到页面加载完成的过程中都发生了什么事情?

    (1)输入地址

    (2)浏览器查找域名的IP地址

               这一步包括DNS具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...

    (3)浏览器向web服务器发送一个HTTP请求

    (4)服务器的永久重定向响应(从http://example.com到http://www.example.com)

    (5)浏览器跟踪重定向地址

    (6)服务器处理请求

    (7)服务器返回一个HTTP响应

    (8)浏览器显示HTML

    (9)浏览器发送请求获取嵌入在HTML中的资源(如图片、音频、视频、CSS、JS等等)

    (10)浏览器发送异步请求

    12.什么是语义化的html?

    (1)有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。

    (2)在没有CSS的时候能够清晰的看出网页的结构,增强可读性,能够便于开发者阅读和写出更优雅的代码。

    13.href和src有什么区别?

    href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素上。

    src和href之间存在区别,能混淆使用。src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

    当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

    href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

    那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。

    相关文章

      网友评论

          本文标题:前端面试1

          本文链接:https://www.haomeiwen.com/subject/yqxxkxtx.html