面试题程序员

面试题（一）

2017-04-06  本文已影响637人  福尔摩鸡

3月1日

1. 你做的页面在哪些浏览器测试过，它们的内核分别是什么？

2. DOCTYPE的作用是什么？

<!DOCTYPE>位于文档的最顶部，它可以告诉浏览器按何种规范解析页面。

3. Quirks模式是什么？它和Standards模式有什么区别？

IE6开始对CSS提供了更好的兼容，为了保证原来的一些页面显示正常，它将DTD视为参数，如果写了则开启Quirks模式（怪癖模式，诡异模式，怪异模式，向后兼容模式），IE6将用IE5.5的内核来解析页面。

在Quirks模式下，和Standards模式相比会有布局、样式解析和脚本执行三个方面的区别：

4. div+css的布局较table布局有什么优点？

5. img的alt与title有何异同？strong与em的异同？

6. 你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

7. 为什么利用多个域名来存储网站资源会更有效？

8. 请谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让web发展的更“健康”，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

9. 请描述一下cookies、sessionStorage和localStorage的区别？

10. 简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

11. 知道的网页制作会用到的图片格式有哪些？

12. 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣）

13. 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

15. 你如何理解HTML结构的语义化？

3月2日

1. 谈谈以前端角度出发，做好SEO需要考虑什么？

2. 有哪些方式可以对一个DOM设置它的CSS样式？

3. CSS都有哪些选择器？它们的权重如何计算？

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 浏览器默认样式 > 继承

4. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

5. 超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：L-V-H-A（link,visited,hover,active）。

6. 什么是CSS Hack？ie6,7,8的hack分别是什么？

由于不同厂商的浏览器，或是同一厂商的浏览器的不同版本，对CSS的解析认识不完全一样，针对不同的浏览器写不同的CSS的过程就是CSS Hack。

_background-color:orange;           /*ie6*/
+background-color:pink;                 /*ie7*/
background-color:yellow;                /*ie8*/
:root #test { background-color:purple\9; } /*ie9*/
background-color:red\9;                 /*all ie*/

7. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

8. 什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

9. rgba()和opacity的透明效果有什么不同？

10. CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？

11. 如何垂直居中一个浮动元素？

12. 请简述px和em的区别。

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

13. 描述一个'reset'的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

14. SASS、LESS是什么？大家为什么要使用他们？

15. CSS中link和@import的区别是？

3月3日

1. 简介盒子模型。

2. 为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异。

但是初始化CSS会对搜索引擎优化造成小影响。

3.BFC是什么?

BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题。

BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用。

4. 如何解决IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。

加入display：inline

5. HTML与XHTML有什么区别？

6. html常见兼容性问题有哪些？

7. 谈谈你对web标准及w3c的理解与认识。

标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率，使用外链css和js脚本，结构行为表现的分离，页面下载与加载速度更快，内容能被更多的用户和更广泛的设备访问，更少的代码和组件，容易维护，改版方便，不需要改变页面内容，提供打印版不需要复制页面内容，提高网站的易用性。

8. 行内元素有哪些，块级元素有哪些，css的盒模型包括什么？

9. 前端页面由哪三层构成，它们的作用分别是什么？

HTML负责页面结构，CSS负责样式，JS负责行为

10. 列出display的值，说明它们的作用。position的值，relative和absolute的定位原点分别是？

11. 浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

12. 哪些css属性是可以继承的？

color、以font-开头的、以text-开头的、以line-开头的属性可以继承。

13. 行高的单位有哪些？它们有什么区别？

14. 如何解决margin的塌陷现象？

15. 清除浮动有哪些方法？

3月4日

1. javascript的typeof返回哪些数据类型？

alert(typeof[1,2]);//object
alert(typeof'leipeng');//string
vari=true;
alert(typeofi);//boolean
alert(typeof1);//number
vara;
alert(typeofa);//undefined
functiona(){};
alert(typeofa)//function

2. 列举你知道的强制类型转换和隐式类型转换。

3. split() 、join() 的区别。

前者是切割成数组的形式，后者是将数组转换成字符串。

4. 数组方法pop() push() unshift() shift()

push()尾部添加、pop()尾部删除、unshift()头部添加、shift()头部删除

5. 事件绑定和普通事件有什么区别。

6. IE和DOM事件流的区别

7. call和apply的区别

8. b继承a的方法。

function A( age, name ){ 
  this.age = age; 
  this.name = name; 
} 

A.prototype.show = function(){ 
  alert('父级方法'); 
} 

function B(age,name,job){ 
  A.apply( this, arguments ); 
  this.job = job; 
} 

B.prototype = new A();
var b = new A(14,'侠客行'); 
var a = new B(15,'狼侠','侠客');

9. 如何阻止事件冒泡和默认事件?

canceBubble()只支持IE、return false、stopPropagation()

10. 添加 删除 替换 插入到某个节点的方法。

obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()

11. javascript的本地对象，内置对象和宿主对象分别是什么？

12. window.onload和document.ready的区别？

