前端js面试题再谈

1 手写一个jsonp

function jsonp(url,params,callback){
     
  //判断是否含有参数
  let queryString = url.indexOf("?")==="-1"?"?":"&";
  //添加参数
  for(var k in params){
     
    if(params.hasOwnProperty(k)){
     
    queryString += k + "=" + params[k] + "&";
    }
  }
  //处理回调函数
  let random = Math.random()
    .toString()
    .replace(".",""),
  callbackName = "myJsonp" + random;
  //添加回调函数
  queryString += "callback+" + callbackName;
  //构建请求
  let scriptNode = document.createElement("script");
  scriptNode.src = url + queryString；
  window[callbackName] = function(){
     
  //调用回调函数
  callback(...arguments)
  //删除这个引入的脚本
  document.getElementsByTagName("head")[0].removeChild(scriptNode);
  };
  //发起请求
  document.getElementsByTagName("head")[0].appendChild(scriptNode);
}

2 使用闭包实现每隔一秒打印1，2，3，4

//使用闭包实现
for（var i = 0；i < 5;i++）{
     
  (function(i){
     
    setTimeout(function(){
     
      console.log(i);
    },i*1000);
  })(i);
}
//使用let块级作用域
for(let i = 0;i < 5;i++){
     
  setTimeout(function(){
     
    console.log(i);
  },i*1000)
}

3 如何判断一个对象是否为空对象？

function checkNullObject(obj){
     
  return Object.keys(obj).length === 0;
}

4 如何封装一个Javascript的类型封装函数？

function getType(value){
     
  //判断数据时null的情况
  if(value === null){
     
  return value + "";
  }
  //判断数据时引用类型的情况
  if(typeof value === "object"){
     
    let valueClass = Object.prototype.toString.call(value),
    type = valueClass.split(" ")[1].split("");
    type.pop();
    return type.join("").toLowerCase();
  }else{
     
    //判断数据时基本数据类型的情况和函数的情况
    return typeof value;}
}

5 开发中常用的几种Content-Type？

application/x-www-form-urlencoded

浏览器的原生form表单，如果不设置enctype属性，那么最终就会以application/x-www-form-urlencoded方式提交数据。该种方式提交的数据放在body里面，数据按照key1=val1&key2=val2的方式进行编码，key和val都进行了URL转码。

multipart/form-data

该种方式也是一个常见的POST提交方式，通常表单上传文件时使用该种方式。

application/json

告诉服务器消息主体是序列化后的JSON字符串

text/xml

该种方式主要用来提交XML格式的数据

6 vue中mixin和mixins区别

mixin 用于全局混入，会影响到每个组件实例。
mixins 应该是我们最常用的扩展组件的方式了，如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过mixins混入代码，比如上拉下拉加载数据这种逻辑等等。另外需要注意的是minxins混入钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并。

7 keep-alive组件有什么用

如果你需要在组件切换的时候，保存一些组件的状态防止多洗渲染，就可以使用keep-alive组件包裹需要保存的组件。

8 computed和watch区别？

computed 是计算属性，依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化才会返回内容。
watch 监听到值得变化就会执行回调，在回调中可以进行一些逻辑操作。

9 vue中key值的作用？

vue中key值得作用可以分为两种情况来考虑。
第一种情况是v-if中使用key。由于Vue会尽可能高效地渲染元素，通常恢复用已有元素而不是从头开始渲染。因此当我们使用v-if来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。如果是相同的input元素，那么切换前后用户的输入不会被清除掉，这样是不符合需求的。因此我们可以通过使用key来唯一的标识一个元素，这种情况下，使用key的元素不会被复用。这个时候可以的作用是用来标识一个独立的员孙。

第二种情况是v-for中使用key。用v-for更新以渲染的元素列表是，它会默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue不会移动DOM元素来匹配数据项的顺序，而是简单复用此处的每个元素。因此通过为每个列表项提供一个key值，来以便Vue跟踪元素的身份，从而高效的实现复用。这个时候key的作用是为了高效的更新渲染虚拟DOM。

10 vue常用的修饰符？

.prevent:提交事件不在重载页面；
.stop:阻止单击事件冒泡；
.self:当事件发生在该元素本身而不是子元素的时候会触发；

11 route与router的区别？

