notices

最新推荐文章于 2021-02-25 14:46:20 发布

原创最新推荐文章于 2021-02-25 14:46:20 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#面试

面试同时被 2 个专栏收录

2 篇文章

订阅专栏

css3

2 篇文章

订阅专栏

本文总结了JavaScript中的关键知识点，包括数据类型判断、字符串字节长度计算、事件监听、DOM操作等，提供了实用的代码示例。

JS

    alert(typeof(null)); // object
    alert(typeof(undefined)); // undefined
    alert(typeof(NaN)); // number
    alert(NaN==undefined); // false
    alert(NaN==NaN); // false
    var str="123abc";
    alert(typeof(str++)); // number
    alert(str);// NaN

2.编写一个方法求一个字符串的字节长度

/*假设：一个英文字符占用一个字节，一个中文字符占用两个字节*/
function getBytes(str){
    var length = str.length;
    var i =0 ;
    for(;i<str.length;i++){
        if(str.charCodeAt(i)>255) /*说明是中文字符*/
            length++;
    }
    return length;
}

3.如何控制alert中的换行？

\n alert(“p\np”);

4.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

function parseUrl(url){
    var params = {};
    var arr = url.split('?');
    if(arr.length<=1)
        return params;
     arr = arr[1].split('&');
    for(var i=0,l = arr.length;i<l;i++){
        var param = arr[i].split('=');
        params[param[0]]=param[1];
    }
    return params;
}

5.如何实现Array.prototype.forEach？

if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(fn){
      for ( var i = 0; i < this.length; i++ ) {
          fn( this[i], i, this );
      }
  };
}
["a", "b", "c"].forEach(function(value, index, array){
  assert( value, "Is in position " + index + " out of " + (array.length - 1) );
});

6.如何将arguments转为数组？

