前端面试经典题目(js中级篇)

1.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

考察点1:对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚

考察点2:是否知道如何判断一个变量是什么类型的

考察点3:递归算法的设计

前端面试经典题目(js中级篇)_第1张图片

2.如何消除一个数组里面重复的元素?


前端面试经典题目(js中级篇)_第2张图片

3.小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象:


前端面试经典题目(js中级篇)_第3张图片

小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述,按示例的形式用代码来实。(继承,原型,setInterval)

答案:

前端面试经典题目(js中级篇)_第4张图片

4.下面这个ul,如何点击每一列的时候alert其index?(闭包)


答案:


前端面试经典题目(js中级篇)_第5张图片

5.编写一个JavaScript函数,输入指定类型的选择器(仅需支持id,class,tagName三种简单CSS选择器,无需兼容组合选择器)可以返回匹配的DOM节点,需考虑浏览器兼容性和性能。

/*** @param selector {String} 传入的CSS选择器。* @return {Array}*/

答案:

前端面试经典题目(js中级篇)_第6张图片

6.请评价以下代码并给出改进意见。


前端面试经典题目(js中级篇)_第7张图片

评价:

不应该在if和else语句中声明addListener函数,应该先声明;

不需要使用window.addEventListener或document.all来进行检测浏览器,应该使用能力检测;

由于attachEvent在IE中有this指向问题,所以调用它时需要处理一下

改进如下:

前端面试经典题目(js中级篇)_第8张图片

7.给String对象添加一个方法,传入一个string类型的参数,然后将string的每个字符间价格空格返回,例如:

addSpace(“hello world”) // -> ‘h e l l o  w o r l d’


接着上述问题答案提问,1)直接在对象的原型上添加方法是否安全?尤其是在Object对象上。(这个我没能答出?希望知道的说一下。) 2)函数声明与函数表达式的区别?

答案:在js中,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非是一视同仁的,解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问),至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解析执行。

8.定义一个log方法,让它可以代理console.log的方法。

可行的方法一:

如果要传入多个参数呢?显然上面的方法不能满足要求,所以更好的方法是:


到此,追问apply和call方法的异同。

答案:

对于apply和call两者在作用上是相同的,即是调用一个对象的一个方法,以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。 如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3]) 。

9.在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

答案:

伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

假设接第八题题干,我们要给每个log方法添加一个”(app)”前缀,比如’hello world!’ ->'(app)hello world!’。方法如下:

10.对作用域上下文和this的理解,看下列代码:


前端面试经典题目(js中级篇)_第9张图片

问两处console输出什么?为什么?

答案是1和undefined。

func是在winodw的上下文中被执行的,所以会访问不到count属性。

继续追问,那么如何确保Uesr总是能访问到func的上下文,即正确返回1。正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下:


前端面试经典题目(js中级篇)_第10张图片

11.原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同?如何用原生JS实现Jq的ready方法?

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。


前端面试经典题目(js中级篇)_第11张图片

如果上述代码十分难懂,下面这个简化版:


前端面试经典题目(js中级篇)_第12张图片

12.(设计题)想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)

回答出概念即可,下面是几个要点

1.给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

2.mousedown事件触发后,开始拖拽

3.mousemove时,需要通过event.clientX和clientY获取拖拽位置,并实时更新位置

4.mouseup时,拖拽结束

5.需要注意浏览器边界的情况

13.

前端面试经典题目(js中级篇)_第13张图片


前端面试经典题目(js中级篇)_第14张图片

14.说出以下函数的作用是?空白区域应该填写什么?


前端面试经典题目(js中级篇)_第15张图片

答案:访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容,返回一个格式化后的结果:

第一个空是:arguments

第二个空是:/\{(\d+)\}/ig

15.用面向对象的Javascript来介绍一下自己。(没答案哦亲,自己试试吧)

答案: 对象或者Json都是不错的选择哦,

你可能感兴趣的:(前端面试经典题目(js中级篇))