前端面试题错题集(二)

用javascript实现用户登录验证的代码。

这个我一开始想到的是验证邮箱啊，判断是否空啊，然后密码要星号啊这类。
但是没想到一点。就是一开始显示的时候应该自动选择焦点到第一个输入内容。因此觉得还是有必要记录以下的。


<script language=javascript>
function checkSubmit()
{
    if ((document.form1.name.value)==”)
    {
        window.alert (‘姓名必须填写’);
        document.form1.name.select();
        document.form1.name.focus();
        return false;
    }
    else
        return true;
}
</script>
<form name=”form1″ onsubmit=”javascript:return checkSubmit()”>
<input type=”text” name=”name”>
</form>

请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。

一开始我自己是这么写的：
Array.prototype.getSingle = function(){
    var temp  = old;
    var newArray = [];
    function check(item){
       var flag = true;
      for(var i  = 0 ; i < newArray.length;i++){
            if(item == newArray[i]){
                flag = false;
           }
      }
     return flag;
    }
    for(var i = 0; i<= old.length;i++){
      if(check(temp[i])){
         newArray.push(temp[i]);
     }
   }
    return newArray;
}

很惭愧，写的时候发现自己忘了怎么从外部原型拿到数据了。。觉得用this好像不太多。。。然后就先用old来代替了。

看了下答案：
Array.prototype.distinct = function() {
    var ret = [];
    for (var i = 0; i < this.length; i++)
    {
        for (var j = i+1; j < this.length;) {   
            if (this[i] === this[j]) {
                ret.push(this.splice(j, 1)[0]);
            } else {
                j++;
            }
        }
     }
     return ret;
}
//for test
alert(['a','b','c','d','b','a','e'].distinct());

感觉还是答案写的简练。大致思路还是类似的就是循环判断。

请填充代码，使mySort()能使传入的参数按照从小到大的顺序显示出来。
function mySort() {
    var tags = new Array();//使用数组作为参数存储容器
    请补充你的代码
    return tags;//返回已经排序的数组
}
 
var result = mySort(50,11,16,32,24,99,57,100);/传入参数个数不确定
console.info(result);//显示结果

这个感觉应该考的就是冒泡。。。然而因为原生有sort的缘故我很久没自己写排序算法了。。。造成了这一题我跪了。。。

这题一共看到两种解法，一种就是原生sort传比较方法:
function mySort() {
    var tags = new Array();
    for(var i = 0;i < arguments.length;i++) {
        tags.push(arguments[i]);
    }
    tags.sort(function(compare1,compare2) {
        return compare1- compare2;
    });
    return tags;
}
 
var result = mySort(50,11,16,32,24,99,57,100);
console.info(result);

还有一种就是自己写冒泡排序
function mySort() {
    var tags = new Array();
    tags = Array.prototype.slice.call(arguments);//对参数进行分割
    for(var i=0; i<tags.length; i++) {遍历
        for(var j=i+1; j<tags.length; j++) {
            if(tags[i] > tags[j]) { //从小到大排序
                var temp = tags[i];
                tags[i] = tags[j];
                tags[j] = temp;
            }
        }
    }
    return tags;
}

输出对象中值大于2的key的数组

这个我一开始想到的是用for in 来遍历然后判断。后来看了下答案。

输出对象中值大于2的key的数组
var data = {a: 1, b: 2, c: 3, d: 4};
Object.keys(data).filter(function(x) { return 1 ;})
期待输出：[“c”,”d”]

我都快忘了还有Keys这个属性了。。。

Object.keys(data)返回的是data可被枚举的属性，为 ["a", "b", "c", "d"]，对这个数组中的每一个元素用filter方法过滤，data["x"]等价于data.x,就是表示data对象的x属性的值,注意这里的data["x"]中的x是带引号的

请列举js异步编程的方法

这里我一开始想到的是Promise 异步的话好像还有ajax，不过我知道考点是什么。后来看了答案是这样的：

回调函数，这是异步编程最基本的方法。
事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
发布/订阅，上一节的"事件"，完全可以理解成"信号"。
Promises对象，Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。


$.ajax, 异步加载请求，加载完成后执行回调。
Promise类。
promise = new Promise( function(resolve, reject) {
   // heavy function
    resolve('ok')
});
promise.then( function(data1,data2) {
     //here heavy function has been done
     //your code here
})
自定义回调
var heavyFunc = function(callback) {
    // heavy function here
    // a lot of time
    callback()
}
var callback = function() {
    // execute when heavy function is done
    // your code here
}
heavyFunc(callback)

验证邮箱
这题一看就是看考正则的。。。但我正则的功力在之前一个项目之后已经好久没使用，退化的只能看别人的正则啧啧称赞了。。。

var checkEmail  = function(email){
var preg = 
        "(^[a-zA-Z]|^[\\w-_\\.]*[a-zA-Z0-9])@(\\w+\\.)+\\w+$"，,
    pregObj  =new RegExp(preg);
    return pregObj.test(email);
}

请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。
这个也是考基础的。我大概知道怎么写的，但是一下子让自己用最原始方法。

<div id=”example”>  
    <p class=”slogan”>淘！你喜欢</p>
</div>


 window.onload = function() {
            var div = document.createElement('div');
            div.id = "example";
            var p = document.createElement('p');
            p.className = "slogan";
            p.innerHTML = '淘！你喜欢';
            div.appendChild(p);
            document.body.appendChild(div);
        }

请编写一个通用的事件注册函数（请看下面的代码）。
这个很简单的。高程里的更详细。我就做下记录

function addEvent(element, type, handler)
{
    // 在此输入你的代码，实现预定功能
 
    if (element.addEventListener)
    {
        element.addEventListener(type, handler, false);
    }
    else if (element.attachEvent)     //for IE
    {
        element.attachEvnet(“on” + type, handler);
    }
    else
    {
        element[“on” + type] = handler;
    }
}

请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：
var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”
var obj = parseQueryString(url);
alert(obj.key0)  // 输出0

平时看到这种我一般都是忽略的。。。因为实际项目中没怎么用过这种方式。不过看到不少面试题都要考。。估摸着也是考正则.

答案有两种方法:
第一种：
function parseQueryString ( name ){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

第二种：
var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2.............";
var obj = parseQueryString(url);
alert(obj.key2);
       
function parseQueryString(argu){
 
  var str = argu.split('?')[1];
  var result = {};
  var temp = str.split('&');
  for(var i=0; i<temp.length; i++)
  {
     var temp2 = temp[i].split('=');
     result[temp2[0]] = temp2[1];
  }
  return result;
}