Object.prototype.slice.call(arguments)
([].slice.call(arguments)

7.获取光标的水平位置

function getX(e){
  e = e || window.event;
  //先检查非IE浏览器，在检查IE的位置
  return e.pageX || e.clentX + document.body.scrollLeft;
}

8.AJAX请求总共有多少种CALLBACK

Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

9.请给出异步加载js方案，不少于两种

异步加载方式：
defer，只支持IE
async：
创建script，插入到DOM中，加载完毕后callBack，见代码：
function loadScript(url, callback){
    var script = document.createElement("script")
    script.type = "text/javascript";
    if(script.readyState){ //IE
        script.onreadystatechange = function(){
             if (script.readyState == "loaded" ||script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
             }
       };
   } else {
//Others: Firefox, Safari, Chrome, and Opera
       script.onload = function(){
          callback();
       };
  }
  script.src = url;
  document.body.appendChild(script);
}

10.javascript继承的 6 种方法

1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承

11.JavaScript 的同源策略

概念：
同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制：
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

12.Node.js 的适用场景

1. 高并发
2. 聊天
3. 实时消息推送

13.WEB应用从服务器主动推送Data到客户端有那些方式？

1. html5 websocket
2. WebSocket 通过 Flash
3. XHR长时间连接
4. XHR Multipart Streaming
5. 不可见的Iframe
6. <script>标签的长时间连接(可跨域)

14.解决跨域问题

1. jsonp
2. iframe
3. window.name、window.postMessage
4. 服务器上设置代理页面

15.js对象的深度克隆

克隆或者拷贝分为2种： 浅度克隆 、 深度克隆 。
    浅度克隆 ：基本类型为值传递，对象仍为引用传递。
    深度克隆 ：所有元素或属性均完全克隆，并于原引用类型完全独立，即，在后面修改对象的属性的时候，原对象不会被修改。

function clone(Obj){
    var buf;
    if(Obj instanceof Array){ //数组类型
        buf = [];
        var i = Array.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;
    }
}

/*我觉得这种递归处理是为了解决那种数组中有对象，或者对象中有数组的情况*/

16.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 服务器端暂时无法处理请求（可能是过载或维护）

17.splice、split、slice这三个函数总是搞混，特此记下

splice：从数组中删除或添加元素
  arrayObject.splice(index,howmany,item1,.....,itemX)
slice：截取数组中的几个元素（不包括下标为end的元素）
  arrayObject.slice(start,end)
split：分割字符串()
  str.split(' ').join('空格');//将字符串中的空格全部替代为‘空格’

18.实现一个暴露内部变量，而且外部可以访问修改的函数

var person = function(){    
    //变量作用域为函数内部，外部无法访问    
    var name = "default";       

    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    

print(person.name);//直接访问，结果为undefined    
print(person.getName());    
person.setName("abruzzi");    
print(person.getName());

19.[]==[] 、{}=={} 都是false

20.通用的事件监听函数

var Event = {
    // 页面加载完成后
    readyEvent : function  (fn) {
      if (fn == null) {
          fn = document;
      }
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
          window.onload = fn ;
      }else{
          window.onload = function  () {
            oldonload();
            fn();
          }
      };
    },

    //添加事件
    addEvent : function(element, type, hander) {
      if (element.addEventListener) {        //非IE
               //事件类型、需要执行的函数、是否捕捉
          element.addEventListener(type, hander, false);
      }else if(element.attachEvent){        //IE
          element.attachEvent('on' + type,function  () {
              hander.call(element);
          })
      }else{
          element['on' +type] = hander;
      };
    },

    //移除事件
    removeEvent : function  (element, type, hander) {
      if (element.removeEventListener) { //非IE
          element.removeEventListener(type, handler, false)
      }else if (element.detachEvent) {  //IE
          element.detachEvent('on' + type, hander);
      }else{
          element['on' + type] = null;
      };
    },

    //阻止事件
    stopPropagation : function  (event) {
      if (event.stopPropagation) {
          event.stopPropagation();    //W3C标准
      }else{
          event.canceBubble = true;   //IE
      };

    //取消默认事件
    preventDefault : function (event) {
      if (event.preventDefault) {
            event.preventDefault();
      };
    },

    //获取事件目标
    getTarget : function (event) {
      return event.target|event.srcElement;
    },

    //获取event对象的引用，取到事件的所有信息，确保随时能使用event；
    getEvent:function (event) {
      var event = event || window.event;
      if (!event) {
          var c = this.getEvent.caller;
          while(!c){
              event = c.arguments[0];
              if (event && Event == ev.constructor) {
                  break;
              };
               c = c.caller;
          }
      };
      return event;
    }    
}

21.手写实现jq的insertAfter

通过原生的js里的insertBefore来实现insertAfter
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        //如果目标元素是最后一个子元素，则直接插入 
        parent.appendChild(newElement);
    }else{
        //不是的话就在目标元素的下一个元素的前面插入，即成为目标元素的下一个元素
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

22.千分位分隔符

    function commonfy(num){
        return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    }

CSS

link和@import的区别？

（1）link属于XHTML标签，而@import是CSS提供的。
（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
（3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
（4）link方式的样式权重高于@import的权重。
（5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

创建BNF

overflow:hidden，visibility不为visible，定位(其实是position为absolute或fixed);

溢出部分用省略号表示

单行文本

p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

多行文本

p{
    width:100%;
    line-height:25px;
    max-height:75px;    
    font-size:15;
    position:relative;  
}   
p:after{
    content: '...';
    font-size: 15px;
    position: absolute;
    bottom: 0;
    left: 45px; //最后一行只可以出现3个字          
    z-index: 179;
    width: 100%;
    background-color: white; //把多出来的字遮住     
}

纯css3画三角形

    trangle{
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent red transparent; /*向上的红色*/    
    }

HTML

前端路由实现
前端路由的两种实现原理
historyAPI、hash

HTTP

是一种无状态的协议

1. 请求报文

请求行（请求方法，url，协议版本）
请求头（键值对，包括cookie在里面）
空行
请求数据（只有post方法才有此段）

2.响应报文

状态行（协议版本，响应状态代码，状态代码的文本描述）
消息报头
空行
响应正文

2.1 响应状态类别

1xx：指示信息--表示请求已接收，继续处理。
2xx：成功--表示请求已被成功接收、理解、接受。
3xx：重定向--要完成请求必须进行更进一步的操作。
4xx：客户端错误--请求有语法错误或请求无法实现。
5xx：服务器端错误--服务器未能实现合法的请求。

2.2 常见状态代码

200 OK：客户端请求成功。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器收到请求，但是拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。
503 Server Unvailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。