window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数document.ready原生中没有这个方法，jquery中有 $().ready(function)，在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。
$(document).ready要比window.onload先执行。
window.onload只能出来一次，$(document).ready可以出现多次。

13. "=="和"==="的不同。

14. javascript的同源策略。

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合。

15. JavaScript是一门什么样的语言，它有哪些特点？

javaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。

基本特点：

3月5日

1. JavaScript的数据类型都有哪些？

那么，如何判断某变量是否为数组数据类型？

2. 已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

document.getElementById('ID').value

3. 希望获取到页面中所有的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]);
　　}
}

4. 设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById('ID');
dom.innerHTML = 'xxxx';
dom.style.color = '#000';

5. 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

那么，Javascript的事件流模型都有什么？

6. 下列代码输出为何？解释原因。

var a;
alert(typeof a); // undefined
alert(b); // 报错

undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

7.下列代码输出为何？解释原因。

var a = null;
alert(typeof a); //object

null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

8. 下列代码输出什么？解释原因。

var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true

undefined与null相等，但不恒等（===）

一个是number一个是string时，会尝试将string转换为number

尝试将boolean转换为number，0或1

尝试将Object转换成number或string，取决于另外一个对比量的类型

所以，对于0、空字符串的判断，建议使用“===”。“===”会先判断两边的值类型，类型不匹配时为false。

那么，看下面的代码，输出什么，foo的值为什么？

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);

执行完后foo的值为111，foo的类型为String。

9. 下列代码输出什么？

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

输出2，引用数据类型传地址。

10. 已知数组var stringArray=['This','is','Baidu','Campus']，Alert出'ThisisBaiduCampus'。

alert(stringArray.join(""));

11. 已知有字符串foo='get-element-by-id',写一个function将其转化成驼峰表示法'getElementById'。

function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

12. var numberArray=[3,6,2,4,1,5];

13. 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2017年1月1日，则输出2017-01-01。

var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

14. 将字符串"<tr><td>{$id}</td><td>{$name}</td></tr>"中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）

"<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g,'10').replace(/{\$name}/g,'Tony');

15. 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<,>,&,“进行转义。

function escapeHtml(str) {
    return str.replace(/[<>"&]/g, function (match) {
        switch (match) {
            case '<':
                return '<';
            case '>':
                return '>';
            case '&':
                return '&';
            case '\"':
                return '"';
        }
    });
}

3月6日

1. foo = foo||bar ，这行代码是什么意思？为什么要这样写？

if(!foo)foo=bar;//如果foo存在，值不变，否则把bar的值赋给foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

2. 看下列代码，将会输出什么?(变量声明提升)

var foo = 1;
(function () {
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()

输出 undefined 和 2 。

3. 用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

function randomNub(aArray, len, min, max) {
    //判断要抽取的个数是不是超过了样本总数
    if (len >= (max - min)) {
        return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
    }
    //如果抽取出的数组长度达到了抽取总数的个数，则对数组进行排序
    if (aArray.length >= len) {
        aArray.sort(function (a, b) {
            return a - b
        });
        return aArray;
    }
    //从最小值之后开始，在区间范围内随机取数
    var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
    //循环判断，如果随机取的数字在数组中已存在，则舍弃重新取
    for (var j = 0; j < aArray.length; j++) {
        if (nowNub == aArray[j]) {
            randomNub(aArray, len, min, max);
            return;
        }
    }
    //取的数在数组中不存在则加入数组中
    aArray.push(nowNub);
    randomNub(aArray, len, min, max);
    //返回数组
    return aArray;
}
var arr = [];
randomNub(arr, 10, 10, 100);

4. 把两个数组合并，并删除第二个元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

5. 怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）

6. 有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:'1',b:'2',c:'',d:'xxx',e:undefined}。

function serilizeUrl(url) {
    var urlObject = {};
    if (/\?/.test(url)) {
        var urlString = url.substring(url.indexOf("?") + 1);
        var urlArray = urlString.split("&");
        for (var i = 0, len = urlArray.length; i < len; i++) {
            var urlItem = urlArray[i];
            var item = urlItem.split("=");
            urlObject[item[0]] = item[1];
        }
        return urlObject;
    }
    return null;
}

7. 正则表达式构造函数var reg=new RegExp('xxx')与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？

8. 看下面代码，给出输出结果。�

for (var i = 1; i <= 3; i++) {
    setTimeout(function () {
        console.log(i); //4 4 4
    }, 0);
}

原因：Javascript事件处理器在线程空闲之前不会运行。

追问，如何让上述代码输出1 2 3？

for (var i = 1; i <= 3; i++) {
    setTimeout((function (a) { //改成立即执行函数
        console.log(a);
    })(i), 0);
}

9. 写一个function，清除字符串前后的空格。（兼容所有浏览器）

if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.replace(/^\s+/, "").replace(/\s+$/, "");
    }
}
// test the function 
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"

10. Javascript中callee和caller的作用？

那么，请使用callee完成斐波那契数列。

