【前端面试知识点】- 大厂面试(五)

1.请求方式（get，post，其它）

URL全称是资源描述符，我们可以这样认为：一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查 ，改 ，增 ，删 4个操作。

• GET：一般用于获取/查询资源信息
• POST: 向指定资源提交数据进行处理请求（提交表单、上传文件），又可能导致新的资源的建立或原有资源的修改。
• HEAD: 和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用，其实不是这样的。想象一个业务情景：欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。
• PUT：这个方法比较少见。HTML表单也不支持这个。本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。
• DELETE：删除某一个资源。基本上这个也很少见，不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。
• OPTIONS：这个方法很有趣，但极少使用。它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

2.CSS单位

• px:px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
• %:一般宽泛的讲是相对于父元素，但是并不是十分准确
• em:当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。 一般用于按钮、菜单、标题等有自己字体大小
• rem:当使用rem单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。 一般用于媒体查询
• vh:css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
• vw:css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
  举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

3.判断一个字符串是否是回文（算法实现）

str.split(‘’).reverse().join(‘’)；
先将字符串转换为数组然后翻转再转换为字符串进行比较。

4.v-text和v-html

• v-text和v-html起了插值表达式{{}}作用，将msg中的信息显示在视图中。在v-html的运行中，它解析了HTML代码。而v-text并没有解析，它将msg原样输出
• v-html 指令的作用：设置元素的innerHTML
• v-text指令无论内容是什么，只会解析为文本
  解析文本使用v-text,需要解析html结构使用v-html

5.隐式转换、类型转换

在数字计算过程中会将：==“” false 0 null NaN undefined == 转换为Boolean的false

6.迭代器

迭代器不可以使用break、continue.

• For:遍历数组
  forEach:ES5标准，遍历数组，不可以使用break、continue、return语句。只是执行操作，不会生成数组
  Map:遍历数组，传入函数，三个参数(element index arr)，执行相应的操作，生成新数组。
• For in:ES5标准，遍历数组索引和对象属性，原型链上的所有属性都将被访问到，消耗性能，可以使用hasOwnProperty检测一个属性是否是私有属性，存在于实例还是原型中。可使用break、continue、return语句
• For of:ES6标准，遍历数组的值，可使用break、continue、return语句

7.link和@import

• link是在页面加载的的同时一起加载的，@import是页面加载完毕后才加载的
• 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
• link不仅可以导入样式表，还可以导入其他如如favicon，但@import只能导入样式表

8.CSS样式隐藏元素

定位到屏幕外边、透明度变换、display、opacity、

• opacity 属性的效果是给背景颜色添加透明度,取值范围是0~1, 但也会让处于背景颜色中的字体一同透明, 单用效果很好
• visibility给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
• display如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失

补充：
visibility和display的区别

• visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
• visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
• CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

9.CSS样式display

• block”可将元素将显示为块级元素
• none 与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间，它就会消失在网页中，但元素并没有在文档中删除，只是隐藏在网页结构中，不在网页中显示而已。不占据物理空间，网页中不显示，但是DOM结构还在
• inline”主要是用来将块级元素转换成行内元素

10.如何实现浏览器内多个标签页之间的通信？

localStorage，Cookie等本地存储方式

• localStorage
  在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值，实现不同标签页之间的通信。
• 调用cookie+setInterval()
  将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
  document.cookie=“name=”+name;

11.cookie设置，获取，删除

• 设置
  document.cookie=key + “=” + val +"
• 获取
  document.cookie.replace(/[ ]/g,“”); //获取cookie，并且将获得的cookie格式化，去掉空格字符
• 删除
  封装删除cookie函数

12.声明式编程和命令式编程

声明式编程：框架完成 声明数据 声明方法 挂载到对应的DOM结构
命令式编程：原生自己给浏览器命令

14.高阶函数

变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
只需满足以下任意一个条件，即是高阶函数:

1. 接受一个或多个函数作为输入
2. return 返回另外一个函数

15.闭包

子函数就是闭包，闭包就是能够读取其他函数内部的变量的函数
闭包主要和作用域有关，变量全局变量，局部变量，

• 在函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。函数内 部声明变量的时候，一定要使用var命令，如果不用的话，你实际上声明了一个全局变量。
• 那如何在函数外部访问函数内部的局部变量呢？我们就可以在父函数内部定义一个子函数，子函数可以访问父函数的局部变量，然后返回这个函数，这样可以在父函数的外部读取局部变量。

应用：读取函数内部变量，还有保存变量的值或者说结果缓存
缺点：内存泄露，由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包

16.Vue、Angular、React区别

• Angular ：一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。

• React ：一个用于构建用户界面的 JavaScript 库

• Vue ：一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
  大佬总结的详情：链接

17.CSS中的伪类

• 链接伪类：link visited hover active
• 结构伪类：first-child last-child nth-child(n) nth-last-child(n)
• N: even odd n 2n等
• 目标伪类：:target { }

18.CSS动画

动画常见属性 ：

• animation帧动画
• animation-name ：动画名称
• animation-duration：持续时间
• animation-timing-function ：动画速度曲线
• animation-delay：动画开始时间
• animation-iteration-count：规定动画播放次数默认是1
• animation-direction:规定动画在下一个周期逆向播放，默认是nomal

19.前端设计模式

• 单例模式 一般在全局模式确保实例存在
• 工厂模式 对原型链进行操作，不同场景创建不同实例
• 策略模式 将算法的使用与算法的实现分离开来，避免多重判断调用哪些算法
• 代理模式
• 观察者模式 发布订阅模式
• 模块模式 指定类想暴露的属性和方法（私有变量#声明，或者在构造函数中声明）
• 构造函数模式
• 混合模式

20.XSS攻击

攻击者在html中嵌入js脚本。
解决方法：
1、使用escapeHTML()对特殊字符进行转换
2、验证href内容，禁止以JavaScript开头
3、在http头部set-cookie，防止浏览器执行恶意代码
4、设置Httponly来禁止js脚本访问cookie
5、设置Secure，仅在https请求发送cookie