API、数组、跨域、动画、事件

2020-03-23

Offer / 字节跳动

Word count: 5.2k | Reading time≈ 19 min

# 面试专题总结： API、数组、跨域、动画、事件

希望读者依此构建自己的知识树（思维导图）

偷懒一下：可参考我自己总结思维导图 : 点这里

附带：高频面试题积累文档。来自于（学长、牛客网等平台）

自己开发的博客地址：zxinc520.com

github 地址: 点击

此篇 js - 【API、数组、跨域、动画、事件】知识点：全部弄懂了，面试很容易。

# 1、数组

改变原数组的 API
1. push()
2. unshift()
3. pop()
4. shift()
5. reverse()
6. splice(index, count, value1, value2…)
  - 从索引位 index 处删除 count 个元素，插入 value1, value2 等元素，返回被删除的元素组成的新数组 (改变原数组)
7. sort()
不改变原数组的 API
1. join(value)
  - 将数组用 value 连接为字符串，返回被连接后的字符串 (不改变原数组)
  - 将数组用 value 连接为字符串，返回被连接后的字符串 (不改变原数组)
2. 获取子数组，包含原数组索引 start 的值到索引 end 的值，不包含 end，返回获取的子数组 (不改变原数组)
3. toString()
  - 将数组中的元素用逗号拼接成字符串，返回拼接后的字符串 (不改变原数组)
4. indexOf(value)
  - 从索引为 0 开始，检查数组中是否包含有 value，有则返回匹配到的第一个索引，没有则返回 - 1 (不改变原数组)
5. lastIndexOf(value)
  - 从最后的索引开始，检查数组找那个是否包含 value，有则返回匹配到的第一个索引，没有返回 - 1 (不改变原数组)
6. concat(value)
  - 将数组和 (或) 值连接成新数组，返回新数组 (不改变原数组)
7. forEach()
  - 对数组进行遍历循环，对数组中每一项运行给定函数，参数都是 function 类型，默认有传参，参数分别为：遍历数组内容、对应的数组索引、数组本身。没有返回值
8. map()
  - 指 “映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的新数组
9. filter()
  - “过滤” 功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组
10. every()
  - 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回 true
11. some()
  - 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回 true
12. reduce()
  - 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

# 2、类数组转变为数组的方法

类数组的定义
- 可以通过索引访问元素，并且拥有 length 属性
- 没有数组的其他方法，例如 push ， forEach ， indexOf 等。
ES5
- Array.prototype.slice.call () 等同于 [].slice.call (arguments)
ES6
- Array.from()
- … 扩展运算符
- for of 直接遍历类数组（iterator 接口）

# 3、稀疏数组和密集数组

稀疏数组
- 是什么
  - 具有不连续索引的数组，其 length 属性值大于元素的个数。
- 造成稀疏数组的操作
  1. delete 操作符
  2. 构造函数
  3. 在数组字面量中省略值
  4. 指定数组索引大于数组长度
  5. 指定数组长度大于当前数组长度
- 缺点
  - 操作的不统一
密集数组
- 是什么
  - 具有连续索引的数组，其 length 属性值等于元素的个数。
- 创建方式
  1. Array.apply(null, Array(3)) || Array.apply(null, {length: 3})
  2. Array.from({length: 3})
  3. […Array(4)]

# 4、柯里化函数

定义
- 柯里化，即 Currying 的音译。 Currying 是编译原理层面实现多参函数的一个技术。

手写柯里化函数

ES5 写法

const currying = function (fn, ...args) {
  if (args.length < fn.length) {
    return function () {
      return currying(fn, ...args, ...arguments);
    };
  } else {
    return fn(...args);
  }
};

ES6 写法（箭头函数）

const currying = (fn, ...args) =>
  args.length < fn.length
    ? (...argments) => currying(fn, ...args, ...argments)
    : fn(...args);

# 5、window 全局对象（BOM）

navigator 导航器对象
- Navigator 对象包含有关浏览器的信息
- appCodeName 返回浏览器的代码名
- appName 返回浏览器的名称
- appVersion 返回浏览器的平台和版本信息
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
- platform 返回运行浏览器的操作系统平台
- userAgent 返回由客户机发送服务器的 user-agent 头部的值
screen 显示器对象
history 历史对象
- back () 返回前一个 URL
- forward () 返回下一个 URL
- go () 返回某个具体页面
location 位置对象
- 属性
  - hash 设置或返回从井号 (#) 开始的 URL（锚）。
  - host 设置或返回主机名和当前 URL 的端口号。
  - hostname 设置或返回当前 URL 的主机名
  - href 设置或返回完整的 URL
  - pathname 设置或返回当前 URL 的路径部分。
  - port 设置或返回当前 URL 的端口号。
  - protocol 设置或返回当前 URL 的协议。
  - search 设置或返回从问号 (?) 开始的 URL（查询部分）。
- 方法
  - assign (URL) 加载新的文档
  - reload () 重新加载当前页面
  - replace (newURL) 用新的文档替换当前文档
document 文档对象【DOM】

# 6、ajax 和 fetch

# 6.1、Ajax

本质
- 是在 HTTP 协议的基础上以异步的方式与服务器进行通信.

封装原生 Ajax 请求

function ajaxGet(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.send();

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  };
}

