前端面试题总结(一)

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

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判断数组类型的方法

1、instanceof

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

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

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

2、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;
}

四、已知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（考察引用数据类型细节）