if(typeof Array.isArray==="undefined")
 {
  Array.isArray = function(arg){
     return Object.prototype.toString.call(arg)==="[object Array]"
   }; 
 }

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

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

function combo(msg){
  var arr = msg.split("-");
  var len = arr.length;  //将arr.length存储在一个局部变量可以提高for循环效率
  for(var i=1;i<len;i++){
    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
  }
  msg=arr.join("");
  return msg;
}

var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3
numberArray.sort(function(a,b){ //6,5,4,3,2,1
  return b-a; 
})

var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 "<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, ‘Tony');　　　　

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




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


17.foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为"&&"和"||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。



18.看下列代码，将会输出什么"codetitle">复制代码 代码如下:

var foo = 1;

function(){

console.log(foo);

var foo = 2;

console.log(foo);

} 


答案：输出undefined 和 2。上面代码相当于：


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


函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
19.用js实现随机选取10--100之间的10个数字，存入一个数组，并排序。


var iArray = []; 
funtion getRandom(istart, iend){
    var iChoice = istart - iend +1;
    return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
    iArray.push(getRandom(10,100));
}
iArray.sort();


20.把两个数组合并，并删除第二个元素。
复制代码 代码如下:

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1.concat(bArray);

cArray.splice(1,1);




21.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
　　1）创建新节点
createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点
　　2）添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入
　　3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性
22.有这样一个URL：http://item.taobao.com/item.htm"htmlcode">

function serilizeUrl(url) {
  var result = {};
  url = url.split("")[1];
  var map = url.split("&");
  for(var i = 0, len = map.length; i < len; i++) {
    result[map[i].split("=")[0]] = map[i].split("=")[1];
  }
  return result;
}


23.正则表达式构造函数var reg=new RegExp("xxx")与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
　　答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\"表示"），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。
　　邮箱的正则匹配：
复制代码 代码如下:var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/; 
24.看下面代码，给出输出结果。
复制代码 代码如下:

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); 
};

1      //输出
2
3


25.写一个function，清除字符串前后的空格。（兼容所有浏览器）
　　使用自带接口trim()，考虑兼容性：




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"


26.Javascript中callee和caller的作用？
　　答案：
　　caller是返回一个对函数的引用，该函数调用了当前函数；
　　callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
　　那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用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];
    }
  }
}


中级Javascript：
　　1.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
"htmlcode">

// 方法一：
Object.prototype.clone = function(){
    var o = this.constructor === Array "object" "htmlcode">

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
    function deRepeat(){
      var newArr=[];
      var obj={};
      var index=0;
      var l=arr.length;
      for(var i=0;i<l;i++){
        if(obj[arr[i]]==undefined)
         {
          obj[arr[i]]=1;
          newArr[index++]=arr[i];
         }
        else if(obj[arr[i]]==1)
         continue;
      }
      return newArr;

    }
    var newArr2=deRepeat(arr);
    alert(newArr2); //输出1,2,3,4,5,6,9,25


3.小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：


function Dog() {
    this.wow = function() {
        alert('Wow');
   }
    this.yelp = function() {
       this.wow();
   }
}


小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）
　　答案：


function MadDog() {
  this.yelp = function() {
     var self = this;     
     setInterval(function() {
        self.wow();   
     }, 500);
   }
}
MadDog.prototype = new Dog();     

//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();


4.下面这个ul，如何点击每一列的时候alert其index"codetitle">复制代码 代码如下:

<ul id=”test”>

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>


答案：




// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
  lis[i].index=i;
  lis[i].onclick=function(){
    alert(this.index);
  };
}

//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
  lis[i].index=i;
  lis[i].onclick=(function(a){
    return function() {
      alert(a);
    }
  })(i);
}


5.编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。
　　/*** @param selector {String} 传入的CSS选择器。* @return {Array}*/
　　答案：（过长，点击打开）