# 6.2、fetch

fetch 是什么
- Fetch 是浏览器提供的原生 AJAX 接口。
Fetch 为何出现？
- 由于原来的 XMLHttpRequest 不符合关注分离原则，且基于事件的模型在处理异步上已经没有现代的 Promise 等那么有优势。因此 Fetch 出现来解决这种问题。
Fetch API
- Fetch API 提供了能够用于操作一部分 HTTP 的 JavaScript 接口，比如 requests 和 responses。它同时也提供了一个全局的 fetch () 方法 —— 能够简单的异步的获取资源。
  
  使用 window.fetch 函数可以代替以前的 $. ajax、$ .get 和 $.post。

用法

fetch("http://example.com/movies.json")
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

# 6.3、readyState（状态值）

readyState 是什么
- readyState 是 XMLHttpRequest 对象的一个属性，用来标识当前 XMLHttpRequest 对象处于什么状态
5 个状态值
- 0: 请求未初始化
- 1: 载入，XMLHttpRequest 对象开始发送请求
- 2: 载入完成，XMLHttpRequest 对象的请求发送完成
- 3: 解析，XMLHttpRequest 对象开始读取服务器的响应
- 4: 完成，XMLHttpRequest 对象读取服务器响应结束

# 6.4、status（状态码

status 是什么
- status 是 XMLHttpRequest 对象的一个属性，表示响应的 http 状态码
在 http1.1 协议下，http 状态码总共可分为 5 大类
- 1xx：信息响应类，表示接收到请求并且继续处理
- 2xx：处理成功响应类，表示动作被成功接收、理解和接受
- 3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
- 4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
- 5xx：服务端错误，服务器不能正确执行一个正确的请求
- 一些常见的状态码为
  
  200 OK：成功，很棒。
  
  301 永久移动：已永久移动到新位置。
  
  302（临时移动）：暂时移到新位置。
  
  304 未修改：东西跟之前长一样，可以从快取拿就好。
  
  400 错误的请求：明显的用户端错误，伺服器无法处理这个请求。
  
  401 未经授权：未认证，可能需要登录或 Token。
  
  403 Forbidden：没有权限。
  
  404 未找到：找不到资源。
  
  500 内部服务器错误：伺服器端错误。
  
  502 错误的网关：通常是伺服器的某个服务没有正确执行。
  
  503 服务不可用：伺服器临时维护或快挂了，暂时无法处理请求。
  
  504 网关超时：伺服器上的服务没有回应。

# 7、Web 端即时通讯技术

Web 端即时通讯技术是什么

即时通讯技术简单的说就是实现这样一种功能：服务器端可以即时地将数据的更新或变化反应到客户端，例如消息即时推送等功能都是通过这种技术实现的。但是在 Web 中，由于浏览器的限制，实现即时通讯需要借助一些方法。这种限制出现的主要原因是，一般的 Web 通信都是浏览器先发送请求到服务器，服务器再进行响应完成数据的现实更新。
大体可以分为两类
1. 一种是在 HTTP 基础上实现的
  - 短轮询、comet 和 SSE
2. 不是在 HTTP 基础上实现
  - WebSocket
如何模拟双向通信（四种方式）
- 短轮询
  - 客户端定时向服务器发送 Ajax 请求，服务器接到请求后马上返回响应信息并关闭连接。
  - 优点：后端编写容易
  - 缺点：请求中大半是无用，浪费宽带和服务器资源
  - 适用：小型应用
- 长轮询
  - 客户端向服务器发送 Ajax 请求，服务器接到请求后 hold 住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
  - 优点：在无消息的情况下不会频繁的请求，耗费资源小
  - 缺点
    - 服务器 hold 连接会消耗资源
    - 返回数据顺序无保证，难于管理维护
- 长连接
  - 在页面嵌入一个隐藏 iframe，将这个隐藏 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求，服务器端就能源源不断的往客户端输入数据
  - 优点
    - 消息及时到达，不发无用请求
    - 管理起来也相对方便
  - 缺点：服务器维护一个长连接会增加开销
