整理下最近遇到的前端面试题

整理下最近的面试题；希望下次遇到不会再答错。
1.、请简述一下cookies;sessionStorage和localStorage的区别。
【1、cookie
（1）本身用于客户端和服务端通信
（2）但是它有本地存储的功能，于是就被“借用”
（3）document.cookie = …获取和修改即可
（4）cookie用于存储的缺点
①存储量太小，只有4kb
②所有http请求都带着，会影响获取资源的效率
③api简单，需要封装才能用document.cookie
2、localStorage,sesseionStorage
（1）html5专门为存储而设计，最大容量5M
（2）api简单易用
（3）lcoalStorage.setItem(key, value);localStorage.getItem(key);
（4）ios safari隐藏模式下:localStorage.getItem会报错，建议统一使用try-catch封装
3、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。】

2、列出你所了解的web攻击技术；并简述他们的含义。
【1）xss跨站攻击技术：主要是攻击者往网页里嵌入恶意脚本，或者通过改变html元素属性来实现攻击，主要原因在于开发者对用户的变量直接使用导致进入html中会被直接编译成js，通常的get请求通过url来传参，可以在url中传入恶意脚本，从而获取信息，解决方法：特殊字符过滤。
2）sql注入攻击：主要是就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
比如select * from test where username=“wuxu” or 1=1，这样会使用户跳过密码直接登录，具体解决方案：
1、特殊字符过滤，不要用拼接字符串的方法来凑sql语句。
2、对sql语句进行预编译，比如java的preparedstatement。
3、关闭错误信息，攻击者可能会通过不断的尝试来得到数据库的一些信息，所以关闭错误信息变得重要起来。
4、客户端对数据进行加密，使原来传进来的参数因为加密而被过滤掉。
5、控制数据库的权限，比如只能select，不能insert，防止攻击者通过select * from test ；drop tables这种操作
3）os命令注入攻击：系统提供命令执行类函数主要方便处理相关应用场景的功能.而当不合理的使用这类函数，同时调用的变量未考虑安全因素，就会执行恶意的命令调用，被攻击利用。主要原因是服务端在调用系统命令时采用的是字符串连接的方式，比如a=“a.txt;rm -rf *”,system(“rm -rf {$a}”)，这会给服务端带去惨痛的代价，具体解决方案：1、在程序开发时少用系统命令，执行命令的参数尽量不要从外部获取。2、参数特殊字符过滤
4）http首部注入攻击：HTTP协议本身并不存在安全性问题，应用HTTP协议的服务器和客户端以及运行在服务器上的Web应用等资源才是攻击的目标。】

3、[“1”，“2”’，“3”].map(parseInt)答案是多少。

4、javascript的typeof返回了那些数据类型。
【
alert(typeof [1, 2]); //object
alert(typeof ‘leipeng’); //string
var i = true;
alert(typeof i); //boolean
alert(typeof 1); //number
var a;
alert(typeof a); //undefined
function a(){;};
alert(typeof a) //function
备注：而ES6的新数据类型：Symbol。添加这个新类型的唯一目的就是防止对象属性重名。

var x = Symbol();  //创建一个独一无二的symbol值
var obj = {};
obj[x] = 12;
console.log(obj);

】

5、数组方法pop() push() unshift() shify()。
【Javascript为数组专门提供了push和pop()方法，以便实现类似栈的行为。来看下面的例子：
var colors=new Array(); //创建一个数组
var count=colors.push(“red”,“green”); // 推入两项，返回修改后数组的长度
alert(count); // 2 返回修改后数组的长度
var item=colors.pop(); //取得最后一项
alert(item); // “green”
alert(colors.length); // 1
队列方法：
结合使用shift()和push()方法，可以像使用队列一样使用数组：
var colors=new Array();
var count=colors.push(“red”,“green”); //推入两项
alert(count); //2
count= colors.push(“black”); // 从数组末端添加项,此时数组的顺序是： “red”, “green” ,“black”
alert(count); //3
var item=colors.shift(); // 取得第一项
alert(item); // “red”
alert(colors.length); //2
从例子中可以看出：
shift()方法：移除数组中的第一项并返回该项
push()方法：从数组末端添加项
若是想实现相反的操作的话，可以使用
unshift()方法：在数组的前端添加项
pop()方法：从数组末端移除项
var colors=new Array();
var count=colors.unshift(“red”,“green”);// 推入两项
alert(count); // 2
count=colors.unshift(“black”); // 从数组的前端添加项，此时数组的顺序是： “black”, “red”, “green”
alert(count); //3
var item=colors.pop();
alert(item); // 移除并返回的是最后一项 “green”
由以上的两组例子，大家可以清晰的看到这两组方法的用法了。】

6、ajax请求时候get()和post()方式的区别。
【1.get请求不安全，post安全
2.get请求数据有限制，post无限制
3.get请求参数会在url中显示，容易被他人窃取，post在请求体中，不会被窃取
4.post需要设置请求头】

7、闭包是什么；有什么特性；对页面有什么影响。
https://blog.csdn.net/qq_28364071/article/details/90183142

8、如何防止时间的冒泡和默认事件。
9、解释jsonp的原理；以及为什么不是真正的ajax。
10、简述两个等号和三个等号的区别。
11、字符串和数组的去重。
12、用原生js获取被点击的对象。
13、vue的计算属性。
14、对es5和es6的了解。
15、link和@import的区别。
16、ajax的步骤。
17、页面的加载顺序。
18、vue的生命周期。
19、call()和apply的区别。
20、页面自适应和页面的响应式有什么区别。

大致还记得这么多；有想起的再来补充~