前端常见面试题及详解

1、js有哪些数据类型

基本数据类型:String,Boolean, Number, Null, Undefined
引用数据类型:Obeject(Array,Date,RegExp,Function)
//那么问题来了,如何判断某变量是否是数组类型
1、判断其是否具有"数组性质",如slice()。可自己给该变量定义slice方法,故有时会失效
2、obj instanceof Array 在某些IE版本中不正确(但是经过测试,未发现不兼容问题)
3、在ECMA Script5中定义了新方法Array.isArray(),但是此方法不兼容ie8,为了更好的兼容浏览器,可如下处理:

//定义变量
var arr = ['0','1','2'];

//判断浏览器是否支持isArray方法,Array.isArray === undefined,则浏览器不支持此方法
if(typeof Array.isArray === "undefined"){
    //定义方法
    Array.isArray = function(arg){
        //Object.prototype.toString.call()方法可查看http://www.zhufengpeixun.cn/JavaScriptmianshiti/2014-02-28/271.html
        return Object.prototype.toString.call(arg) === "[object Array]";
    };
};

console.log(Array.isArray(arr));     -->true

2、如果一个div,宽度为100px,padding-top:20%,试问这个元素的高度是多少。

所有元素的padding margin 百分比都跟其父元素的宽度有关,对应的比例是其父元素宽度的比例。

    <div style="width:200px;">
        <div style="width: 100px;padding-top: 20%;"></div>
    </div>
    //如父级元素div宽度为200px;那么子级元素div的高度为200*20%=40px;

3、什么是ajax,以及ajax常见状态码

Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。

XMLHttpRequest,status:
1xx-信息提示 这些状态代码表示临时的响应。客户端在收到常规响应之前,应准备接受衣一个或多个1xx响应。
100-继续
2xx-成功
这类状态代码表明服务器成功地接受了客户端请求。 
200-确定。客户端请求已成功。 
201-已创建。 
202-已接受。 
203-非权威性信息。 
204-无内容。 
205-重置内容。 
206-部分内容。 
3xx-重定向 
客户端浏览器必须采取更多操作来实现请求。例如,浏览器可能不得不请求服务器上的不同的页面,或通过代理服务器重复该请求。 
301-对象已永久移走,即永久重定向。 
302-对象已临时移动。 
304-未修改。 
307-临时重定向。 
4xx-客户端错误 
发生错误,客户端似乎有问题。例如,客户端请求不存在的页面,客户端未提供有效的身份验证信息。400-错误的请求。 
401-访问被拒绝。IIS定义了许多不同的401错误,它们指明更为具体的错误原因。这些具体的错误代码在浏览器中显示,但不在IIS日志中显示: 
401.1-登录失败。 
401.2-服务器配置导致登录失败。 
401.3-由于ACL对资源的限制而未获得授权。 
401.4-筛选器授权失败。 
401.5-ISAPI/CGI应用程序授权失败。 
401.7–访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS6.0所专用。 
403-禁止访问:IIS定义了许多不同的403错误,它们指明更为具体的错误原因: 
403.1-执行访问被禁止。 
403.2-读访问被禁止。 
403.3-写访问被禁止。 
403.4-要求SSL。 
403.5-要求SSL128。 
403.6-IP地址被拒绝。 
403.7-要求客户端证书。 
403.8-站点访问被拒绝。 
403.9-用户数过多。 
403.10-配置无效。 
403.11-密码更改。 
403.12-拒绝访问映射表。 
403.13-客户端证书被吊销。 
403.14-拒绝目录列表。 
403.15-超出客户端访问许可。 
403.16-客户端证书不受信任或无效。 
403.17-客户端证书已过期或尚未生效。 
403.18-在当前的应用程序池中不能执行所请求的URL。这个错误代码为IIS6.0所专用。 
403.19-不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS6.0所专用。 
403.20-Passport登录失败。这个错误代码为IIS6.0所专用。 
404-未找到。 
404.0-(无)–没有找到文件或目录。 
404.1-无法在所请求的端口上访问Web站点。 
404.2-Web服务扩展锁定策略阻止本请求。 
404.3-MIME映射策略阻止本请求。 
405-用来访问本页面的HTTP谓词不被允许(方法不被允许) 
406-客户端浏览器不接受所请求页面的MIME类型。 
407-要求进行代理身份验证。 
412-前提条件失败。 
413–请求实体太大。 
414-请求URI太长。 
415–不支持的媒体类型。 
416–所请求的范围无法满足。 
417–执行失败。 
423–锁定的错误。 
5xx-服务器错误 
服务器由于遇到错误而不能完成该请求。 
500-内部服务器错误。 
500.12-应用程序正忙于在Web服务器上重新启动。 
500.13-Web服务器太忙。 
500.15-不允许直接请求Global.asa。 
500.16–UNC授权凭据不正确。这个错误代码为IIS6.0所专用。 
500.18–URL授权存储不能打开。这个错误代码为IIS6.0所专用。 
500.100-内部ASP错误。 
501-页眉值指定了未实现的配置。 
502-Web服务器用作网关或代理服务器时收到了无效响应。 
502.1-CGI应用程序超时。 
502.2-CGI应用程序出错。application. 
503-服务不可用。这个错误代码为IIS6.0所专用。 
504-网关超时。 
505-HTTP版本不受支持。 

