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