前端面试题总结(一)

总结一些，感谢各位大神贴出来的面试题。我就是总结一下。前端的面试题，我那种小菜鸟，也是一次复习的机会吧。最近看了很多移动端开发的东西，过一段时间也要整理一下。还是要多敲代码呀。

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

　　w3c的答案还是不错的：

　　JavaScript 是属于网络的脚本语言！

　　JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

　　JavaScript 是因特网上最流行的脚本语言。

　　JavaScript 很容易使用！你一定会喜欢它的

2.JavaScript的数据类型都有什么？

那是很基础：js六大数据类型：number、string、object、Boolean、null、undefined

3.如何判断JavaScript数据类型？

一使用typeof

var a="string"; //string
var a=1;  //number
var a=false; //boolean
var a; console.log(typeof a); //undfined
var a = null; console.log(typeof a); //object
var a = document; console.log(typeof a); //object
var a = []; console.log(a); //object
var a = function(){}; console.log(typeof a) //function   除了可以判断数据类型还可以判断function类型

null、对象、数组返回的都是object类型，那接下来看一看如何判断object类型

js判断数组类型的方法

一、instanceof

instance，故名思义，实例，例子，所以instanceof 用于判断一个变量是否某个对象的实例，是一个三目运算式---和typeof最实质上的区别

a instanceof b?alert("true"):alert("false") //注意b值是你想要判断的那种数据类型，不是一个字符串，比如Array

var a=[];
console.log(a instanceof Array) //返回true

二、constructor

constructor 构造器属性返回对创建此对象的数组函数的引用

就是返回对象相对应的构造函数。

function employee(name,job,born){
    this.name=name;
    this.job=job;
    this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);
console.log(bill.constructor); //输出function employee(name, jobtitle, born){this.name = name; this.jobtitle = job; this.born = born;}

判断类型的方法是:返回都是 true

console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);

比较好的写法是：

function isArray(object){
    return object && typeof object==='object' &&
            Array == object.constructor;
}

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

　　document.getElementById('id').value();

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

var list = document.getElementByTagName('input');
var checkBoxList = []; 
var len = domList.length;
while (len--)
 {　　//使用while的效率会比for循环更高  
     　if (domList[len].type == ‘checkbox') {  
  　　checkBoxList.push(list[len]);  
　}

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

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

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

• 直接在DOM里绑定事件：<div onclick=”test()”></div>
• 在JS里通过onclick绑定：xxx.onclick = test
• 通过事件添加进行绑定：addEventListener(xxx, ‘click', test)

8.Javascript的事件流模型都有什么？

•"事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
•"事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
•"DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

9.什么事冒泡事件，应该怎么阻止？

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~
3.阻止事件的默认行为，例如click <a>后的跳转~
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;

8.什么是Ajax和JSON，它们的优缺点。Ajax的js实现原理

实现原理：

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点：
•可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
•避免用户不断刷新或者跳转页面，提高用户体验
缺点：
•对搜索引擎不友好（
•要实现ajax下的前后退功能成本较大
•可能造成请求数的增加
•跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

9.看下列代码输出为何？解释原因

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

参考js解析过程的随笔：在js预处理时，会建立一个词法作用域，a 是var声明变量，所有给了个undefined。而比不是声明的，所以没有定义，所有保错.

10.看下列代码,输出什么？解释原因

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

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

11.看下面的代码，输出什么，foo的类型为什么？

var foo = "11"+2-"1";  
console.log(foo);  
console.log(typeof foo);  
执行完后foo的值为111，foo的类型为Number。

var foo = "11"+2+"1"; //体会加一个字符串'1' 和 减去一个字符串'1'的不同  
console.log(foo);  
console.log(typeof foo);　　执行完后foo的值为1121(此处是字符串拼接)，foo的类型为String。

12.看代码给答案。

var a = new Object();        
a.value = 1;        
b = a;  
b.value = 2;  
alert(a.value);　　  
答案：2（考察引用数据类型细节）