前端面试题

[问答题] 
你了解HTTP状态码吗，请随便介绍一下。
-------------------------------------------------------------------------------------
来自：前端工程师进阶检测
参考：
100 Continue   继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK     正常返回信息
201 Created   请求成功并且服务器创建了新的资源
202 Accepted   服务器已接受请求，但尚未处理
301 Moved Permanently   请求的网页已永久移动到新位置
302 Found   临时性重定向
303 See Other   临时性重定向，且总是使用
GET 请求新的URI 
304 Not Modified   自从上次请求后，请求的网页未修改过
400 Bad Request   服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
401 Unauthorized   请求未授权
403 Forbidden   禁止访问
404 Not Found   找不到如何与URI 相匹配的资源
500 Internal Server Error   最常见的服务器端错误
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

状态码在我们的这个前后端进行一个数据交互时是非常需要，他说白了就是服务器的一个状态，

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。HTTP状态码的英文为HTTP Status Code。这是菜鸟教程上的原话

这样的话，我们就能够更好的了解到这个服务器此时的一个工作状态。

如何获取UA？

如何获取UA？
function whatBrowser() {   
    //获取完整的浏览器名称
    document.Browser.Name.value=navigator.appName;   
    //获取浏览器的版本，一般不与实际的浏览器版本对应
    document.Browser.Version.value=navigator.appVersion;   
    //获取浏览器的名称。通常都是Mozilla，即使在非Mozilla的浏览器中也是如此
    document.Browser.Code.value=navigator.appCodeName;   
    //获取浏览器的用户代理字符串
    document.Browser.Agent.value=navigator.userAgent;   
}

UA识别的作用是可以使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件，从而判断用户是使用电脑浏览还是手机浏览，让网页作出自动的适应。作为一个让人头疼的IE浏览器，这个还是非常的令人烦恼的

js 如何获取cookies

// 创建 cookie
function setCookie(name, value, expires, path, domain, secure) {
     var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
     if (expires instanceof Date) {
         cookieText += '; expires=' + expires;
     }
     if (path) {
         cookieText += '; expires=' + expires;
     }
     if (domain) {
         cookieText += '; domain=' + domain;
     }
     if (secure) {
         cookieText += '; secure';
     }
     document.cookie = cookieText;
}
// 获取 cookie
function getCookie(name) {
     var cookieName = encodeURIComponent(name) + '=';
     var cookieStart = document.cookie.indexOf(cookieName);
     var cookieValue = null;
     if (cookieStart > -1) {
         var cookieEnd = document.cookie.indexOf(';', cookieStart);
         if (cookieEnd == -1) {
             cookieEnd = document.cookie.length;
         }
         cookieValue = decodeURIComponent(document.cookie.substring(cookieStart +             
         cookieName.length, cookieEnd));
     }
     return cookieValue;
}
// 删除 cookie
function unsetCookie(name) {
     document.cookie = name + "= ; expires=" + new Date(0);
}

cookie对于我们还说还是非常有用的，可能有些小伙伴还不知道什么是cookie，我查了很多的资料觉得他们说的都不是人话，所以我来简单的打个比喻，正确看到就能懂

假如你现在要去一个超市，这个超市就是我们的服务器，你去超市肯定是去做交易对吧，那么这桩交易，或者是这桩买卖就是我们的和服务器的一个交互，你（客户端）进入超市（服务器）买了很多的这个商品（数据），但是在结账的时候，服务器说，我这边得保存一下你的这个商品记录（通俗的说就是开个发票），那么这个时候的发票就是我们的cookie，这个发票只有这个超市能用，或者说这个cookie就只能让这个服务器认得出，这桩交易就好像是一个无状态的一个http协议。

js数组去重

