前端面试题

lka0

2019-07-01

前端面试题总结，持续更新

cookies sessionStorage和localstorage区别
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。
相同点：都是存储在客户端
不同点：

WebStorage的优点：
（1）存储空间更大：cookie为4KB，而WebStorage是5MB；
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
（6）WebStorage提供了一些方法，数据操作比cookie方便；
```
setItem (key, value) ——  保存数据，以键值对的方式储存信息。
getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) ——  删除单个数据，根据键值移除对应的信息。
clear () ——  删除所有的数据
key (index) —— 获取某个索引的key
```
数组去重

// 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
    function uniq(arr) {
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (newArr.indexOf(arr[i]) == -1) {
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    var aa = [1, 2, 2, 4, 9, 6, 7, 5, 2, 3, 5, 6, 5];
    console.log(uniq(aa));  // [1, 2, 4, 9, 6, 7, 5, 3];

3.ajax步骤

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。
```
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get', 'getStar.php?starName=' + name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
    if (ajax.readyState == 4 && ajax.status == 200) {
        //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
        console.log(ajax.responseText);//输入相应的内容
    }
}
```

4.简单说说xml与json的区别：

JSON相对于XML来讲，数据的体积小，传递的速度更快些。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
XML对数据描述性比较好。
JSON的速度要远远快于XML

5.js数据类型：

五种基本类型---Undefined、Null、Boolean、Number和String。Object、Array和Function则属于引用类型。

6.http 和 https 有何区别？
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

7.bootstrap实现响应式布局原理：百分比布局+媒体查询

8.请解释JSONP的工作原理：JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

9.谈谈你对闭包的理解：使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。闭包有三个特性，第一函数嵌套函数，第二函数内部可以使用外部的参数和变量，第三参数和变量不会被垃圾回收机制回收

10.get请求与post请求区别：

get:
get是从服务器上获取数据，post是向服务器传送数据；
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB；
get安全性非常低，post安全性较高。但是执行效率却比Post方法好；
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；
在做数据查询时，建议用Get方式；

post:
    post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址，用户看不到这个过程；
    所以：包含机密信息的话，建议用Post数据提交方式；而在做数据添加、修改或删除时，建议用Post方式。

第二更
11.什么情况下会碰到跨域问题，有哪些解决方法？

跨域问题是浏览器为了实施的同源策略导致的，同源策略限制了来自不同源的document,脚本。同源意思就是两个url的域名、协议、端口要完全相同。解决方法：script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cors。

// jsonp原理:动态引入script标签，通过script标签引入一个js，这个js文件载入后会执行我们在url参数中指定的参数，并且把我们需要的json数据作为参数传入
 functioncreateJs(sUrl){
    var oScript =document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src= sUrl;
    document.getElementsByTagName('head')[0].appendChild(oScript);
}

12.如何对一个数组去重？

// 方法一：es6中Set+Array.from方法,目前主流的浏览器，Chrome,Firfox,Opera，Safari，包括微软的Edge,都是支持的，唯独IE系列不支持
var arr = ['1', '2', '3', 1, NaN, NaN, undefined, undefined, null, null, 'a', 'b', 'b'];
console.log(new Set(arr));  // Set(9) {"1", "2", "3", 1, NaN, undefined, null, "a", "b"]
// 这里看到返回的是一个对象，通过Array.from方法转为数组
var newArr = Array.from(new Set(arr));
console.log(newArr)  // [1, 3, 9, null, "1"]

// 方法二:遍历，将值添加到新数组，用indexOf()判断值是否存在，已存在就不添加，达到去重效果。
//ps:这个方法不能分辨NaN,会出现两个NaN。
var arr = ['1', '2', '3', 1, NaN, NaN, undefined, undefined, null, null, 'a', 'b', 'b'];
var unique = arr => {
    let newA = [];
    arr.forEach(item=> {
        if(newA.indexOf(item)==-1) {
            newA.push(item)
        }
    })
    return newA;
}
console.log(unique(arr))  // ["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]

// 方法三：将数组的值添加只一个对象的属性名里，并且给属性赋值，对象不能添加相同的属性名，以这个为依据可以实现去重，然后用objec.keys(obj)，返回改对象可枚举属性组成的数组，即去重后的数组。
var arr = ['1', '2', '3', 1, NaN, NaN, undefined, undefined, null, null, 'a', 'b', 'b'];
var unique = arr => {
    var obj = {};
    arr.forEach(item => {
        obj[item] = 0;
    })
    return Object.keys(obj);
}
console.log(unique(arr))  // ["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

13.翻转一个字符串：

let a = "99151512";
console.log([...a]) // ["9", "9", "1", "5", "1", "5", "1", "2"]  字符串的解构赋值
let b = [...a].reverse().join("")
console.log(b) // 21515199

第三更（vue篇）

ajax cookie xml语言

安科网

前端面试题

lka0