已经很久没有在CSDN上面写博客了,最近发现CSDN也可以用Markdown了,小小地兴奋了一下,决定写一篇博客第关于前几天2015阿里巴巴前端实习生在线笔试的。前几天参加了这个在线笔试,发现题目真的挺难的,后来再重新回想的时候,除了本来就不会做的,还发现自己做错了几道题,现在整理一下那些笔试题,这里的笔试题部分是自己的,也有部分是工作室其他小伙伴们提供的。感谢楷豪师兄和闻东师兄的相关指导,感谢工作室其他小伙伴们提供的题目和答案。下面选择题给出的一些解析和答案都是自己上网查过相关资料然后根据自己的理解给出的,不保证全部正确哈,仅作参考作用。
这篇文章的github地址
一、(单项选择)对于下列程序运行结果,符合预期的是
function f1() {
console.time('time span');
}
function f2() {
console.timeEnd('time span');
}
setTimeout(f1, 100);
setTimeout(f2, 200);
function waitForMs(n) {
var now = Date.now();
while (Date.now() - now < n) {}
}
waitForMs(500);
- A、time apan:700.077ms
- B、time apan:0.066ms
- C、time apan:500.077ms
- D、time apan:100.077ms
解析:
console.time()
语句和console.timeEnd()
语句是用来对程序的执行进行计时的。因为f1
和f2
被都setTimeout()
事先设置的定时器装到一个事件队列里面。本来f1
应该在100ms后就要执行了,但是因为waitForMs()
占用了线程,而执行JavaScript
是单线程的,所以就没办法在100ms后执行那个f1
,所以需要等500ms等waitForMs()
执行完,然后再执行f1
和f2
,这时候f1
和f2
就几乎同时执行了。所以应该选时间最短的一项,所以答案应该选B
(楷豪师兄提供的解答)
二、(单项选择)请选择结果为真的表达式
- A、null instanceof Object
- B、null == undefined
- C、NaN == NaN
- D、false == undefined
解析:
A、未定义的值和定义未赋值的为undefined,null是一种特殊的object,所以typeof null
返回的应该是object
,但是为什么null instanceof Object
返回的是false
呢?原因就是null
是个特殊的Object
类型的值 ,表示空引用的意思 。instanceof
表示某个变量是否是某个对象的实例 ,所以为false
。
B、undefined == null
是正确的,尽管如此,和其他相似之处,但null
和undefined
并不是等价的。每个作为其独特的类型的唯一成员,undefined
是Undefined
类型和null
是Null
类型。所以undefined === null
是不正确的,因为他们虽然值相等,但是类型不相等。区分这两个值,可以认为undefined
代表一个意想不到的没有值而null
作为预期没有值的代表。
(null:)是一个对象,但是为空。因为是对象,所以typeof null
返回object
。null
是JavaScript
保留关键字。
null
参与数值运算时其值会自动转换为0
,因此,下列表达式计算后会得到正确的数值:
表达式:123 + null
结果值:123
表达式:123 * null
结果值:0
(undefined:)是全局对象(window)
的一个特殊属性,其值是未定义的。但typeof undefined
返回undefined
。
C、NaN
是一个值类型,同是也是一个数值.意思是Not A Number
,这个都知道是什么意思.值比较特殊,特殊在于NaN
是一个数字,是一个与任何数值都不相等的数字。所以NaN == NaN
返回false
。
D、undefined
被转换为布尔值为false
,Boolean(undefined)
返回的是false
,但是undefined
不等于false
。所以false == undefined
返回false
。
所以最终答案应该为B
。
三、(单项选择)下面程序的执行结果是
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
- A、Goodbye Jack
- B、Hello Jack
- C、Hello undefined
- D、Hello World
解析:
因为JavaScript
中的变量的查找是就近原则去寻找var
定义的变量,当就近没有找到的话就会找外层。题目中因为if
判段语句(typeof name === 'undefined')
就近定义的name
就在其执行完的下一行,所以name
就被预解析了,实际上可以理解成在if
判段语句(typeof name === 'undefined')
上面var name
这样定义了name
,但是尚未被赋值。而在它执行完后面再去为name
赋值name = 'Jack';
,所以name
的值是undefined
。所以typeof name === 'undefined'
成立,所以判断语句会走if
成立部分。
所以最终答案应该为A
。
四、(不定项选择)以下关于DOM事件流的表述哪些是正确的
- A、事件流包括两个阶段:事件捕获阶段、事件冒泡阶段
- B、IE跟标准浏览器对于DOM事件流实现不一样
- C、假设parentEle是childEle的父节点,绑定事件:parentEle.addEventListener(“click”, fn1, false)和childEle.addEventListener(“click”, fn2,false),当点击childEle的时候fn1将先于fn2触发
- D、addEventListener第三个参数true代表支持捕获,false代表不支持捕获
解析:
在W3C
事件模型中,任何事件会首先被捕获直至到达目标元素然后再冒泡回去。事件流包括3
个阶段:事件捕获阶段
、处于目标阶段
和事件冒泡阶段
。所以A
选项是错
的。Web开发者可以选择将事件处理程序注册在捕获或者冒泡阶段。这可以通过addEventListener()
方法来实现。如果该方法传入的最后一个参数值为true
,表示事件处理程序被注册在捕获阶段,如果为false
表示件处理程序被注册在冒泡阶段。所以D
选项也是错
的。
假设有如下程序(childEle
是parentEle
的子元素):
1.parentEle.addEventListener("click", parentDoSomething, true);
2.childEle.addEventListener("click", childEleDoSomething, false);
如果用户点击子元素childEle
会发生如下事情:
a、点击事件开始于
捕获阶段
。它会先查询是否有childEle
的任何祖先元素在捕获阶段
绑定了onclick
事件。
b、它发现祖先元素1在捕获阶段绑定了onclick
事件,于是parentEle.parentDoSomething()
首先被执行。
c、事件一直查询到目标元素childEle
都没有再发现别的在捕获阶段
绑定的onclick
事件,事件转到它的冒泡阶段
并执行childEleDoSomething()
(注册在childEle
上的在冒泡阶段
执行的事件处理程序)。
d、事件再次向上查询并检查是否有任何祖先元素在冒泡阶段
绑定了onclick
事件,并没有查询到,所以什么都没有发生。
再看相反的例子:
1.parentEle.addEventListener("click", parentDoSomething, false);
2.childEle.addEventListener("click", childEleDoSomething, false);
现在如果用户点击childEle
,下面的事情会按顺序发生:
a、点击事件发生于
捕获阶段
。事件查询childEle
是否有任何祖先元素在捕获阶段
绑定了onclick
事件并且没有查找到这样的元素。
b、事件查询到目标元素childEle
自己。事件转为冒泡阶段
并执行childEleDoSomething()
。
c、事件再次向上查询并检查目标元素是否有任何祖先元素在冒泡阶段
绑定了onclick
事件。
d、它找到了满足条件的parentEle
,然后执行parentDoSomething()
。所以选项C
是错
的,应该是fn2
先触发。
因为IE
没有提供对事件捕获阶段
的支持,所以IE
跟标准浏览器
对于DOM事件流
实现不一样。
所以最终答案应该为B
。
五、(不定项选择)通过下面的哪些方法可以获取页面的html元素
- A、document.getElementById
- B、document.getElementsByClassName
- C、document.querySelector
- D、document.querySelectorAll
解析:
A、页面的html元
素可以通过id
获取,具有唯一性,如:var divObjId = document.getElementsById("test");
。所以A
是正确的。
B、页面的html
元素可以通过class
获取,会选择页面上所有class
名为test
的所有元素,返回的对象是NodeList
。如:var divObjClass = document.getElementsByClassName("test");
。所以B
是正确的。
C、D 、document.querySelector
只返回匹配的第一个元素,如果没有匹配项,返回null
。document.querySelectorAll
返回匹配的元素集合,如果没有匹配项,返回空的NodeList
(节点数组)。这两个方法都可以接受三种类型的参数:id(#)
,class(.)
,标签
,很像jquery
的选择器。如:
var obj = document.querySelector("#id");
var obj = document.querySelector(".classname");
var obj = document.querySelector("div");
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");
所以C
和D
都是正确的。
所以最终的答案是A,B,C,D
。
六、(不定项选择)下面选项中,对javascript事件的描述不正确的是
- A、IE使用attachEvent/detachEvent方法来添加和删除事件监听器;w3c使用addEventListener/removeEventListener方法
- B、IE是将event对象作为参数传递给监听器,w3c事件监听器内使用的是一个全局的Event对象
- C、IE提供了对事件捕获阶段的支持
- D、要停止事件的传递,IE的做法是设置event对象的cancelBubble为true,而w3c的做法是设置执行stopPropagation方法
解析:
A、IE
使用attachEvent/detac