上汽大通内部前端面试题（纯干货）（二）-阿里云开发者社区

4、码中没有明确初始化，变量和参数的默认值是什么？（D）

A、””
B、多个答案是正确的
C、null
D、undefined

5、面的例子中，元素在总宽度是多少？（B）

div.elem{
Windth：200px；
Padding：10px；
Border：2px solid gray;
Margin:8px;}
A、21px
B、220px
C、230px
 240px

6、uery对象鱼DOM对象的转换（B）

S（”#id”）等同 document.getElementByld（”id”）
 S（”#id”）[0]等同 document.getElementByld（”id”）
 S（”#id”）.get[0]等同 document.getElementByld（”id”）
 S（”#id”）.get()等同 document.getElementByld（”id”）

7、关于fn.call（obj，paramliet）函数的说法，错误的是？（B）

使用call可以使fn中的this指针向obj
 paramList必须是一个数组
 obj必须是一个对象
 fn必须是一个函数

8、下列对javascript语言的叙述，错误的是（B）

javascript语言不支持多线程
 javascript语言不支持面向过程编程
 javascript语言不能进行图形绘制
 javascript语言不能操作数据库

9、 $.get(E)方法的返回值是什么样的对象？

response对象的状态
 response对象的内容
 用于创建一个request的XMLHttpRequest对象
 以上都不是
 包含response对象的状态和内容的结构
 当触发$.get()时，无对象返回

10、下列对with(obj){}的叙述正确的是（A）

使用with语句会把obj的对象添加到花括号所在的作用域链的首部
 With语句用在对控件的大批量属性设置上不是很好
 With语句的执行效率非常高
 With语句会降低javascnpt的可读性

判断题

1、在JavaScripc中false===0的结果是false。（对）
2、onreset事件发生时，页面重新加载。（对）
3、SPAN是inline元素，内嵌在DHTML机构中，默认不换行（对）
4、一个多框架的窗口对象在location属性显示的是子窗口的URL(错)
5、当background-color与background-image都被设点了时，background-image将覆盖background。。（对）
6、clear属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的（对）
7、定义了全局变量g，可以用window，g的方式来存取读变量。（对）
8、对于HTML中的onfirm()方法，在调用confirm（）时，将暂停对JavaScripc代码的执行，在用户做出响应。。。（对）

9、下面条件判断为真吗？（错）

Var b= new Boolean（false）；
If（b）

10、样式中使用tr：hover可以实现悬停的效果。（错）

简答题：

1、行内元素和块级元素?img 属于哪种?行内元素怎么转化为块级元素?

行内元素:和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的 宽度不可改变，
只能容纳文本或者其他行内元素;其中 img 是行元素 块级元素:总是在新行上开始，高度、行高及外边距和内边距都可控制，
可以容纳内敛元素 和其他元素;行元素转换为块级元素方式:display:block;

2、将多个元素设置为同一行?清除浮动有几种方式?

将多个元素设置为同一行:float，inline-block
清除浮动的方式:

方法一:添加新的元素、应用 clear:both;

方法二:父级 div 定义 overflow: hidden;方法三:利用:after 和:before 来在元素内部插入两个元素块，
从面达到清除浮动的效果。
 .clear{zoom:1;} .clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3、link import 两者之间区别?

(1)@important 只能加载 css 
(2)加载顺序的差别，最后加载 import 
(3)兼容性的差别，老浏览器不兼容
(4)使用 dom 控制样式的差别

4、简单说下transform?animation?区别?animation-duration

Transform:它和 width、left 一样，定义了元素很多静态样式实现变形、旋转、缩放、 移位及透视等功能，
通过一系列功能的组合我们可以实现很炫酷的静态效果(非动画)。 
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，
它本身被用来替代 一些纯粹表现的 javascript 代码而实现动画,可以通过 keyframe 显式控制当前帧的属性值. 
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。

5、一般做手机页面切图有几种方式?

答:三种。响应式布局，弹性布局 display:flex，利用 js 编写设定比例，给根元素设定像 素，使用 rem 为单位。

6、px/em/rem 有什么区别? 为什么通常给 font-size 设置的字体为 62.5%

答:px 像素是相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
em 是相对长度 单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，
则相对于浏览器的默认字体尺寸。1、em 的值并不是固定的;2、em 会继承父级元素的字体 大小。
使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。 
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比 例地调整所有字体大小，
又可以避免字体大小逐层复合的连锁反应。rem 是相对于浏览器进行缩放的。
1rem 默认是 16px，在响应式布局中，一个个除来转换成 rem，太麻烦，所以重置 rem body{font-size=62.5% } 此时 1rem = 10px;
若是 12px 则是 1.2rem.

7、CSS3 有哪些新特性? HTML5 标准提供了哪些新的API？

CSS3 实现圆角(border-radius)，阴影(box-shadow)， 对文字加特效(text-shadow、)，线性渐变(gradient)，
旋转(transform) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩 放,定位,倾斜增加了更多的 CSS 选择器 多背景 rgba
H5的新属性：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。
媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。)
离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存
文档编辑，应该是更好的支持对文档的编辑。
拖动，可以将文件拖动到某些区域上传
跨文档请求，websocket，一种更加高效的通讯方式
历史管理，可以通过js管理和插入历史记录
MIME头自定义
客户端数据存储，localstoage sessionstoage
地理位置共享
本地数据库
索引数据库

