前端面试2

1.Q：javascript的typeof返回哪些数据类型
基本数据类型：string,boolean,number,undefined,function,object
2.Q：如何判断某变量是否为数组数据类型？
方法一.判断其是否具有“数组性质”，如push()方法。由于自己也可以给该变量定义push方法，所以这种方式并不准确  
方法二.obj instanceof Array 在某些IE版本中不正确
方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：
if(typeof Array.isArray==="undefined"){
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"} }
3.Q.例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== -）
4.Q.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
5.Q.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除  Unshift()头部添加  shift()头部删除
6.Q.IE和标准下有哪些兼容性的写法
var ev = ev || window.event
document.body  ||  document.documentElement 
xxx.currentStyle ||  window.getComputedStyle(xxx, null)
event.cancelBubble = true;    event.stopPropagation();
7.Q.ajax请求的时候get 和post方式的区别
1. 一个在url后面 一个放在虚拟载体里面  
2. get有大小限制
3. 安全问题  
4. 字符集问题
5. 需求不同，请求数据和提交数据
8.ajax请求时，如何解析json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
9.写一个获取非行间样式的函数
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]
}
getStyle(oDiv, 'backgroundColor')
10.事件委托是什么
利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
11.闭包是什么，有什么特性，对页面有什么影响
函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回
//好处：
//1.希望一个变量长期驻扎在内存当中
//2.避免全局变量的污染
//3.私有成员的存在


//用法：
//1.模块化代码
//2.在循环中直接找到对应元素的索引
var aLi = document.getElementsByTagName('li');

/*for(var i=0;i<aLi.length;i++){

(function(i){

aLi[i].onclick = function(){
alert(i);
};

})(i);


}*/

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


aLi[i].onclick = (function(i){   //可以填入a

return function(){
alert(i);
console.log(this.className)
}

})(i);



}
12.添加、移除、移动、复制、创建和查找节点的方法
1）创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
2）添加、移除、替换、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入
3）查找
getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性
13.jsonp为什么不是真正的ajax
jsonp动态创建script标签，在回调函数中包裹数据，没有通过XMLHttpRequest对象
Ajax是页面无刷新请求数据操作
14.document load 和document ready的区别
document.onload 是在结构和样式加载完才执行js
document.ready原生种没有这个方法，jquery中有 $().ready(function)
15 ”==”和“===”的不同
前者会自动转换类型  后者不会
javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
16 排序算法
快速
function quickSort(arr){


if(arr.length<=1){
return arr;
}

var num = Math.floor(arr.length/2);

var numValue = arr.splice(num,1);

var left = [];
var right = [];

for(var i=0;i<arr.length;i++){
if(arr[i]<numValue){
left.push(arr[i]);
}
else{
right.push(arr[i]);
}
}

return quickSort(left).concat([numValue],quickSort(right));
//return left.concat(numValue,right)


}
冒泡


function shuzu(arr)
{
for(var i=0;i<arr.length;i++)
{
for(var j=0;j<arr.length-i;j++)
{
if(arr[j]>arr[j+1])
{
var tmp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=tmp;
}
}
}
return arr;
}
var arr1=[1,3,4,5,9,7,6]
console.log(shuzu(arr1));

17 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。
典型的是函数的 argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回 
NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array 对象。
18 在javascript中如何检测客户端的浏览器和操作系统类型
var resolution = "分辨率:" + window.screen.width + "*" + window.screen.height;,
var ua = window.navigator.userAgent
19Cookie在客户机上是如何存储的
Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。
当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookies 会帮你在
网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次
留下的Cookies资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。
20 如何获取javascript数组中的最大值和最小值？
alert(Math.max(1,23,56,88,56));//最大值
alert(Math.min.apply(null, a));//最小值
21 判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30
vasr reg=/^[a-zA-Z]\w{5,29}$/;
22 请举例使用callee属性实现函数的递归使用
function(num){
if(num <= 1) return 1;
return num*arguments.callee(num-1);
}
解释：callee代表函数本身的引用
23 Ajax同步和异步的区别，如何解决跨域问题?
同步即按步骤顺序执行，异步即同时执行
jsonp，即动态执行json数据处理的方法，使用JS在浏览器页面上动态生成一个<script>标签，并加载js文件来执行。
需要服务器支持。
24 apply和call方法有形似之处，请说出二者的区别
apply固定是两个参数，第一个是调用的对象，第二个是一个带有下标的数组
call接受的参数是不固定的，第一个是对象 ，第二个参数数量不确定
25 请给Array本地对象增加一个原型方法，他的用途是删除数组中重复的条目，
Array.prototype.unique = function(){
var arr =[];
for(var i=0;i<this.length;i++){
if(arr.indexOf(this[i]) == -1){
arr.push(this[i]);
}
}
return arr;
}

var arr1=[1,2,4,4,5,6,6];
console.log(arr1.unique())
26 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
var arr = new Array();
var boxs = document.getElementsByTagName("input");
for(var index in boxs) {
if(boxs[index].type == "checkbox"){
arr.push(boxs[index]);
}
}
return arr;
27 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
box.onlick = function(){}
box.addEventListener("click",function(){},false);
function xxx(){}
<button οnclick="xxx()"></button>
28 看下列代码输出为何？解释原因。
var a;
alert(typeof a); // undefined
alert(b); // 报错
变量a未赋值，初始值为undefined
变量b未定义，所以报错
var a = null;
alert(typeof a); //objec
所有对象的默认值都是null
看下列代码,输出什么？解释原因。
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo)
number
29 将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
str.replace(/{\$id}/g,"10").replace(/{\$name}/g,"Tony");
30 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义 <  >  & "
function escapeHtml(str) {
return str.replace(/[<>"&]/g, function(match) {
    switch (match) {
case "<":    return "<";
case ">":    return ">";
case "&":    return "&";
case "\"":   return """;
      }
  });
}
31 有这样一个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}。
var url = "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e";
var paramstr = url.substring(url.indexOf("?")+1);
var pms = paramstr.split("&");
var obj = {};
for(var i=0;i<pms.length;i++){
if(pms[i].indexOf("=") < 0){
obj[pms[i]] = "undefined";
}else{
var pa = pms[i].split("=");
obj[pa[0]] = pa[1];
}
}
alert(obj.toSource());
32 看下面代码，给出输出结果。
for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);    
  },0);  
};
3个4
for (var i=1; i<=9; i++) {
     (function(i){
        setTimeout( function timer(){
            console.log( i );
         }, 1000 );
     })( i );
}
1,2,3,4,5,6,7,8,9
33 写一个function，清除字符串前后的空格。（兼容所有浏览器）
String.prototype.trim = function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
34下面这个ul，如何点击每一列的时候alert其index?（闭包）
<ul id=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
var aLi = document.getElementsByTagName('li');

/*for(var i=0;i<aLi.length;i++){

(function(i){

aLi[i].onclick = function(){
alert(i);
};

})(i);


}*/

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


aLi[i].onclick = (function(i){   //可以填入a

return function(){
alert(i);
console.log(this.className)
}

})(i);



}