北京某公司前端笔试题及其答案

朱雀 2022-03-15 14:20 240阅读 0赞

![在这里插入图片描述][20190303102036442.png]  
![在这里插入图片描述][20190303103057329.png]  
![在这里插入图片描述][2019030310311258.png]  
![在这里插入图片描述][20190303103229908.png]  
![在这里插入图片描述][2019030310353151.png]

> 1》用来调用函数，并用指定对象来替换（this）的值,同时指定数组来替换函数的参数  
> 2》call  
> 3》当后面的参数确定的时候用call.参数之间用逗号链接；当后面的参数不确定的时候用apply，参数通过数组的形式传入  
> **（拓展他们的用途）**  
> 1》改变this指向  
> 2》调用其他对象的函数

![在这里插入图片描述][20190303104509565.png]

> **什么是跨域？**  
> 当协议，子域名，主域名，端口任意各不相同的时候，都算不同的域，不同域之间相互请求的资源，就叫做跨域。  
> **方法**  
> 1》代理：通过后台获取其他域名下的内容，然后再把获取到的内容返回给前端  
> 2》JSONP：创建script标签然后添加到页面  
> :3》XHR2：XMLHttpRequest Level2是h5提供的方法，在服务起头部添加如下代码  
> `header( "Access-Control-Allow-Origin:*" ); header( "Access-Control-Allow-Methods:POST,GET" );`

![在这里插入图片描述][20190303110259721.png]

> 6种，分别是：static;relative;absolute;fixed;inherit;sticky  
> **sticky（粘性定位）** 基于用户的滚动位置来确定，在relative和flxed之间来回切换，在目标区域内他的行为就像relative;当页面滚动超出目标区域的时候，就像fixed;**元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位**  
> **static**默认情况下所有的定位都采用静态的定位方式  
> **relative**相对自己定位  
> **absolute**绝对定位。相对于 static 定位以外的第一个父元素（也称祖先元素）进行定位，如果不存在这样的父元素，则依据最初的包含块  
> **fixed**固定定位，相对于浏览器窗口来定位  
> **inherit** 规定应该从父元素继承 position 属性的值

![在这里插入图片描述][20190303112310909.png]

> **文本居中垂直**  
> text-align:center;line-height:xxpx; vertical-align实现垂直居中  
> **背景图片垂直居中**  
> `background: url(xxx.jpg) #ffffff no-repeat center;`  
> **div**  
> 水平居中：margin:0 auto;  
> **table-cell元素居中**  
> 将父盒子设置为table-cell元素，可以使用text-align: center;和vertical-align: middle;实现水平、垂直居中  
> **绝对定位居中**  
> 1》left和top均为50%，这时子盒子的左上角居中对齐，利用margin实现偏移  
> 2》left和top均为50%transform:translate(-50%, -50%);  
> 3》top、right、bottom、left均为0，margin为auto实现偏移  
> **Flexbox居中**  
> align-items: center; justify-content: center;

![在这里插入图片描述][20190303113649980.png]

> **区别**  
> 浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。  
> 深拷贝是将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变，这就是深拷贝例：  
> **方法**  
> **JSON方法** JSON.parse()和JSON.stringify()，但是此方法无法复制函数类型）缺点：丢失constructor，RegExp无法实现  
> **jquery方法** jQuery.extend(true,target,obj);  
> **常规js方法**

![在这里插入图片描述][20190303114948860.png]

> **200**：一切正常，对GET和POST请求的应答文档跟在后面  
> **301**：永久重定向  
> **302**：临时重定向  
> **304**：Not Modified，客户端有缓冲的文档并发出了一个条件性的请求。服务器告诉客户，原来缓冲的文档还可以继续使用。  
> **400**请求出现语法错误  
> **403**资源不可用  
> **404**无法找到指定的资源  
> **500**服务器遇到了不可预料的错误，不能完成客户的请求

![在这里插入图片描述][20190303115533367.png]

> **1》map**返回一个新数组数组中的元素为原始数组元素调用函数处理后的值。不会对空数组进行检测，不会改变原始数组  
> **2》filter**吧数组中的某些元素过滤掉，然后返回剩下的元素 ，和map类似也接受一个函数，和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素（可以去除重复的元素）  
> **3》some**检测数组中的元素是否满足指条件，如果有一个满足条件就返回true,它不会改变原始数组  
> **4》every**检测数组中所有元素是否满足指定条件，只要有一个不满足就返回false  
> **5》forEach**等等，请参考我的博客~[区别][Link 1]

![在这里插入图片描述][20190303135157408.png]

> 如果代码中有很多if—else可以使用表驱动的方式  
> 减少HTTP请求数  
> 合并css图片，使用精灵图  
> 外部脚本置底  
> 将css放在head中  
> 减少不必要的http跳转  
> 避免重复的资源请求

![在这里插入图片描述][20190303135929853.png]

[20190303102036442.png]: /images/20220315/a4c2fbff226343729e329217aed99e12.png
[20190303103057329.png]: /images/20220315/0ea34f386c3b4ec2b7f830cc20526711.png
[2019030310311258.png]: /images/20220315/4d37207106754712b75448c69c38fb70.png
[20190303103229908.png]: /images/20220315/c730a1348b7947b8b5a37170b9900758.png
[2019030310353151.png]: /images/20220315/418ff62da4384988b56cfed962e752aa.png
[20190303104509565.png]: /images/20220315/0092e57657b241cf8ccd1b8ce0c632ca.png
[20190303110259721.png]: /images/20220315/f9b1ac8b99f840b380d222d175bdd022.png
[20190303112310909.png]: /images/20220315/925a3027cf464b29a9dc7d3fb8599b65.png
[20190303113649980.png]: /images/20220315/ebe4ae9a63d14b31811699e070c9a730.png
[20190303114948860.png]: /images/20220315/4fcde09bad814bb389931e54dc65d112.png
[20190303115533367.png]: /images/20220315/dbe00b51120342a3a353474f23d4155b.png
[Link 1]: https://blog.csdn.net/Carrie_zzz/article/details/81145581
[20190303135157408.png]: /images/20220315/bd88f90e6e3d43edb2a87d5962786bd7.png
[20190303135929853.png]: /images/20220315/e635ca27f43446f8825d826751e58924.png