前端小小白—每日5道面试题打卡（十五）

Posted 2021-08-17 每天都在慢慢进步的王同学

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端小小白—每日5道面试题打卡（十五）相关的知识，希望对你有一定的参考价值。

【前端小小白】—每日5道面试题打卡（十五）

每天进步1% 不多就1%

在这里插入图片描述

一、数组的方法有哪些？

var list = [1,2,3];list.pop();//删除数组的最后一个元素
var list = [1,2];list.unshift(0,1);//头部添加
var list = [0,1,1,2,3];list.push(4,5);//尾部添加
var list = [1,2,3,4,5];
var arr = list.concat(4,[5,6]);//把两个数组连接起来
//var arr = [1,2,3,4,5];
//var list = [1,2,3];list.join("-");
//1-2-3list.reverse();
//3,2,1list.slice(1);
//var list = [2,3];list.slice(1,2);
//var list = [2];list.slice(1,-2);//设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值来替换该位置的数。
var arr = list.splice(0,1);
//删除
var list = [2,3];
var arr = [1];//可以删除任意数量的项，只需指定2个参数；要删除的第一项的位置和要删除的项数。
//例如splice(0,2);会删除当前数组的前两项list.splice(2,0,4,6);
//插入
var list = [1,2,4,6,3];// 可以向指定位置插入任意数量的项，需要3个参数，起始位置、0（要删除的项数）、要插入的任意数量的项。
//例如splice(2,0,4,6);//会从第二个位置插入4和6；list.splice(2,1,4,6);
//替换
var list = [1,2,6,3]; //可以向指定位置插入任意数量的项，同时删除任意数量的项，需要3个参数，起始位置、要删除的项数、要插入的任意数量的项。
//例如splice(2,1,4,6);会从位置 2 开始插入4和6。list.sort();
//按照第一个数字大小进行排序;
function compare(a,b){
return a-b;//正序；
return b-a;//倒序；
}list.sort(compare);

二、你有哪些性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

（2）前端模板 JS+数据，减少由于html标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）当需要设置的样式很多时设置className而不是直接操作style。

（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

三、http常用的状态码？

1开头（临时响应）用于表示临时响应并需要请求者执行操作才能继续的状态代码。

100（继续）请求者应当继续提出请求。服务器返回此代码则意味着，服务器已收到了请求的第一部分，现正在等待接收其余部分。
101（切换协议）请求者已要求服务器切换协议，服务器已确认并准备进行切换。

2开头（请求成功）表示成功处理了请求的状态代码

200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201 （已创建）请求成功并且服务器创建了新的资源。
202 （已接受）服务器已接受请求，但尚未处理。
203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容）服务器成功处理了请求，但没有返回任何内容。
205 （重置内容）服务器成功处理了请求，但没有返回任何内容。
206 （部分内容）服务器成功处理了部分 GET 请求。

3开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent)
选择一项操作，或提供操作列表供请求者选择。
301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD
请求的响应）时，会自动将请求者转到新位置。
302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理

400 （错误请求）服务器不理解请求的语法。
401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403 （禁止）服务器拒绝请求。
404 （未找到）服务器找不到请求的网页。
405 （方法禁用）禁用请求中指定的方法。
406 （不接受）无法使用请求的内容特性响应请求的网页。
407 （需要代理授权）此状态代码与 401（未授权）类似，但却指定了请求者应当使用代理进行授权。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。
408 （请求超时）服务器等候请求时发生超时。
409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410 （已删除）如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型）请求的格式不受请求页面的支持。
416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值）服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错

500 （服务器内部错误）服务器遇到错误，无法完成请求。
501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）服务器目前无法使用（由于超载或停机维护）通常，这只是暂时状态。
504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本

四、浏览器存储的方式有哪些？

在这里插入图片描述
补充：cookie 原本并不是用来储存的，而是用来与服务端通信的，需要存取请自行封装 api。而 localStorage 则自带 getItem 和 setItem 方法，使用很方便。localStorage 只能存字符串，存取 JSON 数据需配合 JSON.stringify() 和 JSON.parse(),遇上禁用 setItem 的浏览器，需要使用 try...catch 捕获异常。

五、readonly与disabled的区别？

（一）、范围不同

readonly 只对和标签有效
disabled 对所有表单元素都有效, 包括：<input>, <textarea>, <button>, <label>, <option>, <select>等有效

（二）、程度不同

readonly 只是将元素设置为只读，不可输入，对其它操作没有影响
disabled 阻止元素的一切操作。包括获取焦点，点击事件等

（三）、表单提交

readonly 只是将元素设置为只读，不影响表单提交
disabled 设置了该属性的表单元素，值将不会随着表单一起提交

（四）、 JavaScript操作

设置了readonly和disabled的表单元素，用户无法再界面上改变它的值。但通过JavaScript是可以改变其值的，同样背景色，字体颜色等也可以通过JavaScript来改变。
例如：下面的代码运行在chrome浏览器中时，点击“点我”后两个input框的字体颜色、背景色，值都会发生变化。

$('input').attr("readonly","readonly") //将input元素设置为readonly  
$('input').removeAttr("readonly"); //去除input元素的readonly属性  
// 或
$('input').attr("readonly",true)
$('input').attr("readonly",false)
$('input').val ('1')   // 设置input的值
//注: 使用表单post或get传递时会被传递出去
$('input').attr("disabled","disabled") //将input元素设置为readonly  
$('input').removeAttr("disabled"); //去除input元素的readonly属性  
 或
$('input').attr("disabled",true)
$('input').attr("disabled",false)
$('input').val ('0')   // 设置input的值

//注: 使用表单post或get传递时不会被传递出去