前端开发面试题总结(JS02)

imgres.jpg

1. 如何控制alert中的换行？
   \n alert(“p\np”);
2. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：
   var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

function parseQueryString(url){
  var params = {},
      arr = url.split("?");
  if (arr.length <= 1)
      return params;
  arr = arr[1].split("&");
  for(var i=0, l=arr.length; i<l; i++){
      var a = arr[i].split("=");
      params[a[0]] = a[1];
  }
  return params;
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2",
  ps = parseQueryString(url);
console.log(ps["key1"]);

3. 如何控制网页在网络传输过程中的数据量?

启用GZIP压缩
保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

4. 以下代码运行结果

function say() {
 // Local variable that ends up within closure
 var num = 888;
 var sayAlert = function() { alert(num); }
 num++;
 return sayAlert;
}
var sayAlert = say();
sayAlert();//889

5. 请实现ECMAScript 5中的Object.getPrototypeOf() 函数

function proto(object) {
  return !object?                null
      : '__proto__' in object?  object.__proto__
      : /* not exposed? */      object.constructor.prototype
}

6. 如何实现Array.prototype.forEach？

if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(fn){
      for ( var i = 0; i < this.length; i++ ) {
          fn( this[i], i, this );
      }
  };
}
["a", "b", "c"].forEach(function(value, index, array){
  assert( value, "Is in position " + index + " out of " + (array.length - 1) );
});

7. 如何将arguments转为数组？
   Object.prototype.slice.call(arguments);
8. 以下程序运行结果？

var ninja = function myNinja(){
  alert(ninja == myNinja);
};
ninja();
myNinja();
true、报错（error - myNinja is not defined.）

9. 如何获取光标的水平位置？

function getX(e){
  e = e || window.event;
  //先检查非IE浏览器，在检查IE的位置
  return e.pageX || e.clentX + document.body.scrollLeft;
}

10. 兼容浏览器的获取指定元素（elem）的样式属性（name）的方法

function getStyle(elem, name){
  if(elem.style[name]){//如果属性存在于style[]中，直接取
      return elem.style[name];
}
else if(elem.currentStyle){//否则 尝试IE的方法
      return elem.currentStyle[name];
}//尝试W3C的方式
else if(document.defaultView && document.defaultView.getComputedStyle){ 
      name = name.replace(/([A-Z])/g, "-$1");//W3C中为textAlign样式，转为text-align
      name = name.toLowerCase();
      var s = document.defaultView.getComputedStyle(elem, "");
      return s && s.getPropertyValue(name);
  }else{
      return null;
  }
}

11. Javascript中实现类似PHP的print_r函数

function print_r(theObj) {
  var retStr = '';
   if(typeof theObj == 'object') {
        retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
        for(var p in theObj) {
              if (typeof theObj[p] == 'object') {
                    retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
                    retStr += '<div style="padding-left:25px;">' +  print_r(theObj[p]) + '</div>';
              } else {
                    retStr += '<div>['+p+'] => <b>' + theObj[p] +  '</b></div>';
              }  
         }
        retStr += '</div>';
    }
    return  retStr;
}

12. 以下程序运行结果？

var b = parseInt("01");
alert("b="+b);
var c = parseInt("09/08/2009");
alert("c="+c);
b=1、c=0。

13. 以下程序的运行结果？

var foo = 'hello';
(function() {
     var foo= foo || 'world';
     console.log(foo);
})();
world

14. 如何规避javascript多人开发函数重名问题？

