文章目录
- Blob对象
- Canvas对象
- CanvasRenderingContext2D对象
- FileReader对象
- FormData对象
- MediaStream对象
- Navigator对象(预定义)
- Promise对象
- Response对象
Blob对象
基本概念:表示一个不可变的、原始数据的类文件对象。它通常用于表示大型的二进制数据,例如图像、音频、视频文件等。
注意事项:
- 该类型的对象经常都设置为
const
类型。 - 使用表单将该对象作为一个文件上传,这个文件是没有扩展名的,需要手动为文件增加扩展名。
Canvas对象
基本作用:表示HTML页面中的画布(<canvas>
)元素。
常用方法:
getContext('2d')
:- 功能介绍:
<canvas>
元素的一个方法,用于获取2D绘图上下文(简单来说就是有了画布以后获得一个可以进行2D图像绘制的工具箱)。这个上下文对象提供了各种绘图方法和属性,用于在画布上绘制图形、文本、图像等。 - 返回值:返回一个
CanvasRenderingContext2D
对象。
- 功能介绍:
toDataURL(type encoderOptions)
:- 功能介绍: 将画布的内容转换为Data URL。Data URL是一种将小文件直接嵌入到文档中的方法,通常用于将图像嵌入到HTML或CSS中。
- 参数介绍:
type
表示图像的MIME类型,默认是'image/png'
,其他类型还有'image/jpg'
'image/jpeg'
'image/webp'
等;encoderOptions
一般是一个介于0和1之间的数字,表示图像的质量。
CanvasRenderingContext2D对象
基本介绍:getContext('2d')
函数的返回值,它包含了许多用于绘制图形、文本、图像等的方法和属性。通过这个对象可以在画布上进行各种二维绘图操作。
常用方法:
drawImage(image, x, y, width, height)
:在指定位置绘制图像,并指定宽度和高度。下面给出其image
参数的可选类型:- 一个
<img>
元素:表示一个静态图像。 - 一个
<video>
元素:表示一个正在播放的动态视频中当前的一帧。 - 一个
<canvas>
元素:表示一个画布。可以将一个画布的内容绘制到另一个画布上。
- 一个
FileReader对象
基本作用:对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File
或 Blob
对象指定要读取的文件或数据。
- 异步读取的概念:在执行读取操作时,不会阻塞或中断其他JavaScript代码的执行。
创建语法:
var reader = new FileReader()
常用事件(新方式下的):这些事件会分别在读取过程中的某个阶段触发:
loadstart
: 当读取开始时触发。progress
: 在读取过程中触发,可以用来显示进度。load
: 当读取成功完成时触发。abort
: 当读取操作被中断时触发。error
: 当读取操作发生错误时触发。loadend
: 当读取操作完成时(无论成功还是失败)触发。
常用方法:
readAsArrayBuffer(blob)
: 读取指定的Blob
或File
对象,并在读取完成后以ArrayBuffer
对象的形式存储结果,表示原始二进制数据。readAsDataURL(blob)
: 读取指定的Blob
或File
对象,并在读取完成后以数据URL(Base64编码)的形式存储结果。readAsText(blob, encoding)
: 读取指定的Blob
或File
对象,并在读取完成后以文本形式存储结果。encoding
参数指定文本的编码类型,默认为 “utf-8
”。
获取读取结果:可以通过 FileReader
对象的 result
属性获取读取的结果。
FormData对象
基本概述:在HTML5中引入的一个JS内置对象,主要用于通过一组键值对的方式表示表单字段和其对应的值。该对象可以模拟HTML中表单提交的行为,向服务器发送一组表单数据,而不需要真正在HTML界面中创建一个表单。
创建语法:有两种常用的创建方式:
- 创建一个空的对象:
var 对象名 = new FormData()
- 基于已有的表单数据创建一个对象:
var 对象名 = new FormData(HTML表单元素)
向表单中添加数据:
FormData对象名.append('数据的键', ‘数据的值’)
判定表单中是否存在某个键:
FormData对象名.has(键名)
读取表单中的数据:由于表单数据主要是装配后用来发送,因此读取操作使用情况很少。
- 读取表单中某个键的第一个值:
FormData对象名.get(键名)
- 读取表单中某个键的所有值:
FormData对象名.getAll(键名)
删除表单中的数据:
FormData对象名.delete(键名)
向服务器发送表单数据:
- 可以通过
XMLHttpRequest
对象发送表单数据,具体语法略。 - 可以通过
fetch
API 发送表单数据,具体语法略。
MediaStream对象
基本概念:表示一个媒体流对象,这个媒体流可以包含来自摄像头、麦克风、屏幕共享等来源的视频和音频轨道。
获取方法:
navigator.mediaDevices.getUserMedia()
:通过访问用户的摄像头和麦克风来获取一个包含视频和音频轨道的MediaStream
对象。navigator.mediaDevices.getDisplayMedia()
:请求访问用户的屏幕或窗口,并返回一个包含屏幕共享视频轨道的MediaStream
对象。
常用方法:
getTracks()
:返回一个包含所有媒体轨道的数组,其中每个轨道可以是音频轨道或视频轨道。stop()
:对于每一个媒体轨道对象,可以使用该方法来停止该轨道,从此该轨道不再提供媒体数据。结合上面的getTracks
方法,常用于使用完媒体资源后的资源释放工作。
Navigator对象(预定义)
基本概念:navigator
对象是一个可以直接使用的JS内置对象,表示浏览器的信息和状态。
常用属性:
mediaDevices
:navigator 对象的一个属性,本身是一个对象。该对象提供了一个接口,用于访问连接到计算机的媒体输入设备(如摄像头、麦克风)。getUserMedia(constraints)
:mediaDevices
对象的一个方法,用于请求访问用户的媒体输入设备。出于安全性考虑,浏览器通常会要求用户明确授予访问摄像头和麦克风的权限。在用户授予权限的情况下,返回一个Promise
对象,并且会被自动解析为MediaStream
类型的对象。该方法的参数中constrains
也是一个对象,用于指定请求的媒体设备类型和相关参数。常用的constrains
对象如下:{ video: true }
: 请求访问用户的摄像头,并且只请求视频流,不请求音频流。{ audio: true }
: 请求访问用户的麦克风,并且只请求音频流,不请求视频流。{ video: true, audio: true }
:同时请求摄像头和麦克风,也就是视频流和音频流。
Promise对象
基本作用:用于表示异步操作最终完成或失败的一个对象,提供了一种更为优雅的方式来处理异步操作的结果,也就是可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数,提高了代码的可读性和可维护性
对象状态:一个Promise
对象有以下三种状态。对象状态只能由待定变为已兑现或已拒绝,并且状态一旦改变,就不会再变。
- 待定(Pending):初始状态,既不是成功,也不是失败状态。
- 已兑现(Fulfilled):意味着操作成功完成。
- 已拒绝(Rejected):意味着操作失败。
创建语法:可以通过 new Promise()
构造函数来创建一个新的Promise对象。构造函数接收一个执行器函数(executor function),该函数接收两个参数:resolve
和 reject
(可选)。
resolve
:当异步操作成功时调用,并将结果作为resolve
方法的参数传递出去。reject
:可选参数。当异步操作失败时调用,并将错误信息或拒绝的原因作为参数传递出去。
使用方式:该对象的一种典型使用语法如下所示:
Promise.then(function(result) {// 处理成功结果
}).catch(function(error) {// 处理错误
}).finally(function() {// 总是执行
});
.then()
方法用于注册当 Promise 成功时的回调函数。.catch()
方法用于注册失败时的回调函数。尽管在.then()
方法中可以修改reject
参数来设置 Promise 被拒绝时的回调函数,但是更推荐使用.catch
方法来进行处理,因为其语义更加清晰。.finally()
方法用于无论成功或失败都会执行的回调函数。
链式调用:这是 Promise 最强大的特性之一,允许将多个异步操作串联起来,使代码更加清晰和易于维护。
- 基本概念:链式调用在一个 Promise 完成后,直接返回另一个 Promise,从而形成一个操作链。每个
.then()
方法都可以返回一个新的 Promise ,这样就可以继续调用下一个.then()
。 - 执行逻辑:在链式调用中,每个
.then()
方法都可以接收到前一个.then()
返回的值。如果.then()
没有返回值,则默认返回undefined
。如果返回一个普通值(非Promise),这个值会被传递给下一个.then()
。 - 错误处理:在链式调用中,如果任何一个 Promise 被拒绝,错误会被传递到最近的
.catch()
方法。如果没有.catch()
,错误将会被抛出。 - 中断方式:可以在
.then()
或.catch()
中返回一个处于 Pending 状态的 Promise。这样,后续的.then()
或.catch()
将不会被执行。
箭头函数:在 Promise 对象中常以箭头函数作为该函数的参数。下面对箭头函数进行介绍:
- 基本概念:是 ECMAScript 2015 中引入的一种编写函数表达式的新语法,提供了一种更简洁的方式来书写函数。
- 使用语法:
(param1, param2...) => {...函数体...}
- 如果传入的参数只有一个,则可以省略括号,表示为:
param => {函数体}
。 - 如果函数体中只有一个表达式,则可以省略花括号,语法为:
(param1, param2...) => expression
。并且,该表达式的值就会作为函数的返回值。
- 如果传入的参数只有一个,则可以省略括号,表示为:
Response对象
基本概念:在JavaScript中,特别是在使用 Fetch
API 进行网络请求时,Response 对象是网络请求成功后返回的响应结果。这个对象是一个Promise被成功解决后的返回值,它包含了从服务器返回的响应信息。
常用属性:
status
: 一个整数(例如200),代表响应的HTTP状态码。statusText
: 一个字符串代表响应的状态信息,例如"OK"。ok
:一个布尔值,如果HTTP状态码为200-299,则为true。headers
: 一个包含响应头信息的Headers
对象。type
: 一个枚举值,表示响应类型,可以是basic, cors, default, error, opaque, 或 opaqueredirect。url
:响应的URL。
常用方法:
arrayBuffer()
:返回一个 Promise,它将响应体解析为一个ArrayBuffer
。blob()
: 返回一个 Promise,它将响应体解析为一个Blob
。formData()
:返回一个 Promise,它将响应体解析为一个FormData
对象。json()
:返回一个Promise,它将响应体解析为一个JSON
对象。blob()
:返回一个Promise,它将响应体解析为一个Blob
对象。text()
: 返回一个Promise,它将响应体解析为一个字符串。clone()
: 创建一个 Response 对象的克隆。