0104面试题——http、可选链/空值合并、定位方式

2021-01-04 135 阅读3分钟

Http

Content-Type这个字段的作用是什么，常用的值有哪些

作用：
- 表示请求和响应中媒体类型信息，告诉服务端如何处理请求的数据，告诉客户端如何解析响应的数据
格式：
- content-Type: type/subtype;parameter
  - type: 主类型， *代表所有
  - subtype: 子类型，*代表所有，用/与主类型隔开
  - parameter: 可选参数，如charset, boundary等
- 例如：
  - content-type: text/html
  - content-type: application/json;charset:utf-8;
常见的值：
- HTML文档标记: text/html;
- JPEG图片标记：image/jpeg;
- GIF图片标记：image/gif;
- js文档标记：application/javascript;
- xml文件标记：application/xml;
- Json文件标记：application/json;
- 表单：application/x-www-form-urlencoded
- 多部分多媒体类型(如文件上传)：application/x-www-form-urlencoded

etag这个字段有什么作用

含义：
- ETag: 是实体标签（Entity Tag）的缩写，由服务器计算，标识资源
- ETag由服务器端生成，客户端通过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。
作用：
- 用来判断请求的文件是否被修改。
流程：
- 第一次请求
  - 客户端发起HTTP GET请求一个文件
  - 服务器处理请求，返回文件内容和一堆Header，当然包括Etag(例如"2e681a-6-5d044840"),状态码200
- 第二次请求
  - 客户端发起HTTP GET请求一个文件，注意这个时候客户端同时发送一个If-None-Match头，这个头的内容就是我们第一次请求时服务器返回的Etag：2e681a-6-5d044840
  - 服务器判断发送过来的Etag和计算出来的Etag匹配，因此If-None-Match为False，不返回200，返回304，客户端继续使用本地缓存

JS

下面的结果是什么

null instanceof Object
- false // instanceof 通过原型链来判断前者是否是后者的实例，但null没有原型链
null === Object.prototype.__proto__
- true // 原型链最顶层的对象的__proto__指向null
了解一下可选链(?.)与空值合并（??）
- 可选链
  - 解决的问题：访问undefined的属性时报错的问题
  - 例子：访问person.fullName.firstName。如果fullName为undefined，那么将会报错
  - 解决：访问person?.fullName?.firstName。如果fullName为undefined或null, 那么将返回undefined
  - 原理： ?. 会检查操作符左边的值是否为 null 或 undefined。如果是，这个表达式就终止然后返回 undefined。否则，这个表达式继续执行
- 空值合并
  - 作用：当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数。
  - 与可选链结合: person?.fullName?.firstName??'', 如果不存在则返回空字符串

CSS

position 有哪些属性，分别是什么作用（用于什么场景）

static(默认定位):
- 正常文档流下依次排列
relative(相对定位):
- 相对于默认定位位置发生偏移
- 为子元素提供定位参考
absolute(绝对定义):
- 相对于父级相对定位定位
- 居中方案
fixed(固定定位):
- 相对于浏览器窗口进行定位
- 网页两侧浮动窗口(广告、小窗口播放器)
- 导航栏浮动置顶
- 模拟弹窗(登陆注册界面、提示弹窗)
- 全屏背景（图片、视频）
sticky(粘性定位):
- 当元素在屏幕内，表现为relative
- 当元素将要溢出屏幕，表示为fixed
- 跟随窗口

友情链接：