(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就行

15. 前端开发有哪些优化问题？

减少http请求次数：cssspirit,data uri
JS，CSS源码压缩
前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
用setTimeout来避免页面失去响应
用hash-table来优化查找
当需要设置的样式很多时设置className而不是直接操作style
少用全局变量
缓存DOM节点查找的结果
避免使用CSS Expression
图片预载
避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

16. AJAX请求总共有多少种CALLBACK

Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

17. 请给出异步加载js方案，不少于两种

异步加载方式：
defer，只支持IE
async：
创建script，插入到DOM中，加载完毕后callBack，见代码：
function loadScript(url, callback){
    var script = document.createElement("script")
    script.type = "text/javascript";
    if(script.readyState){ //IE
        script.onreadystatechange = function(){
             if (script.readyState == "loaded" ||script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
             }
       };
   } else {
//Others: Firefox, Safari, Chrome, and Opera
       script.onload = function(){
          callback();
       };
  }
  script.src = url;
  document.body.appendChild(script);
}

18. 函数记忆,判断是不是质数.

方法一:
function isPrime1(n){
    if(n<=3){return true}
    else{
      for(var i=2;i<Math.sqrt(n);i++){
        if(n%i==0){return false;}
      }
      return true;
    }
};
方法二:hash
  var isPrime2=(function(){//hash
    var hash={};
    return function(n){
      if(n<=3){return true}
      else if(hash[n]!==undefined){
        return hash[n];
      }else{
        for(var i=2;i<Math.sqrt(n);i++){
          if(n%i==0){return hash[n]=false}
        }
        return hash[n]=true;
      }
    }
})();

19. 数组去重

方法一:
var arr1=[1,2,3,2,1,2];
  function repeat1(arr){
    for(var i=0,arr2=[];i<arr.length;i++){
      if(arr2.indexOf(arr[i])==-1){
        arr2.push(arr[i]);
      }
    }//(遍历结束)
    return arr2;
}
方法二:hash
function repeat2(arr){
    //遍历arr中每个元素，同时声明hash
    for(var i=0,hash={};i<arr.length;i++){
     //hash中是否包含当前元素值的建
  //如果不包含,就hash添加一个新元素，以当前元素值为key，value默认为1
      if(hash[arr[i]]===undefined){
        hash[arr[i]]=1;
      }
    }//(遍历结束)
    //将hash转为索引:
    var i=0;
    var arr2=[];
    for(arr2[i++] in hash);
    return arr2;
}
方法三:
function repeat3(arr){
    return arr.sort()
             .join(",,")
             .replace(
              /(^|,,)([^,]+)(,,\2)*/g,
              "$1$2")
             .split(",,");
  }
console.log(repeat3(arr1));

20. 插入排序

var arr=[2,4,1,5,3];
  function insertSort(arr){
    //遍历arr中每个元素(i从1开始)
    for(var i=1;i<arr.length;i++){
      //将当前元素临时保存在变量t中
      var t=arr[i];
      var p=i-1;//声明变量p=i-1
      //循环:(arr[p]>t&&p>=0){
      while(arr[p]>t&&p>=0){
     //将p位置的值，赋值给p+1位置
        arr[p+1]=arr[p];
        p--;//p--
      }//(循环结束)
      arr[p+1]=t;//将t放在p+1的位置上
    }//(循环结束)
  }
  insertSort(arr);
console.log(String(arr));

21. 快速排序:

 function quickSort(arr){
    //如果arr的length<=1
    if(arr.length<=1){
      return arr;//就直接返回arr
    }
    //计算参照位p
    var p=Math.floor(arr.length/2);
    var left=[];
    var right=[];
    //删除p位置的元素
    var center=arr.splice(p,1)[0];
    //遍历arr中每个元素
    for(var i=0;i<arr.length;i++){
      if(arr[i]>=center){
        right.push(arr[i]);
      }else{
        left.push(arr[i]);
      }
    }
    return quickSort(left) .concat(center,quickSort(right))
  }
  var sortedArr=quickSort(arr);
  console.log(String(sortedArr));

22. 正则表达式

(1) "ryan5 is6 not7 a8 good9 man10"
var n=5;
var str="ryan is not a good man";
str=str.replace(/\b[a-z]+\b/g,function(kw){ return kw+n++;});
console.log(str);

23. 统计字符串中每种字符出现的次数,出现次数最多的是? 出现?次

 var str="helloworld";
  方法一：用hash
  for(var i=0,hash={};i<str.length;i++){
    if(hash[str[i]]){
      hash[str[i]]++
    }else{
      hash[str[i]]=1;
    }
  }
  console.dir(hash);
方法二：用正则
var arr=str.split("")
  .sort()
  .join("")
  .match(/([a-z])\1*/g)
  .sort(function(a,b){
return b.length-a.length; })
console.log("出现最多的是: "+arr[0][0]
  +"共"+arr[0].length+"次");
var hash={};
  arr.forEach(function(val){
    hash[val[0]]=val.length;
  });
  console.dir(hash);

24. 数组降维

var arr=[
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
  ];
  //method 1:
  for(var r=0,arr1=[];r<arr.length;r++){
    for(var c=0;c<arr[r].length;c++){
      arr1.push(arr[r][c]);
    }
  }
  console.dir(arr1);
  //method 2: 
  for(var r=0,arr2=[];r<arr.length;r++){
    arr2=arr2.concat(arr[r]);
  }
  console.dir(arr2);
//method 3:
  var arr2=[].concat.apply([],arr);
  console.dir(arr2);

25. Function赋值

  var f=function(){var a=b=1;}
  f();
  console.log(b);//1
  console.log(a);//报错
  var f=function(){var a=b=1;}
  setTimeout(f,0);
  console.log(b);//报错
  f();
  var a,b=0, fn=function(){var a=b=2;}
  fn();
  console.log(a);//undefined
  console.log(b);//2

26. 函数currying(柯里华)

  var getN;
  function add(n){
    getN=function(){console.log(n);}
    return function(m){
      n+=m;
    arguments.callee.toString=function(){
        return n;
      }
      return arguments.callee;
    }
  }
  add(1)(2)(3); getN();//6
  add(1)(2)(3)(4); getN();//10
  alert(add(1)(2)(3));//6
  alert(add(1)(2)(3)(4));//10

27. 递归

var emp={
 work:function(){//3,2,1
  var  sum=0;//+3+2+1 +2+1  +1
  for(vari=0; i<arguments.length&&arguments[0]>0;
        i++){
        sum+=arguments[i]
            +arguments.callee(
              --arguments[i]
            );
      }
      return sum;
    }
  }
  console.log(emp.work(3,2,1));//10

28. 闭包

（1）function fun(n,o){//外层函数
    console.log(o);
    return {
      fun:function(m){//内层函数 n
        return fun(m,n);
      }
    }
  }
  var a=fun(0);a.fun(1); a.fun(2); a.fun(3);
   //undefined  0      0       0
var a=fun(0).fun(1).fun(2).fun(3);
//undefined   0    1    2
var a=fun(0).fun(1); a.fun(2); a.fun(3);
//undefined  0       1      1
（2）var a=0,b=0;
  function A(a){
    A=function(b){alert(a+b++)};
    alert(a);
  }
  A(1);//1
  A(12);//13

29. OOP

（1）
window.a=300;
  function fn1(){
    this.a=100;
    this.b=200;
    return function(){
              alert(this.a)
            }.call(arguments[0])
  }
  function fn2(){ this.a=new fn1(); }
var a=new fn1().b;//300
var v=new fn1(fn2());//[object Object]
（2）
var number=2;//4  8
  var obj={
    number:4,//8
    fn1:(function(){
      //var number;
      this.number*=2;
number*=2; //声明提前  undefined
      var number=3;
      return function(){
        this.number*=2;
        number*=3;
        alert(number);
      }
    })()
  }
  var fn1=obj.fn1;
  alert(number); fn1(); obj.fn1(); 
  //4           9      27
  alert(window.number);//8
  alert(obj.number);//8
（3）
function Foo(){
  getName=function(){alert(1);};
    return this;
}
Foo.getName=function(){alert(2);};
Foo.prototype.getName=function(){
  alert(3);
};
var getName=function(){alert(4);};
function getName(){ alert(5); };
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3
（4）
var a=1;
var b={
  a:2,
  b:function(){
    console.log(this.a);//1
  }(), 
  f:this.f=function(){
    console.log(this.a);
  }
};
function f(){ console.log(3); }
f();//1
b.f();//2
(b.f)();//2
(0,b.f)();//1
（5）
var foo=function(){
  console.log(this.a);
}
var obj={a:2,foo:foo};
var a=10;
var bar=obj.foo;
var bar2=foo.bind(obj);
bar();//10
bar2();//2
foo();//10
obj.foo();//2
setTimeout(bar,0);//10
（6）
function MyObj(){ 
  this.p.pid++; 
}
MyObj.prototype.p={"pid":0}//2
MyObj.prototype.getNum=function(num){
  return this.p.pid+num;
}
var _obj1=new MyObj(); //创建新对象，继承原型pid+1
var _obj2=new MyObj(); //创建新对象，继承原型pid+2
console.log(
  _obj1.getNum(1)+_obj2.getNum(2)
);//7      2+1   +    2+2

30. 判断一个对象是不是数组类型，有五种方法：

(1) typeof 无法判断 只能判断原始类型的值和函数
(2)isPrototypeOf 判断父及对象   可检查整个原型链 //可能继承自数组
  console.log(Array.prototype.isPrototypeOf([])?"是数组":"不是数组");
  console.log(Array.prototype.isPrototypeOf({})?"是数组":"不是数组");
  console.log(Array.prototype.isPrototypeOf(function(){})?"是数组":"不是数组");�
(3)constructor 检查指定对象的构造函数 可检查整个原型链  //可能继承自数组
  var father={};
  var son={};
  father.__proto__=Array.prototype;
  son.__proto__=father;
  console.log(son.contructor==Array?"是数组":"不是数组")
  console.log({}.contructor==Array?"是数组":"不是数组");
  console.log(function(){}.contructor==Array?"是数组":"不是数组");�
(4)instanceof 检查一个对象是否是制定构造函数的实例 可检查整个原型链 //可能继承自数组
  var father={};
  var son={};
  father.__proto__=Array.prototype;
  son.__proto__=father;
  console.log(son instanceof Array?"是数组":"不是数组");
  console.log({} instanceof Array?"是数组":"不是数组");
  console.log(function(){} instanceof Array?"是数组":"不是数组");
(5)强行用要检查的对象，调用原始的toString方法  不检查整个原型链
      //[object class]: class-Array Date Object
      //只能检查最初就是数组创建的对象。
      console.log(Object.prototype.toString.call([])=="[object Array]"?"是数组":"不是数组");
      console.log(Object.prototype.toString.call({}));
      console.log(Object.prototype.toString.call(function(){}));
      console.log(Object.prototype.toString.call(/\d/));
      var father={};
       var son={};
       father.__proto__=Array.prototype;
       son.__proto__=father;
      console.log(Object.prototype.toString.call(son)=="[object Array]"?"是数组":"不是数组");//不是
      //结论: 对象一旦创建，class属性就无法修改
             //修改继承关系，也无法修改class属性
(6) Array.isArray(obj)  不检查整个原型链
      console.log(Array.isArray([]));
      console.log(Array.isArray({}));
  //如果浏览器不支持isArray
  if(Array.prototype.isArray===undefined){//if(!Array.isArray)
      //给?添加isArray方法
      Array.prototype.isArray=function(arg){
          //强行调用原始toString方法，和"[object Array]"比较
          return Object.prototype.toString.call(arg)
          =="[object Array]"?"是数组":"不是数组";
      }
  }

31. 自定义Object.create()——手写

Object.create=function(father,props){
      console.log("我的create");
      /*使用setPrototypeOf方法
      var o=Object();//1. 创建空对象
      Object.setPrototypeOf(o,father);//2. 继承father
      */
      /*不使用setPrototypeOf方法
      function Constructor(){}
      Constructor.prototype=father;
      var o=new Constructor();
      */
      Object.defineProperties(o,props);//3. 定义新属性
      return o;
  }

32. 深克隆原理

Object.clone=function(obj){//深克隆
if(typeof(obj)=="object"){//如果obj是对象
  var o=//有必要区分数组和普通对象
  Object.prototype.toString.call(obj)=="[object Array]"?[]:{};
      for(var key in obj){//遍历obj的自有属性
          //如果key是obj的自有属性
          if(obj.hasOwnProperty(key)){
              o[key]=arguments.callee(obj[key]);//arguments.callee调的是当前的Object.clone函数
              }
      }
      return o;
      }else{//如果obj是原始类型的值，就直接返回副本
          return obj;
      }
  }

33. 如果浏览器不支持every属性,every的实现原理

  if(Array.prototype.every===undefined){
     Array.prototype.every=function(fun){
      //遍历当前数组中每个元素
      for(var i=0;i<this.length;i++){
          if(this[i]!==undefined){
//调用fun,依次传入当前元素值,位置i,当前数组作为参数  ，将返回值，保存在变量r中
          var r=fun(this[i],i,this);
          if(r==false){//如果r为false
             return false;//返回false
          }
          }
           }//(遍历结束)
       return true;//返回true
     }
  }

34. 如果浏览器不支持some属性，some的实现原理

 if(Array.prototype.some===undefined){
     Array.prototype.some=function(fun){
        for(var i=0;i<this.length;i++){
        if(this[i]!==unefined){
          var r=fun(this[i],i,this);
              if(r==true){ return true; }
                }
            }
        return false;
     }    
  }

35. 浏览器不支持map属性,map的实现原理

 if(Array.prototype.map===undefined){
     Array.prototype.map=function(fun){
      //创建空数组: newArr
      var newArr=[];
      //遍历当前数组中每个元素
      for(var i=0;i<this.length;i++){
         //如果当前元素不是undefined
         if(this[i]!==undefined){//判断稀疏数组
//调用fun传入当前元素值，位置i，当前数组，将结果保存在r中
              //将newArr的i位置赋值为r
          var r=fun(this[i],i,this);
                  newArr[i]=r;
         }
      }//(遍历结束)
      return newArr;//返回newArr
     }
  }

36. 如果浏览器不支持reduce属性,reduce的实现原理

  if(Array.prototype.reduce===undefined){
     Array.prototype.reduce=function(fun,base){
       base===undefined&&(base=0);
       for(var i=0;i<this.length;i++){
      if(this[i]!==undefined){
         base=fun(base,this[i],i,this);
      }
           }
       return base;
         }
  }

37. 如果浏览器不支持bind属性, bind函数的实现原理

    if(Function.prototype.bind===undefined){
     Function.prototype.bind=function(obj/*，参数列表*/){
      var fun=this;//留住this
              //*****将类数组对象，转化为普通数组
      var args=Array.prototype.slice.call(arguments,1);
      //args保存的就是提前绑定的参数列表
      /*function slice(1){
         var sub=[];
         for(var i=0;i<length;i++){
          sub.push(arguments[i]);
         }
         return sub;
      }*/
      return function(){
                 //将后传入的参数值，转为普通数组      
         var innerArgs=Array.prototype.slice.call(arguments);//将之前绑定的参数值和新传入的参数值，拼接为完整参数之列表
         var allArgs=args.concat(innerArgs)
        //调用原始函数fun，替换this为obj，传入所有参数
        fun.apply(obj,allArgs);
      }
     }
  }