8、ajax 的缺点

1、ajax 不支持浏览器 back 按钮。2、安全问题 AJAX 暴露了与服务器交互的细节。
 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。5、不容易调试

9、HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：
localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失
sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

10、什么是闭包?* 堆栈溢出有什么区别? 内存泄漏? 那些操作会造成内存泄漏?怎么样防止内存泄漏?

闭包:就是能够读取其他函数内部变量的函数。 
堆栈溢出:就是不顾堆栈中分配的局部数据块大小，向该数据块写入了过多的数据，导致数 据越界，
结果覆盖了别的数据。经常会在递归中发生。 
内存泄露是指:用动态存储分配函数内存空间，在使用完毕后未释放，导致一直占据该内存 单元。
直到程序结束。指任何对象在您不再拥有或需要它之后仍然存在。 
造成内存泄漏:setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。 
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时，就会产生一个循环) 防止内存泄露:
1、不要动态绑定事件;
2、不要在动态添加，或者会被动态移除的 dom 上绑事件，用事件冒泡在父容器监听事件; 3、如果要违反上面的原则，
必须提供 destroy 方法，保证移除 dom 后事件也被移除，这点 可以参考 Backbone 的源代码，做的比较好;
4、单例化，少创建 dom，少绑事件。
平时工作中怎么样进行数据交互?如果后台没有提供数据怎么样进行开发?mock 数据与 后台返回的格式不同意怎么办?
由后台编写接口文档、提供数据接口实、前台通过 ajax 访问实现数据交互; 
在没有数据的情况下寻找后台提供静态数据或者自己定义 mock 数据; 返回数据不统一时编写映射文件 对数据进行映射。

代码部分

1、如何显示/隐藏一个DOM元素？

el.style.display = "";
el.style.display = "none";

2、判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test(“a1a__a1a__a1a__a1a__");

3、截取字符串abcdefg的efg

var str = "abcdefg";
if (/efg/.test(str)) {
     var efg = str.substr(str.indexOf("efg"), 3);
     alert(efg);
}

4、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

5、看下面代码，给出输出结果。

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);    
  },0);  
};
答案：4 4 4。
原因：Javascript事件处理器在线程空闲之前不会运行。再问，如何让上述代码输出1 2 3？
for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);    
   })(i),0) }

6、javascript面向对象中继承实现

javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：
function Animal(name) {
   this.name = name;
}
Animal.prototype.getName = function() {alert(this.name)}
function Dog() {};
Dog.prototype = new Animal("Buddy");
Dog.prototype.constructor = Dog;
var dog = new Dog();

7、编写一个方法求一个字符串的字节长度

function GetBytes(str){
         var len = str.length;
         var bytes = len;
      for(var i=0; i<len; i++){
                    if (str.charCodeAt(i) > 255) bytes++;
      }
         return bytes;
}
alert(GetBytes("你好,as"));

8、用js写个原生的ajax过程

window.onload=function(){
document.getElementsByTagName(‘a')[0].onclick=function(){
    var xmlhttp =null;//创建对象
    if (window.XMLHttpRequest){
        var xmlhttp=new XMLHttpRequest();
    }else{
        var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var method='GET';
    var url=this.href;
    xmlhttp.open(method,url);//初始化请求 
    xmlhttp.send();//发送请求
    xmlhttp.onreadystatechange=function(){//指定回调函数 
        if(xmlhttp.readyState==4){
            if(xmlhttp.status==200||xmlhttp.status==304){
                var txt=xmlhttp.responseText;
                var json=eval('('+txt+')');
                document.getElementById('name').innerHTML='姓名'+json.ruei.name;
                document.getElementById('age').innerHTML='年龄'+json.ruei.age;
                document.getElementById('job').innerHTML='工作'+json.ruei.job;
            }
        }
    }
    return false;
}

}

9、编写一个方法去掉一个数组的重复元素

var arr = [1 ,1 ,2, 3, 3, 2, 1];
Array.prototype.unique = function(){
         var ret = [];
         var o = {};
         var len = this.length;
         for (var i=0; i<len; i++){
                   var v = this[i];
                   if (!o[v]){
                                o[v] = 1;
                                ret.push(v);
                  }
       }
        return ret;
};
alert(arr.unique());

10、原生JS的window.onload与Jquery的

$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
var whenReady = (function() {               
var funcs = [];             
var ready = false;          
function handler(e) {
    if(ready) return;      
    if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
        return;
    }
    for(var i=0; i<funcs.length; i++) {
        funcs[i].call(document);
    }
    ready = true;
    funcs = null;
}
if(document.addEventListener) {
    document.addEventListener('DOMContentLoaded', handler, false);
    document.addEventListener('readystatechange', handler, false);            //IE9+
    window.addEventListener('load', handler, false);
}else if(document.attachEvent) {
    document.attachEvent('onreadystatechange', handler);
    window.attachEvent('onload', handler);
}
return function whenReady(fn) {
    if(ready) { fn.call(document); }
    else { funcs.push(fn); }
}
})();

上汽大通内部前端面试题（纯干货）（二）

热门文章

最新文章

相关课程

相关电子书

相关实验场景