2020/11/27，这次笔试考察的比较基础，不过还是有好几道题解不出，革命尚未成功，还需努力呀。 其实前端的方向也蛮多的，我也还不知道往什么方向走，以及去什么行业，躲在出租屋吃外卖我都快发霉了。。。 很大的感概就是内推找的比海投高效的多了多了去，可作为转行，走内推还是有点虚的。。。。
1、如何判断一个对象是否为数组
typeof和instanceof来判断
2、如何判断一个对象是否为函数
typeof方法
如果考虑浏览器兼容性的话可以调用object原型方法
object.prototype.toString.call(object)==="[object Function]"
3、如何判断一个变量是null
if(a==null)
object.prototype.toString.call(null)==="[object null]"
4、用最少的代码实现数组去重
[...new Set([1,2,3,1,'a',1,'a'])]
5、用最少的代码实现数组反转
var arr=[1,2,3,4,5]
arr.reverse()
6、用数组的reduce方法实现map和filter
const numbers=[10,20,30,40];
const doubledOver50=numbers.reduce(finalList,num)=>{
num=num*2;
if(num>50){
finalList.push(num);
}
return finalList;
},[]);
doubledOver50;
//[60,80]
Array.map()Array.map() 根据传递的转换函数，更新给定数组中的每个值，并返回一个相同长度的新数组。
它接受一个回调函数作为参数，用以执行转换过程。Array.filter()当我们想要过滤数组的值到另一个数组，新数组中的每个值都通过一个特定检查，
Array.filter() 这个快捷实用的方法就派上用场了。类似搜索过滤器，filter 基于传递的参数来过滤出值。Array.reduce()reduce() 方法接受一个数组作为输入值并返回一个值。这点挺有趣的。reduce 接受一个回调函数，
回调函数参数包括一个累计器（数组每一段的累加值，它会像雪球一样增长），当前值，和索引。
reduce 也接受一个初始值作为第二个参数：
7、await如何处理串行请求和并行请求，请给示例代码
function getName() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('tony')
}, 2000)
})
}
function getId() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('123')
}, 3000)
})
}
;
(async () => {
let name = await getName()
let id = await getId()
alert(`name:${name}, id:${id}`)
})()
按理应该是三秒多一点就会出现弹窗，实际上却花费了5秒才出现提示框，因为她们是串行执行的，
而我们想要的是并行执行，因为她们之间并没有依赖关系。串行执行只会增加无谓的等待时间。
这种情况如何解决呢？
8、http request提交结构是怎么样的？http状态码及其含义？
一个http请求报文由请求行（request line)消息头部（header)空行请求正文
a、请求行 请求行由请求方法字段、URL字段和HTTP协议版本字段，组成，它们用空格分隔，例如：GET /index.html HTTP/1.1 HTTP协议的请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。这里介绍最常用的GET和POST方法； GET：当client要从server中读取文档时，使用GET方法。GET方法要求服务器将URL定位的资源放在响应报文的数据部分，回送给client。 使用GET方法时，请求参数和对应的值附加在URL后面，利用一个问号（"?"）代表URL的结尾与请求参数的开始，传递参数长度受限制，例如： /index.jsp?id=100&op=bind POST:当client给服务器提供信息较多时， 使用POST方法。POST方法将请求参数封装在HTTP请求数据中，以key/value的形式出现，可以传递大量数据，可用来传递文件 b、消息头部 请求头部由key/value键值对组成，每行一对，key和value用冒号":"分隔，请求头部通知服务器有关于client端的请求信息，典型的请求头：User-Agent：产生请求的浏览器类型Accept：client端可识别的内容类型列表Host：请求的主机名，允许多个域名同处一个ip地址，即虚拟主机 c、空行 最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器请求头结束。 对于一个完整的http请求来说空行是必须的，否则服务器会认为本次请求的数据尚未完全发送到server，处于等待状态 d、请求正文 请求数据不在GET方法中使用，而是在POST中使用。POST方法适用于需要client填写表单的场合，与请求数据相关的最常用的请求头是Content-Type 和Content-Length
和请求报文相比，响应报文多了一个“响应状态码”，它以“清晰明确”的语言告诉客户端本次请求的处理结果。 HTTP的响应状态码由5段组成：
1xx 消息，一般是告诉客户端，请求已经收到了，正在处理，别急...2xx 处理成功，一般表示：请求收悉、我明白你要的、请求已受理、已经处理完成等信息.3xx 重定向到其它地方。它让客户端再发起一个请求以完成整个处理。4xx 处理发生错误，责任在客户端，如客户端的请求一个不存在的资源，客户端未被授权，禁止访问等。5xx 处理发生错误，责任在服务端，如服务端抛出异常，路由出错，HTTP版本不支持等。 200：请求成功
201：请求成功并且服务器创建一个新的资源
400：服务器不理解请求的语法
404：请求的资源不存在
500：内部服务器错误
9、如何进行网站性能优化？
（1）减少HTTP请求次数：压缩css和js源代码、控制图片大小 、使用缓存机制
（2）代码优化：
①页面结构：CSS放在HTML内容上部，JavaScript放在HTML内容下部。可以使用preload提前解析资源的DNS。
②JavaScript优化：比如减少对DOM的操作，减少重排和重绘，减少作用域链查找，慎用eval函数等等。
③ CSS优化：如减少使用通配符‘*’，提取公用样式增强可复用性，选择器准确可减少匹配时间，适度使用内联样式。
（3）图片懒加载：页面图片很多的，可以使用懒加载。只加载第一屏的图片，
当用户滚动访问后面的内容时再加载相应图片。方法是先用一张极小的占位图代替图片，占位图只下载一次，
将原本图片的src存储在另一个属性中，判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。
一、减少HTTP请求：图片合并 （CSS Sprites）、JS 脚本文件合并、CSS 文件合并二、减少DNS查询DNS查询服务指域名查找，将请求域名转化为对应IP地址，再将IP地址返回浏览器，这个过程会花费一定时间会影响页面加载，所以需要尽可能的减少DNS查询方法：缓存 DNS 查找可以改善页面性能，大多数浏览器本身有缓存系统，但缓存时间又不一致，缓存时间越长，DNS保存时间越长。当客户端 DNS 缓存为空(浏览器/操作系统都为空) DNS 查找次数和页面中主机名数量相同。其中包括页面中 的URL、图片、脚本文件、样式表、Flash对象等所包含主机名。减少主机名数量能减少DNS查找次数，还可以减少页面并行下载数量、节省响应时间，但是减少并行下载会增加响应时间。原则是把这些页面中的内容分割成至少两部分但不超过四部分，而结果需要在减少 DNS 查找次数与保持较高程度并行下载之间的抉择三、将 CSS 放至最页眉，将js放至页尾CSS 放在页眉可以防止出现“白屏”、闪跳现象，即减少页面首屏出现时间。JS 下载和执行会阻塞 Dom树构建（或者是中断Dom树更新），所以标签放在首屏范围内 HTML 代码段里会截断首屏内容。而且 JS 中可能会对 DOM节点进行操作，这时代码自上向下执行会造成 JS 对相应元素操作失效。所以 JS 放在页尾四、压缩 JS/CSS减少文件体积，去除非必要空白符、格式符、注释……等（即对代码进行格式化）五、将 JS/CSS 提取至外部文件需要灵活运用，将 JS 和 CSS 提取至外部文件可以减少 HTML 体积、提高 JS/CSS 复用性、提高可维护性缺点：增加了 HTTP 请求，但可通过缓存解决什么情况下将 JS 和 CSS 写在页面内呢？可以分为几种情况：JS／CSS 代码比较少；这个页面不怎么会访问六、避免重定向重定向是用户请求页面被转移至另一位置，浏览器向服务请请求页面，服务器告诉浏览器请求页面已经被转移至另外一个页面，并告知另一个页面地址，浏览器就再发送请求到重定向的地址。这会增加服务器和浏览器之间往返次数，从而影响网站性能。重定向状态码有：301 永久重定向 302临时重定向。304 not modified 并不是真的重定向，它是用来告诉浏览器get请求的文件在缓存中，避免重新下载。七、移除重复脚本八、配置实体标签 Etag九、使用 Ajax 缓存Ajax 的 get 和 post 方法：浏览器 get 请求会使用缓存，对于同一地址请求服务器会发送 304 状态码至浏览器，以此使用游览器缓存中的数据post 的请求每次都会被执行，浏览器不缓存十、使用 Gzip 压缩十一、使用 CDN (内容分发网络)十二、在 CSS 中避免 expression 表达式十三、添加 expire/cache-control 头
10、JavaScript有哪几种数据类型？
null undefined number string Boolean
11、函数内部arguments变量有哪些特征，有哪些属性，如何将它转换为数组
arguments[index]分别对应函数调用时的实参，并且通过arguments修改实参时会同时修改实参
arguments.length为实参的个数（Function.length表示形参长度）
arguments.callee为当前正在执行的函数本身，使用这个属性进行递归调用时需注意this的变化
转换为数组：var args = Array.prototype.slice.call(arguments, 0);
12、使用js编写一个深度克隆函数
function deepClone(obj) {
var _toString = Object.prototype.toString;
if (!obj || typeof obj !== 'object') {
return obj;
}
if (obj.nodeType && 'cloneNode' in obj) {
return obj.cloneNode(true);
}
if (_toString.call(obj) === '[object Date]') {
return new Date(obj.getTime());
}
if (_toString.call(obj) === '[object RegExp]') {
var flags = [];
if (obj.global) { flags.push('g'); }
if (obj.multiline) { flags.push('m'); }
if (obj.ignoreCase) { flags.push('i'); }
return new RegExp(obj.source, flags.join(''));
}
var result = Array.isArray(obj) ? [] :
obj.constructor ? new obj.constructor() : {};
for (var key in obj ) {
result[key] = deepClone(obj[key]);
}
return result;
}
function A() {
this.a = a;
}
var a = {
name: 'qiu',
birth: new Date(),
pattern: /qiu/gim,
container: document.body,
hobbys: ['book', new Date(), /aaa/gim, 111]
};
var c = new A();
var b = deepClone(c);
console.log(c.a === b.a);
console.log(c, b);
