JavaScript面试题中级

来源：BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

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

考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
考察点2：是否知道如何判断一个变量是什么类型的
考察点3：递归算法的设计

参考：司徒正美 _javascript深拷贝

// 方法一：
Object.prototype.clone = function() {
    var o = this.constructor === Array ? [] : {};
    for (var e in this) {
        o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
    }
    return o;
}
 
//方法二：
/**
 * 克隆一个对象
 * @param Obj
 * @returns
 */
function clone(Obj) {
    var buf;
    if (Obj instanceof Array) {
        buf = []; //创建一个空的数组
        var i = Obj.length;
        while (i--) {
            buf[i] = clone(Obj[i]);
        }
        return buf;
    } else if (Obj instanceof Object) {
        buf = {}; //创建一个空对象
        for (var k in Obj) { //为这个对象添加新的属性
            buf[k] = clone(Obj[k]);
        }
        return buf;
    } else { //普通变量直接赋值
        return Obj;
    }
}
//方法三：
function clone(newObj, obj){
  for(var i in obj){
    var typeStr = Object.prototype.toString.call(obj[i]);
    if( (typeStr === "[object Object]") || (typeStr === "[object Array]")){
      newObj[i] = clone(newObj[i]||{}, obj[i])//这里应该分别处理，因为有可能是数组
      //clone(obj[i])
    }else{
      newObj[i] = obj[i];
    }
  }
  return newObj;
}
var o1 = {
  name: "s",
  innero:{
    nn: "sss"
  }
}
var o2 = {age: 18, o2na:{name:"kk"}};
clone(o2, o1);
console.log(o2);
console.log(o1.innero === o2.innero);

2.如何消除一个数组里面重复的元素？

function quchong(arr){
  var newArr = [];
  var obj = {};
  arr.forEach(function(item){
    //if(!obj[item]){//key为字符串o[1],o["1"]
    if(!obj[(typeof item) + item]){//key为字符串o[1],o["1"]    
      newArr.push(item);
      obj[(typeof item) + item] = 1;
    }
  })
  return newArr;
}

全面：看之前总结过的

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

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

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

function Dog() {
       this.wow = function() {
               console.log("Wow");
      }
       this.yelp = function() {
              this.wow();
      }
}
function MadDog(){
  Dog.apply(this,arguments);
}
MadDog.prototype = new Dog();
MadDog.prototype.constructor = MadDog;
MadDog.prototype.sayHello = function(){
  var self = this;
  setInterval(function(){
    self.wow();
  }, 1000)
}
var d1 = new MadDog();
d1.sayHello();```
###4.下面这个ul，如何点击每一列的时候alert其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节点，需考虑浏览器兼容性和性能。

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