面试小题

一个程序员技术最牛逼的时候是什么时候？面试的时候~  虽然是个段子但是还是有点道理的。准备了一点点基础小题目；

对象属性的遍历

这里我们需要去除其原型上的属性

var obj={
            "a":1,
            "b":2
        }

for(var key in obj)
{
     if(obj.hasOwnProperty(key))
    {
       console.log(key);
       console.log(obj[key]);
    }
}

dom2和dom0之间的区别

  0级DOM 分为2个：一是在标签内写onclick事件 ；二是在JS写onlicke=function（）{ } 函数

  2级DOM 只有一个：监听方法，原生有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener().

  区别：

  如果定义了两个dom0级事件，dom0级事件会覆盖，dom2不会覆盖，会依次执行

  dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

CSS3雪碧图(sprite)

  优点：

1）首先，毫无疑问，多找图片合并为一张图片后，减少了http请求，提高了网页性能；

2）通常情况下，合并的图片尺寸大小要小于未合并图片的总尺寸大小；

3）不需要单独给每张图片命名，只需给合并图片命名即可；

4）可维护性：双刃剑，当需要统一修改图片风格、大小时，易于实现。

  缺点：

1）需要明确图片的宽高，以实现图片定位显示；

2）因为需要使用background-image和background-position属性显示图片，所以一般只用于合并修饰性的图片，不建议用于功能性的图片。

3）可维护性：双刃剑，当需要单独针对某图片修改风格、大小时，可引起其他图片的改动。

 应用场合：项目中需要用到比较多的logo、修饰性图片时，且指定图片的宽高，可采用CSS sprite合并图片。

阻止冒泡和默认事件

//阻止冒泡

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

//阻止默认

function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else
        window.event.returnValue = false; 
    return false; 
}

不过React中的event是被封装过后的，如果要阻止冒泡：e.nativeEvent.stopImmediatePropagation()

深拷贝的实现（对象）

思路其实是在对象的遍历基础上又加深了一下；

只是在遇到一个对象引用性的属性时，我们需要再次对其调用深拷贝函数；

例如这样

var obj={

obj2:{

   xxx

        }

}

function deepCopy(p,c)
{
      c=c || { };
      for( var i in p){
          if(p.hasOwnProperty(i)){
          if(typeof p[i]==="object"){
               c[i]=Array.isArray(p[i])?[]:{};
               deepCopy(p[i],c[i]);}
          else{
               c[i]=p[i];
               }
             }
           }
       return c;
}

节点的拷贝

利用cloneNode原生方法，里面的参数设置为true或者false来决定是否拷贝下面的子节点;

这种拷贝还能包括节点上的所有属性，包括定义的方法，不过是写在节点里面的方法<p class="xxx"  onClick="xxx" ></p>

使用js随机抽取(10-100)之间的数据

function getRandom(istart, iend){
        var iChoice = iend - istart +1;
        return Math.floor(Math.random() * iChoice + istart);
}

getRandom(10,100)

 Math.random（） 函数返回的值 大于等于0小于1，所以包括0 不包括1

编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。

	var query = function(selector) {
                var reg = /^(#)?(\.)?(\w+)$/img;
                var regResult = reg.exec(selector);
                var result = [];
                //如果是id选择器
                if(regResult[1]) {
                    if(regResult[3]) {
                        if(typeof document.querySelector === "function") {
                            result.push(document.querySelector(regResult[0]));
                        }
                        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;
          }

注意： querySelector和我们的jq的选择器用法差不多

document.querySelector("#test");

document.getElementById("test");