整理前端面试题(五) : JavaScript题目

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

function escapeHtml ( str ) {
    var exp = /[<>&]/g;
    var newStr = str.replace( exp, function( match ) {
        //该传入什么参数 
        if( match === '<' ) {
            return '<'
        }else if ( match === '>' ) {
            return '&gt'
        }else if ( match ==='&' ) {
            return '&'
        }
    }) 
    return newStr;   
}

---

2. 用js实现随机选取10–100之间的10个数字，存入一个数组，并排序

function getSortedRandomNumber () {
    var arr = [];
    for( var i = 0; i < 10; i++ ) {
        arr.push( Math.floor( Math.random() * 90 ) + 10 );
    }
    return arr.sort(function ( a, b ) {
        return a - b;
    })
}

---

3. 有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{"a":"1","b":"2","c":"","d":"xxx","e":"undefined"}

function getQueryJson ( URLstr ) {
    var queryIndex = URLstr.indexOf('?') + 1;
    var queryStr = URLstr.slice( queryIndex ); //a=1&b=2&c=&d=xxx&e
    var arr = queryStr.split( '&' ); //[ a=1, b=2, c=, d=xxx, e ]
    var obj = {};
    var resultArr =  [];
    for( var i = 0; i < arr.length; i++ ) {
        var tempArr = arr[ i ].split( '=' );
        obj[ tempArr[0] ] = tempArr[1];
    }
    for( var key in obj ){
        resultArr.push( '"' + key + '"' + ':'  + '"' + obj[ key ] + '"'   ); 
    }
    return '{' + resultArr.join(',') + '}'; //{"a":"1","b":"2","c":"","d":"xxx","e":"undefined"}
}

• 注意: 如果这道题目最后没有那个e,即URL是http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx,那么代码可简化为

function getQueryJson ( URLstr ) {
    var queryIndex = URLstr.indexOf('?') + 1;
    var queryStr = URLstr.slice( queryIndex ); //a=1&b=2&c=&d=xxx&e
    var arr = queryStr.split( '&' ); //[ a=1, b=2, c=, d=xxx, e ]
    var obj = {};
    var resultArr =  [];
    for( var i = 0; i < arr.length; i++ ) {
        var tempArr = arr[ i ].split( '=' );
        obj[ tempArr[0] ] = tempArr[1];
    }
    return JSON.stringify( obj ); //{"a":"1","b":"2","c":"","d":"xxx"}
}

---

4. 正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？

答案: 当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\表示一个\）。使用正则表达字面量的效率更高。

邮箱的正则表达式 :

var regMail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

---

5. 看下面代码，给出输出结果

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);    
  },0);  
}

结果: 4, 4, 4

追问 : 如何让代码输出1,2,3? (两种方法)

• 方法1: 采用立即执行函数

for( var i = 1; i <= 3; i++ ) {
    setTimeout( function( num ) {
        return function () {
            console.log( num );
        }
    } ( i ), 0);
}

• 方法2: 采用闭包

for( var i = 1; i <= 3; i++ ) {
    setTimeout( (function (){
        var j = i;
        return function () {
            console.log( j );
        }
    })(), 0);
}

---

6. 写一个function，清除字符串前后的空格。（兼容所有浏览器）

if( typeof String.prototype.trim !== 'function' ) {
    String.prototype.trim = function( ) {
        return this.replace ( /^\s*|\s*$/g, '' );
    }
}

---

7. Javascript中callee和caller的作用

• callee是arguments的一个属性,返回的是正在执行的函数的本身的引用
• caller返回一个函数的引用，被返回的这个函数调用了当前的函数

---

8. 实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空的函数

function clearText() {
    var texts = document.getElementsByTagName( 'input' );
    for( var i = 0; i< texts.length; i++ ) {
        if( texts[ i ].type === 'text' ) {
            texts[ i ].value = '';
        }
    }
}

---

9. 选择题

Javascript中, 以下哪条语句一定会产生运行错误？ ()
A、var _变量=NaN;
B、var 0bj = [];
C、var obj = //; 
D、var obj = {};

答案:BC 

---

10. 选择题

请选择结果为真的表达式：（）

A.null instanceof Object
B.null === undefined
C.null == undefined
D.NaN == NaN

答案: C