js面试

1.获取一堆name名相同的div，点击弹出显示第几个div

（本题主要考察闭包的用法，是在面试中常被问的题目，不难但是比较容易上当的题目）

var boxes = document.getElementsByTagName("div");

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

boxes[i].index = i+1;

boxes[i].onclick = function() {

alert(this.index);

}

}

答案二

var boxes = document.getElementsByTagName("div");

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

(function(i){

boxes[i].onclick = function() {

alert(i+1);

}

})(i);

}

2.abcdefgsdds 获取里面字面最多的字母（答案有很多）

var str = “abcdefgsdds”;

var obj = {};

var arr = [];

var letter;

for(var i = 0,len = str.length;i

letter = str[i];

if(!obj[letter]){

obj[letter] = 1;

}else{

obj[letter]++;

}

}

var max_key,max_num=0;

for(key in obj){

if(max_num

max_num = obj[key];

max_key = key;

}

}

document.write(“字母：”+max_key+”　次数：”+max_num);

3.abcdefghi 获取ghi怎么实现

答：”abcdefghi".substring(6)

4.‘asdjhklzxc’ 截取’asd’

答：”asdjhklzxc".substring(3,-1)

5.翻转字符串

答：”asd".split("").reverse().join("")

6.删除数组第一个元素

答：arr.shift()

7.[1,2,1,3,2,3,5,6,5]  去除重复元素

var arr = [1,2,1,3,2,3,5,6,5] ;

var newArr = [];

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

if(newArr.indexOf(arr[i]) == -1) {

newArr.push(arr[i]);

}

}

alert(newArr)

7.JS中有几种数据类型分别是哪几种？

答：Number,String,Boolean,Object,Null,Undefined

8.说一下拖拽的原理？怎么样实现多个DIV在拖拽时有相撞让它们改变属性与属性值和他们的位置？（部分程度不太好的看到拖拽会懵，项目期有这个情况）

mousedown,mousermove,mouseup事件

e.clientX,e.clientY 鼠标位置

碰撞检测

9.用JS创建一个a标签，在body中显示，点击在新窗口打开

var alink = document.createElement("a");

alink.innerHTML = "google";

alink.href = "http://www.google.com";

alink.target = "_blank";

document.body.appendChild(alink);

10.鼠标滚轮动画

function mousewheel(element,up,down) {

element.onmousewheel = fn;

if(window.addEventListener) {

element.addEventListener("DOMMouseScroll",fn,false)

}

function fn(e) {

var e = e || window.event;

console.log(e);

if(e.wheelDelta > 0 || e.detail < 0) {

up();

}else {

down();

}

e.cancelBubble = true;

e.stopPropagation();

}

}

mousewheel(document,function(){},function(){})//函数调用

12.定位右下角广告

答：使用css position:fixed

13.鼠标经过A  A变大其他的位置不动

答：A绝对定位，脱离文档流即可

14.JS中避免命名冲突的三个方法（有些同学或许会想不到这些概念）

答：命名空间，闭包，匿名函数

15.JS在HTML中的引入方式有哪些？又有什么优缺点？

答：a外部引入b内部嵌套c行内代码例：按钮 对比css引入

16.写出5条标识符的命名规范（）

答：1.区分大小写；

2.第一个字符必须是一个字母、下划线（_）或一个美元符号（$）

3..不能含有空格

4.不能以关键字或保留字命名,不能以数字开头

17.从JS的角度，写出8条以上优化代码的方法？

答：参考http://www.haorooms.com/post/web_xnyh_jscss

18.按优先级，对这几种运算符进行排序：！&&  *  =  >

答：！&& *> =

19.在循环中，break和continue语句的功能有何不同

答：break 终止整个循环，continue终止当次循环

20.解释事件冒泡、事件捕获的区别

答：事件流解释即可

21.说说什么叫做事件委托

答：利用事件冒泡的原理，子元素的事件会冒泡到父元素，可以只给父元素添加事件，通过事件目标判断元素。优点：节省内存，动态添加的子元素也包含事件

22.列举不少于6条的IE与FF脚本兼容性问题，需要写出命令（也许同学们缺乏总结，看着简单，实际很难答全）

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 获取标签的自定义属性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

(5) document.getElementByName()和document.all[name]

IE；document.getElementByName()和document.all[name]均不能获取div元素

FF：可以

(6) input.type的属性

IE：input.type只读

FF：input.type可读写

(7) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

(8) 是否可用id代替HTML元素

IE：可以用id来代替HTML元素

FF：不可以

23.构造函数有何优缺点？

答：构造函数可以创建多个对象，

缺点：容易跟普通函数一样调用

24.用自己的话描述一下“闭包“

答：函数内部又定义了一个函数，内部函数引用外部函数的变量，就构成了闭包

25.用自己的话描述一下对“异步“和”同步“的理解

同步：按顺序执行，同一时刻只能执行一个事件

异步：不按顺序执行，同一时刻可以执行多个任务

26.写倒计时距离2018年还有多少天多少小时多少分钟多少秒

var time = document.getElementById("time");

function clock() {

//设置目标日期

var targetDate = new Date(2018,0,1);

var currentDate = new Date();

var remainTime = targetDate - currentDate;

//天数

remainDay = parseInt(remainTime/1000/60/60/24);

//小时数

remainHours = parseInt(remainTime/1000/60/60%24);

//分钟

remainMinutes = parseInt(remainTime/1000/60%60);

//秒

remainSeconds = parseInt(remainTime/1000%60);

time.innerHTML = remainDay + "天"+remainHours+"小时"+remainMinutes+"分钟"+remainSeconds+"秒";

}

setInterval(clock,1000);

27.alert怎样换行

答：转义字符,换行符\n

alert("大家好\n大家好")

28.左侧内容可上下滚动，右侧是滚动条，如何实现布局

答：固定高度，overflow-y:scroll

29.向上滚动动画如何实现

document.body.scrollTop = "xxx";

document.documentElement.scrollTop = "xxx";

30.form表单提交

答：默认提交，form.onsubmit = function(){}可在表单数据提交之前验证

31.javaScript与ECMAScript的区别？

答：javascript是具体实现，ECMAScript是标准，大纲

32.==与===的区别？

==等于，判断值是否相等，会有类型转换

===全等，判断类型跟值是否相等，类型不会转换

33.什么是DOM？

答：文档对象模型

34.Undefined与null的区别？

答：Undefined无定义，null空

35.有两个对象，var o = {num:1};var p = {num:2};要求书写一段代码，使得o+p===3为true。

Object.prototype.toString = function(){

return this.num;

}

36.如果给你这么一个页面：顶部有logo什么的，下来是导航条，中上部有图片切换，右边是登录注册，左边有简单的信息展示，中下部是一些新闻，底部是一般的那些联系我们呀什么的传统页尾。这样一个布局加上所有的js效果和新闻链接包括所有的兼容，你大概能多久完成（新鸿儒）；

37.讲解一下this （作用域）

this的指向：普通函数内的this指向全局变量

构造函数内部this指向新创建出来的对象

对象方法内的this指向的是调用该方法的对象

call,apply,bind可以改变this的指向

38.构造函数

答：new关键字后紧接的函数即为构造函数，约定首字母大写

39.原型，原型链的理解

答：ECMA5之前没有类的概念，js的继承是基于原型链的

40.说说前端优化从哪方面着手，具体说明有哪些？

html 语义化，符合标准，减少嵌套层数，加快浏览器DOM解析速度

css 合并，压缩少写冗余css代码，使用精灵图...

js 减少DOM操作，使用变量缓存数据，少用全局变量，做动画的元素都绝对定位...