前端面试1

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.实现深度复制

https://juejin.cn/post/6904158317447217160

浅拷贝:

function shallowClone(o){

      let obj={}

      for(let key in o){

          obj[key]=o[key]

      }

      return obj

}


深拷贝:

function deepCopy(source){

        if (typeof source != "object") {

          return source;

        }

        if (source == null) {

            return source;

        }

        var newObj = source.constructor === Array ? [] : {};  //开辟一块新的内存空间

        for (var i in source) {

            newObj[i] = deepCopy(source[i]);                //通过递归实现深层的复制

        }

        return newObj;

}


source.constructor === Array 其实应该是source.__proto__.constructor === Array,但source找不到constructor属性,会往上原型链上找

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方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容