var query = function(selector) {
        var reg = /^(#)"function") {
              result.push(document.querySelector(regResult[3]));
            }
            else {
              result.push(document.getElementById(regResult[3]));
            }
          }
        }
        //如果是class选择器
        else if(regResult[2]) {
          if(regResult[3]) {
            if(typeof document.getElementsByClassName === 'function') {
              var doms = document.getElementsByClassName(regResult[3]);
              if(doms) {
                result = converToArray(doms);
              }
            }
            //如果不支持getElementsByClassName函数
            else {
              var allDoms = document.getElementsByTagName("*") ;
              for(var i = 0, len = allDoms.length; i < len; i++) {
                if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
                  result.push(allDoms[i]);
                }
              }
            }
          }
        }
        //如果是标签选择器
        else if(regResult[3]) {
          var doms = document.getElementsByTagName(regResult[3].toLowerCase());
          if(doms) {
            result = converToArray(doms);
          }
        }
        return result;
      }

      function converToArray(nodes){
         var array = null;     
         try{    
            array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器     
         }catch(ex){
           array = new Array();     
           for( var i = 0 ,len = nodes.length; i < len ; i++ ) { 
             array.push(nodes[i])     
           }     
         }   
         return array;
     }


6.请评价以下代码并给出改进意见。


if(window.addEventListener){
  var addListener = function(el,type,listener,useCapture){
    el.addEventListener(type,listener,useCapture);
 };
}
else if(document.all){
  addListener = function(el,type,listener){
    el.attachEvent("on"+type,function(){
     listener.apply(el);
   });
  } 
}


评价：
"htmlcode">

function addEvent(elem, type, handler){
　　if(elem.addEventListener){
　　　　elem.addEventListener(type, handler, false);
　　}else if(elem.attachEvent){
　　　　elem['temp' + type + handler] = handler;
　　　　elem[type + handler] = function(){
　　　　elem['temp' + type + handler].apply(elem);
　　};
　　elem.attachEvent('on' + type, elem[type + handler]);　
 }else{
　　elem['on' + type] = handler;
　　}
}


7.给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：
　　addSpace("hello world") // -> 'h e l l o w o r l d'
复制代码 代码如下:

String.prototype.spacify = function(){

return this.split('').join(' ');

};


接着上述答题，那么问题来了
　　1）直接在对象的原型上添加方法是否安全？尤其是在Object对象上。(这个我没能答出？希望知道的说一下。)　
　　2）函数声明与函数表达式的区别？　
　　答案：在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。（函数声明提升）

　　8.定义一个log方法，让它可以代理console.log的方法。
　　可行的方法一：
复制代码 代码如下:

function log(msg)　{

console.log(msg);

}



log("hello world!") // hello world!


如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：
复制代码 代码如下:

function log(){

console.log.apply(console, arguments);

};　　


那么问题来了，apply和call方法的异同？
答案：
　　对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

　　但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。 如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 。
　　9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
　　答案：
　　伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

　　假设接第八题题干，我们要给每个log方法添加一个"(app)"前缀，比如'hello world!' ->'(app)hello world!'。方法如下：


function log(){
    var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法，将argument转化为真正的数组
    args.unshift('(app)');
 
    console.log.apply(console, args);
   };


10.对作用域上下文和this的理解，看下列代码：


var User = {
 count: 1,

 getCount: function() {
  return this.count;
 }
};

console.log(User.getCount()); // what"htmlcode">

Function.prototype.bind = Function.prototype.bind || function(context){
  var self = this;

  return function(){
   return self.apply(context, arguments);
  };
}

var func = User.getCount.bind(User);
console.log(func());


11.原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？
　　window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
　　$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 




/*
 * 传递函数给whenReady()
 * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
 */
var whenReady = (function() {        //这个函数返回whenReady()函数
  var funcs = [];       //当获得事件时，要运行的函数
  var ready = false;     //当触发事件处理程序时,切换为true
  
  //当文档就绪时,调用事件处理程序
  function handler(e) {
    if(ready) return;    //确保事件处理程序只完整运行一次
    
    //如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
    if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
      return;
    }
    
    //运行所有注册函数
    //注意每次都要计算funcs.length
    //以防这些函数的调用可能会导致注册更多的函数
    for(var i=0; i<funcs.length; i++) {
      funcs[i].call(document);
    }
    //事件处理函数完整执行,切换ready状态, 并移除所有函数
    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);
  }
  //返回whenReady()函数
  return function whenReady(fn) {
    if(ready) { fn.call(document); }
    else { funcs.push(fn); }
  }
})();


如果上述代码十分难懂，下面这个简化版：


function ready(fn){
  if(document.addEventListener) {    //标准浏览器
    document.addEventListener('DOMContentLoaded', function() {
      //注销事件, 避免反复触发
      document.removeEventListener('DOMContentLoaded',arguments.callee, false);
      fn();      //执行函数
    }, false);
  }else if(document.attachEvent) {    //IE
    document.attachEvent('onreadystatechange', function() {
      if(document.readyState == 'complete') {
        document.detachEvent('onreadystatechange', arguments.callee);
        fn();    //函数执行
      }
    });
  }
};