[问答题] 
js 数组去重。
----------------------------------------------------------------------------------------------------------------------------
来自：前端工程师进阶检测
参考：
有两个地方需要注意：1、返回值是否是当前引用，2、“重复”的判断条件。
Array.prototype.uniq = function () {
 // 长度只有 1，直接返回当前的拷贝
    if (this.length <= 1) {
        return this.slice(0);
    }
    
    var aResult = [];
    for (var i = 0, l = this.length; i < l; i++) {
        if (!_fExist(aResult, this[i])) {
            aResult.push(this[i]);
        }
    }
    return aResult;
 // 判断是否重复
 function _fExist(aTmp, o) {
        if (aTmp.length === 0) {
        return false;
    }
    var tmp;
    for (var i = 0, l = aTmp.length; i < l; i++) {
        tmp = aTmp[i];
        if (tmp === o) {
            return true;
        }
 // NaN 需要特殊处理
        if (!o && !tmp && tmp !== undefined && o !== undefined && isNaN(tmp) && 
isNaN(o)) {
            return true;
        }
    }
    return false;
 }
}

说说对网站重构的理解

[问答题] 
说说对网站重构的理解。
----------------------------------------------------------------------------------------------------------------------------
来自：前端工程师进阶检测
参考：
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一
致的行为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的
UI。
对于传统的网站来说重构通常是：
1. 表格(table)布局改为 DIV + CSS 
2. 使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对 IE6 有效的) 
3. 对于移动平台的优化
4. 针对于 SEO 进行优化
5. 深层次的网站重构应该考虑的方面
6. 减少代码间的耦合
7. 让代码保持弹性
8. 严格按规范编写代码
9. 设计可扩展的 API 
10. 代替旧有的框架、语言(如 VB) 
11. 增强用户体验
12. 通常来说对于速度的优化也包含在重构中
13. 压缩 JS、CSS、image 等前端资源(通常是由服务器来解决) 
14. 程序的性能优化(如数据读写) 
15. 采用 CDN 来加速资源加载
16. 对于 JS DOM 的优化
17. HTTP 服务器的文件缓存

]来看一下百度的一道面试题

如下代码输出的结果是什么：
console.log(1+ "2"+"2");
console.log(1+ +"2"+"2");
console.log("A"- "B"+"2");
console.log("A"- "B"+2);



A.122 122 NaN NaN
B.122 32 NaN NaN2，
C.122 32 NaN2 NaN     正确答案
D.122 32 NaN2 NaN2

来看看我对这道题的理解：
    现在的中国阿里巴巴在互联网方面确实起到了领头羊的一个作用。每年的面试题，都是阿里这个公司先出题，其他的公司就望风而动，也就是说，阿里的题难了，说明今年的人才多，这样的话，其他的公司想，既然我们的老大哥都这样干了，我们的题难点也没啥问题吧，出题行业就是这样的一个潜规则啊

1. console.log(1+ "2"+"2"); 做加法时要注意双引号，当使用双引号时，JavaScript 认为是字符串，字符串相加等于 字符串合并。 因此，这里相当于字符串的合并，即为122

2. console.log(1+ +"2"+"2"); 第一个+"2"中的加号是一元加操作符，+"2"会变成数值 2，因此 1+ +"2"相当于 1+2=3. 然后和后面的字符串“2”相合并，变成了字符串"32".

3. console.log("A"- "B"+"2"); "A"-"B"的运算中，需要先把"A"和"B"用 Number 函数转换为数值，其结果为 NaN，在剪 发操作中，如果有一个是 NaN，则结果是 NaN，因此"A"-"B"结果为 NaN。 然后和"2"进行字符串合并，变成了 NaN2.

4. console.log("A"- "B"+2); 根据上题所述，"A"-"B"结果为 NaN，然后和数值 2 进行加法操作，在加法操作中，如 果有一个操作数是 NaN，则结果为 NaN。

下面来看看这个题

 上次读到一本书，《web前端技术黑客揭秘》上面是写到了同源策略，

 

        这里我不便多说什么，有兴趣的小伙伴可以去看看这本书。