- WebSocket
  - WebSocket 是 Html5 定义的一个新协议，与传统的 http 协议不同，该协议可以实现服务器与客户端之间全双工通信。简单来说，首先需要在客户端和服务器端建立起一个连接，这部分需要 http。连接一旦建立，客户端和服务器端就处于平等的地位，可以相互发送数据，不存在请求和响应的区别。
  - 优点：实现了双向通信
  - 缺点：服务器端的逻辑非常复杂

# 四种 Web 即时通信技术比较

从兼容性角度考虑，短轮询 > 长轮询 > 长连接 SSE>WebSocket；
从性能方面考虑，WebSocket > 长连接 SSE > 长轮询 > 短轮询。

# 8、跨域

跨域是什么
- 跨域是指从一个域名的网页去请求另一个域名的资源。
- 跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域

# 6 种解决方案

跨域资源共享（CORS）
- 定义
  - 定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。
- 基本思想
  - CORS 背后的基本思想就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败
- 两种请求
  - 简单请求
    - 就是在头信息之中，增加一个 Origin 字段。
  - 非简单请求
    - 会在正式通信之前，增加一次 HTTP 查询请求，称为 "预检" 请求（preflight）
- 服务端
  - 服务器端对于 CORS 的支持，主要就是通过设置 Access-Control-Allow-Origin 来进行的。如果浏览器检测到相应的设置，就可以允许 Ajax 进行跨域的访问
```
//指定允许其他域名访问
"Access-Control-Allow-Origin:*"; //或指定域
//响应类型
"Access-Control-Allow-Methods:GET,POST";
//响应头设置
"Access-Control-Allow-Headers:x-requested-with,content-type";
```
jsonp
- jsonp 是什么
  - JSONP (JSON with Padding 填充式 json) 是 JSON 的一种 “使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
- 两部分组成
  - 回调函数
    - 回调函数是当响应到来时应该在页面中调用的函数
  - 数据
    - 而数据就是传入回调函数中的 JSON 数据。
- 原理
  
  通过 script 标签引入一个 js 文件，这个 js 文件载入成功后会执行我们在 url 参数中指定的函数，并且会把我们需要的 json 数据作为参数传入。所以 jsonp 是需要服务器端的页面进行相应的配合的。（即用 javascript 动态加载一个 script 文件，同时定义一个 callback 函数给 script 执行而已。）
- 模拟
```
<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>
```
- 缺点
  - 我们都知道 JSONP 可以实现解决 GET 请求的跨域问题，但是不能解决 POST 请求的跨域问题.
document.domain
- 方法
  - 通过修改 document.domain 来跨子域
- 注意
  - 域必须相我们只能把 document.domain 设置成自身或更高一级的父域，且主同。
- 例如：
```
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'example.com';//设置成主域
    function test(){
    }
</script>
```
- 作用域
  - 修改 document.domain 的方法只适用于不同子域的框架间的交互。
window.name
- window.name 是什么
  - 是一个可读可写的属性，有个很有意思的跨页面特性
- 方法
  - 页面如果设置了 window.name，即使进行了页面跳转到了其他页面，这个 window.name 还是会保留。
postMessage
- 定义
  
  postMessage 是 html5 引入的 API,postMessage () 方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档，多窗口，跨域消息传递。多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案.
- 方法使用
  - 发送数据
    - otherWindow.postMessage(message, targetOrigin, [transfer]);
    - otherWindow 【窗口的一个引用，比如 iframe 的 contentWindow 属性】
  - 接收数据
```
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  var origin = event.origin;
  console.log(event);
}
```
- postMessage 的使用场景
  1. 跨域通信 (包括 GET 请求和 POST 请求)
  2. WebWorker
    - Web Worker 的使用场景
      - 用于收集埋点数据，可以用于大量复杂的数据计算，复杂的图像处理，大数据的处理。因为它不会阻碍主线程的正常执行和页面 UI 的渲染.
  3. Service Worker
    - 离线存储的一个最佳的解决方案
# WebWorker 和 Service Worker 的关系
- 相同点
  - 相同点是在常规的 js 引擎线程以外开辟了新的 js 线程去处理一些不适合在主线程上处理的业务
- 不同点
  - Web Worker 式服务于特定页面的，而 Service Worker 在被注册安装之后能够在多个页面使用
  - Service Worker 常驻在浏览器中，不会因为页面的关闭而被销毁。本质上，它是一个后台线程，只有你主动终结，或者浏览器回收，这个线程才会结束.
  - 生命周期，可调用的 API 也不同