$route是“路由信息对象”，包括path，params,hash,query,fullPath,matched,name等路由信息参数。而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

12 mouseover和mouseenter的区别

当鼠标移动到元素上时就会触发mouseenter事件，类似mouseover，他们两者之间的差别是mouseenter不会冒泡。
犹豫吗mouseenter不支持事件冒泡，导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件，但是却不会触发mouseenter和mouseleave事件。

13 get和post请求在缓存方面的区别

相关知识点

get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，多以可以使用缓存。
post 不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。

回答：
缓存一般只使用于那些不会更新服务端数据的请求，一般get请求都是查找请求，不会对服务器资源造成修改，所以，一般会对get请求进行缓存，很少会对post请求进行缓存。

14 get请求传参长度的误区

误区，我们经常说get 请求参数的大小存在限制，而post请求的参数大小是无限制的。
实际上HTTP协议从未规定GET/POST的请求长度限制是多少，对get的请求参数的限制是来源于浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点：

• http协议未规定get和post的长度限制
• get的最大长度显示是因为浏览器个web服务器限制了url的长度
• 不同的浏览器和web服务器，限制的最大长度不一样
• 要支持ie，则最大长度为2083byte，若只支持Chrome，则最大长度为8182byte

15 js动画与css动画区别及相应的实现

css3的动画的有点
在性能上会稍微好一些，浏览器会对css3的动画做一些优化
代码相对简单

缺点
在动画控制上不够灵活，兼容性不好
JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧等等控制、变换，同事写得好完全可以兼容IE6.并且功能强大，对于一些复杂控制的动画，使用JavaScript会比较靠谱。而在实现一些小的教诲的时候，就多考虑css吧。

16 SQL注入攻击

SQL注入攻击值得是攻击者在http请求中注入恶意的SQL代码，服务器使用参数构建数据库SQL命令是，恶意SQL被一起构造，破坏原有SQL结构，并在数据库中执行，达到编写程序时意料之外结果的攻击行为。

17 什么是点击劫持？如何防范点击劫持？

点击劫持是一种视觉欺骗的攻击手段，攻击者将需要攻击的网站通过iframe嵌套的方式嵌入自己的网页中，并将iframe设置为透明，在页面中透出一个按钮诱导用户点击。

我们可以再http相应头中设置X-FRAME-OPTIONS来防御iframe嵌套的点击劫持攻击。通过不通的值，可以规定页面在特定的一些情况才能作为iframe来使用。

18 什么是CSP

csp指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。
通常有两种方式来开启csp,一种是设置http首部中的Content-Security-Policy，一种是设置meta的方式< meta http-equiv=“Content-Security-Policy”>

19 为什么0.1+0.2！=0.3 如何解决这个问题？

当计算机计算0.1+0.2的时候，实际上计算的是这两个数字在计算机里所存储的二进制，0.1和0.2在转换为二进制表示的时候会出现位数无限循环的情况。js中是以64位双精度格式来存储数字的，只有53位的有效数字，超过这个长度的位数会被截取掉这样就造成了精度丢失的地方。在对两个以64位双精度格式的数据进行对阶的处理，对阶指的是将阶码对齐，也就是将小数点的位置对齐后，再进行计算，一般是小阶向大阶对齐，因此小阶的数在对齐的过程中，有效数字会向右移动，移动后超过有效位数的位会被截取掉，这是第二个可能会出现精度丢失的地方，进行相加运算后，得到的结果可能会超过53位有效数字，因此超过的位数也会被截取掉，这是可能发生精度丢失的第三个地方。

对于这样的情况，我们可以将其转换为整数后在进行运算，运算后再转换为对应的小数，以这种方式来解决这个问题。

我们还可以将两个数相加的结果和右边向减，如果相减的结果小于一个极小数，那么我们就可以认定结果是相等的，这个极小数可以使用es6的Number.EPSILON

20 检测浏览器版本有哪些方式

检测版本一共有两种方式
一种是检测window.navigator.userAgent的值，但这种方式很不可靠，因为userAgent可以被改写，并且早期的浏览器如ie，会通过伪装自己的userAgent的值为Mozilla来躲过服务器的检测。
第二种方式是功能检测，根据每个浏览器独有的特性来进行判断，如ie下独有的ActiveXobject。