var result = [];
function fn(n) {
    //典型的斐波那契数列
    if (n == 1) {
        return 1;
    } else if (n == 2) {
        return 1;
    } else {
        if (result[n]) {
            return result[n];
        } else {
            //argument.callee()表示fn()
            result[n] = arguments.callee(n - 1) + arguments.callee(n - 2);
            return result[n];
        }
    }
}

11. Javascript中, 以下哪条语句一定会产生运行错误？

A、var _变量=NaN

B、var 0bj= []

C、var obj = //

D、var obj = {}

答案：B C

12. 以下两个变量a和b，a+b的哪个结果是NaN？

A、var a=undefined; b=NaN

B、var a='123'; b=NaN

C、var a=undefined , b=NaN

D、var a=NaN , b='undefined'

答案：A C

13. var a=10; b=20; c=4; ++b+c+a++以下哪个结果是正确的？

A、34 B、35 C、36 D、37

答案：B

14. 下面的JavaScript语句中，（ ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空。

A. for (var i = 0; i < form1.elements.length; i++) {
    if (form1.elements.type == "text")
        form1.elements.value = "";
    }
B. for (vari = 0; i < document.forms.length; i++) {
    if (forms[0].elements.type == "text")
        forms[0].elements.value = "";
    }
C. if (document.form.elements.type == "text")
    form.elements.value = "";
D. for (vari = 0; i < document.forms.length; i++) {
    for (var j = 0; j < document.forms.elements.length; j++) {
        if (document.forms.elements[j].type == "text")
            document.forms.elements[j].value = "";
        }
    }

答案：D

15. 要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是？

A. window.status='已经选中该文本框'

B. document.status='已经选中该文本框'

C. window.screen='已经选中该文本框'

D. document.screen='已经选中该文本框'

答案：A

3月7日

1. 以下哪条语句会产生运行错误？

A.var obj = ();
B.var obj = [];
C.var obj = {};
D.var obj = //;

答案：A D

2. 以下哪个单词不属于javascript保留字？

A.with

B.parent

C.class

D.void

答案：B

3. 下列代码的输出结果是？

var User = { 
    count = 1，
    getCount：function（）{ 
        return this.count;
    }
}
console.log(User.getCount());
var func = User.getCount;
console.log(func());

1 undefined（因为是window对象执行了func函数）

4.下列代码的输出结果是？

(function test(){
      var a=b=5;
      alert(typeof a);
      alert(typeof b);
})();
alert(typeof a);
alert(typeof b);

number

number

undefined

number

5. 下列JavaScript代码执行后，iNum的值是？

var iNum = 0;
for(var i = 1; i< 10; i++){
     if(i % 5 == 0){
         continue;
    }
    iNum++;
}

8

6.下列代码的输出结果是？

var a;
var b = a * 0;
if (b == b) {
          console.log(b * 2 + "2" - 0 + 4);
} else {
          console.log(!b * 2 + "2" - 0 + 4);
}

26

7.下列代码的输出结果是？

<script>
        var a = 1;
</script>
<script>
var a;
var b = a * 0;
if (b == b) {
        console.log(b * 2 + "2" - 0 + 4);
} else {
        console.log(!b * 2 + "2" - 0 + 4);
}
</script>

6

8.下列代码的输出结果是？

var t = 10;
function test(t) {
    var t = t++;
}
test(t);
console.log(t);

10

9. 下列代码的输出结果是？

var t = 10;
function test(test) {
    var t = test++;
}
test(t);
console.log(t);

10

10.下列代码的输出结果是？

var t = 10;
function test(test) {
    t = test++;
}
test(t);
console.log(t);

10

11.下列代码的输出结果是？

var t = 10;
function test(test) {
    t = t + test;
    console.log(t);
    var t = 3;
}
test(t);
console.log(t);

NaN 10

12.下列代码的输出结果是？

var a;
var b = a / 0;
if (b == b) {
        console.log(b * 2 + "2" - 0 + 4);
} else {
        console.log(!b * 2 + "2" - 0 + 4);
}

26

13.下列代码的输出结果是？

<script>
      var a = 1;
</script>
<script>
    var a;
    var b = a / 0;
    if (b == b) {
        console.log(b * 2 + "2" + 4);
    } else {
        console.log(!b * 2 + "2" + 4);
    }
</script>

Infinity24

14. 用程序实现找到html中id名相同的元素？�

<body>
    <form id='form1'>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
        <div id='div4'></div>
        <div id='div5'></div>
        <div id='div3'>id名重复的元素</div>
    </form>
</body>

var nodes=document.querySelectorAll("#form1>*");
for(var i=0,len=nodes.length;i<len;i++){
    var attr=nodes[i].getAttribute("id");
    var s=1;
    for(var j=i+1;j<len;j++){
        if(nodes[j].getAttribute("id")==attr){
            s++;
            alert("id为："+attr+"的元素出现"+s+"次");
        }
    }
}

15. 下列JavaScript代码执行后，运行的结果是？

<button id='btn'>点击我</button>
var btn = document.getElementById('btn');
var handler = {
    id: '_eventHandler',
    exec: function(){
        alert(this.id);
    }
}
btn.addEventListener('click', handler.exec);

"btn"

上一篇下一篇

猜你喜欢

热点阅读