12.（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
　　回答出概念即可，下面是几个要点
1.给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

2.mousedown事件触发后，开始拖拽

3.mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置

4.mouseup时，拖拽结束

5.需要注意浏览器边界的情况
13.


function setcookie(name,value,days){ //给cookie增加一个时间变量
　　var exp = new Date(); 
　　exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为days天
　　document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
function getCookie(name){
　　var result = "";
　　var myCookie = ""+document.cookie+";"; 
　　var searchName = "+name+"=";
　　var startOfCookie = myCookie.indexOf(searchName);
　　var endOfCookie;
　　if(satrtOfCookie != -1){
　　　　startOfcookie += searchName.length;
　　　　endOfCookie = myCookie.indexOf(";",startOfCookie);
　　　　result = (myCookie.substring(startOfCookie,endOfCookie));
　　}
　　return result;
}
(function(){
　　var oTips = document.getElementById('tips');//假设tips的id为tips
　　var page = {
　　check: function(){//检查tips的cookie是否存在并且允许显示
　　　　var tips = getCookie('tips');
　　　　if(!tips || tips == 'show') return true;//tips的cookie不存在
　　　　if(tips == "never_show_again") return false;
　　},
　　hideTip: function(bNever){
　　　　if(bNever) setcookie('tips', 'never_show_again', 365);
　　　　oTips.style.display = "none";//隐藏
　　},
　　showTip: function(){
　　oTips.style.display = "inline";//显示，假设tips为行级元素
　　},
　　init: function(){
　　　　var _this = this;
　　　　if(this.check()){
　　　　_this.showTip();
　　　　setcookie('tips', 'show', 1);
　　}
　　oTips.onclick = function(){
　　　　_this.hideTip(true);
　　};
　　}
　　};
 page.init();
})();


14.说出以下函数的作用是？空白区域应该填写什么？


//define 
(function(window){
  function fn(str){
    this.str=str;
  }

  fn.prototype.format = function(){
    var arg = ______;
    return this.str.replace(_____,function(a,b){
       return arg[b]||"";
   });
  }
  window.fn = fn;
})(window);

//use
(function(){
  var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
  console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
})();


答案：访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容，返回一个格式化后的结果：
第一个空是：arguments

第二个空是：/\{(\d+)\}/ig
15.用面向对象的Javascript来介绍一下自己。（没答案哦亲，自己试试吧）
答案： 对象或者Json都是不错的选择哦。
16.讲解原生Js实现ajax的原理。
Ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
XMLHttpRequest这个对象的属性有：
"htmlcode">

ajax({
    url: "./TestXHR.aspx",       //请求地址
    type: "POST",            //请求方式
    data: { name: "super", age: 20 },    //请求参数
    dataType: "json",
    success: function (response, xml) {
      // 此处放成功后执行的代码
    },
    fail: function (status) {
      // 此处放失败后执行的代码
    }
  });

  function ajax(options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);

    //创建 - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
    } else { //IE6及其以下版本浏览器
      var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //接收 - 第三步
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        var status = xhr.status;
        if (status >= 200 && status < 300) {
          options.success && options.success(xhr.responseText, xhr.responseXML);
        } else {
          options.fail && options.fail(status);
        }
      }
    }

    //连接 和 发送 - 第二步
    if (options.type == "GET") {
      xhr.open("GET", options.url + "" + params, true);
      xhr.send(null);
    } else if (options.type == "POST") {
      xhr.open("POST", options.url, true);
      //设置表单提交时的内容类型
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(params);
    }
  }
  //格式化参数
  function formatParams(data) {
    var arr = [];
    for (var name in data) {
      arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace("."));
    return arr.join("&");
  }


上述代码大致表述了ajax的过程，释义自行google，问题未完，那么知道什么是Jsonp和pjax吗？
　　答案：
　　Jsonp：(JSON with Padding)是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 js 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。JSONP由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。


　　pjax：pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。（关键点：可以实现ajax无法实现的后退功能）pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。


觉得题目还ok的亲点个推荐哦，题量会不断增加。
　　你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
　　暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
原文：http://www.cnblogs.com/coco1s/p/4029708.html

                                
                                

                                    2014前端笔试面试题,javascript 
                                

                                    标签：
                                        
2014前端笔试面试题,javascript
                                     

                                
相思资源网 Design By www.200059.com