1. 代理服务器
  - 定义
    
    代理，也称正向代理，是指一个位于客户端和目标服务器 (target server) 之间的服务器，为了从目标服务器取得内容，客户端向代理发送一个请求并指定目标 (目标服务器)，然后代理向目标服务器转交请求并将获得的内容返回给客户端。
  - 代理服务器，需要做以下几个步骤
    1. 接受客户端请求。
    2. 将请求转发给服务器
    3. 拿到服务器响应数据
    4. 将响应转发给客户端
# CORS 和 JSONP 对比
- CORS 与 JSONP 相比，无疑更为先进、方便和可靠。
- 区别
  1. JSONP 只能实现 GET 请求，而 CORS 支持所有类型的 HTTP 请求。
  2. 使用 CORS，开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据，比起 JSONP 有更好的错误处理。
  3. JSONP 主要被老的浏览器支持，它们往往不支持 CORS，而绝大多数现代浏览器都已经支持了 CORS）。

# 9、动画

requestanimationframe 的出现替代 setTimeout 完成动画。

setTimeout
- setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但利用 seTimeout 实现的动画在某些低端机上会出现卡顿、抖动的现象。导致 setTimeout 的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。
- 原因
  1. setTimeout 的执行时间并不是确定的。setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。
  2. 刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout 只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。
requestanimationframe
- html5 为了满足高性能动画的需求而提供的 API，表意是请求动画帧。

# requestanimationframe 相比 setTimeout

优势
1. 与 setTimeout 相比，requestAnimationFrame 最大的优势是由系统来决定回调函数的执行时机。
2. 它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

# 10、事件

事件流

事件流描述的是从页面中接收事件的顺序，IE 和 Netscape 提出来差不多完全相反的事件流的概念，IE 事件流是事件冒泡流，Netscape 事件流是事件捕获流。
DOM 事件级别
- DOM0 事件
  - 定义
    
    通过文档对象（document）获取元素引用，使用 DOM0 级方法指定的事件处理程序被认为是元素的方法，处理程序是在元素的作用域进行的，程序中 this 是引用的是当前元素。
  - 3 个特点
    1. 触发时机：DOM0 级的事件处理程式只能在事件冒泡阶段触发。
    2. 每个属性只能绑定一个事件
    3. this 指针的指向
      
      用 DOM0 级的方式绑定事件是在元素对象的作用域内运行，因此在事件函数内的 this 属性不是引用全局对象，而是引用当前元素对象
- DOM2 事件
  - 定义
    
    ’DOM2 级事件’定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener () 和 removeEventListener (); 所有的 DOM 节点都包含这两种方法。
  - DOM2 级事件规定的事件流包括三个阶段
    - 事件捕获阶段
    - 处于目标阶段
    - 事件冒泡阶段
  - 优点
    
    可以添加多个事件处理程序
- DOM3 级
  - DOM3 级事件就是在 DOM2 基础上增加了更多的事件类型
  - UI 事件，当用户与页面上的元素交互时触发，如：load、scroll
    
    焦点事件，当元素获得或失去焦点时触发，如：blur、focus
    
    鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
    
    滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
    
    文本事件，当在文档中输入文本时触发，如：textInput
    
    键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
    
    合成事件，当为 IME（输入法编辑器）输入字符时触发，如：compositionstart
    
    变动事件，当底层 DOM 结构发生变化时触发，如：DOMsubtreeModified
机制
1. 冒泡机制
  
  事件会从最内层的元素开始发生，一直向上传播，直到 document 对象。
2. 捕获机制
  
  网景提出另一种事件流名为事件捕获 (event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
事件代理
- 定义
  
  JavaScript 高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
- 关键
  
  Event 对象提供了一个属性叫 target，可以返回事件的目标节点，我们成为事件源
- 适合用事件委托的事件
  
  click，mousedown，mouseup，keydown，keyup，keypress
- 不合适
  
  mousemove，每次都要计算它的位置，非常不好把控，在不如说 focus，blur 之类的，本身就没用冒泡的特性，自然就不能用事件委托了

Donate

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

# 面试专题总结： API、数组、跨域、动画、事件

# 1、数组

# 2、类数组转变为数组的方法

# 3、稀疏数组和密集数组

# 4、柯里化函数

# 5、window 全局对象（BOM）

# 6、ajax 和 fetch

# 6.1、Ajax

# 6.2、fetch

# 6.3、readyState（状态值）

# 6.4、status（状态码

# 7、Web 端即时通讯技术

# 四种 Web 即时通信技术比较

# 8、跨域

# 6 种解决方案

# WebWorker 和 Service Worker 的关系

# CORS 和 JSONP 对比

# 9、动画

# requestanimationframe 相比 setTimeout

# 10、事件