4、看下列代码输出为何?解释原因。

var a;
alert(typeof a); // undefined
alert(b); // 报错

// 解释:Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

var a = null;
alert(typeof a); //object

// 解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”

5、看下面的代码,输出什么,foo的类型为什么?

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
//执行完后foo的值为111,foo的类型为Number。

var foo = "11"+2+"1";    //体会加一个字符串'1' 和 减去一个字符串'1'的不同
console.log(foo);
console.log(typeof foo);
//执行完后foo的值为1121(此处是字符串拼接),foo的类型为String。

6、var numberArray = [3,6,2,4,1,5]; (考察基础API)

  1. 实现对该数组的倒排,输出[5,1,4,2,6,3]
  1. 实现对该数组的降序排列,输出[6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3
numberArray.sort(function(a,b){  //6,5,4,3,2,1
   return b-a;
})

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

function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “<”;
                   case “>”:
                      return “>”;
                   case “&”:
                      return “&”;
                   case “\””:
                      return “"”;
      }
  });
}

8、看下面代码,给出输出结果。

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

## 答案是4 4 4

//原因:Javascript事件处理器在线程空闲之前不会运行。那么问题来了,如何让上述代码输出1 2 3?

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);   
   })(i),0); 
};
## 输出1 2 3

9、如何消除一个数组里面重复的元素?

##哈希表去重算法
var arr = [1, 2, 3, 3, 4, 4, 5, 5, 6, 1, 9, 3, 25, 4];
 
function deRepeat() {
    var newArr = [];  //newArr为临时数组
    var obj = {};    //obj为hash表
    var index = 0;
    var l = arr.length;
    for (var i = 0; i < l; i++) {
        if (obj[arr[i]] == undefined) {    //如果hash表中没有当前选项
            obj[arr[i]] = 1;                      //存入hash表
            newArr[index++] = arr[i];
        } else if (obj[arr[i]] == 1)          //hash表中有当前选项
            continue;
    }
    return newArr;
 
}
var newArr2 = deRepeat(arr);
alert(newArr2); //输出1,2,3,4,5,6,9,25

10、下面这个ul,如何点击每一列的时候alert其index?(闭包)

<ul id=”test”>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

答案:

var li = document.getElementsById("test").getElementsByTagName("li");
## 方法一
 for(var i = 0;i < li.length; i++){
    li[i].index = i;
    li[i].onclick = function(){
        alert(this.index)
    }
 };
## 方法二
for(var i = 0; i < li.length; i++){
    li[i].index = i;
    li[i].onclick = (function(a){
        return function(){
            alert(a)
        }
    })(i);
};

11、定义一个log方法,让它可以代理console.log的方法。

function log(msg){
  console.log("msg");
};

log('hello world!');

## 如果要传入多个参数呢?显然上面的方法不能满足要求,所以更好的方法是:

function log() {
    console.log.apply(console, arguments);
};

那么问题来了,apply和call方法的异同?

答案:

对于apply和call两者在作用上是相同的,即是调用一个对象的一个方法,以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。 如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3]) 。

更多详细信息,请参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • 一、概念(载录于:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436...
    yuantao123434阅读 8,295评论 6 152
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 工作流程 一次HTTP操作称为一个事务,其工作过程可分为四步: 1)首先客户机与服务器需要建立连接。只要单击某个超...
    保川阅读 4,492评论 2 14
  • 标签的长时间连接(可跨域) 对Node的优点和缺点提出了自己的看法? *(优点)因为Node是基于事件驱动和无阻塞...
    aymincoder阅读 1,202评论 1 10
  • 那是个顽强的女诗人,她一点点谱写我生命中的赞歌,时间如果是生命的全部,那请你带走我吧! 当你说这句话的时候,我觉得...
    苏宇城阅读 496评论 4 4