Blob和ArrayBuffer和File

Blob

Blob对象表示一个不可变、原始数据的类似文件的对象。Blob 表示的不一定是JavaScript原生格式的数据。
Represents a “Binary Large Object”, meaning a file-like object of immutable, raw data。

type BufferSource = ArrayBufferView | ArrayBuffer;
type BlobPart = BufferSource | Blob | string;

/** A file-like object of immutable, raw data.
 *  Blobs represent data that isn't necessarily in a JavaScript-native format.
 *  The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.
*/
interface Blob {
// 数据的大小(单位是字节)
	readonly size: number;
	readonly type: string;
// Returns a promise that resolves with an ArrayBuffer containing the entire contents of the Blob as binary data.
	arrayBuffer(): Promise<ArrayBuffer>;
	slice(start?: number, end?: number, contentType?: string): Blob;
	stream(): ReadableStream<Uint8Array>;
// Returns a promise that resolves with a string containing the entire contents of the Blob interpreted as UTF-8 text.	
	text(): Promise<string>;
}

declare var Blob: {
    prototype: Blob;
    new(blobParts?: BlobPart[], options?: BlobPropertyBag): Blob;
};

// example: 
// The Blob() constructor returns a new Blob object.	blob的内容由参数数组中给出的值的串联组成
// The content of the blob consists of the concatenation of the values given in the parameter array.

// create blob from a string []
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj)], {
  type: "application/json"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

ArrayBuffer

存放固定大小的二进制数据，不能直接操作它。
It is an array of bytes, often referred to in other languages as a “byte array”。

You cannot directly manipulate the contents of an ArrayBuffer;
instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, 
and use that to read and write the contents of the buffer.

/**
 * Represents a raw buffer of binary data, which is used to store data for the
 * different typed arrays. ArrayBuffers cannot be read from or written to directly,
 * but can be passed to a typed array or DataView Object to interpret the raw
 * buffer as needed.
 */
interface ArrayBuffer {
    /** 下载文件的字节大小
     * Read-only. The length of the ArrayBuffer (in bytes). the byteSize of download file.
     */
    readonly byteLength: number;
    /**
     * Returns a section of an ArrayBuffer.
     */
    slice(begin: number, end?: number): ArrayBuffer;
}

// create a 8-byte buffer with a Int32Array view referring to the buffer:
const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

JavaScript typed arrays

JavaScript类型数组是类数组的对象，提供读写内存缓冲区中的二进制数据。
JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.
在JavaScript类型数组中的每一个元素，都是一个二进制值，格式从8位整形到64位浮点。
Each entry in a JavaScript typed array is a raw binary value in one of a number of supported formats, from 8-bit integers to 64-bit floating-point numbers.

To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into buffers and views.
A buffer (implemented by the ArrayBuffer object) is an object representing a chunk of data;it has no format to speak
of, and offers no mechanism for accessing its contents.
In order to access the memory contained in a buffer, you need to use a view. A view provides a context — that is,
a data type, starting offset, and number of elements — that turns the data into an actual typed array.

/**
 * A typed array of 8-bit unsigned integer values. [0-255]
 */
interface Uint8Array {
	.....
}

// 固定大小16字节
// First of all, we will need to create a buffer, here with a fixed length of 16-bytes:
const buffer = new ArrayBuffer(16);
// At this point, we have a chunk of memory whose bytes are all pre-initialized to 0.
// Before we can really work with this buffer, we need to create a view.

// 创建一个view,将缓冲区中数据视为一个数组(每一个元素是32位有符号的,此时数组大小为4)
// create a view that treats the data in the buffer as an array of 32-bit signed integers:
const int32View = new Int32Array(buffer);

// 创建一个view,将缓冲区中数据视为一个数组(每一个元素是16位有符号的,此时数组大小为8)
// create a 16-bit integer view that shares the same buffer as the existing 32-bit view
const int16View = new Int16Array(buffer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

File

The File interface is based on Blob。
File objects are generally retrieved from a FileList object returned as a result of a user selecting files using the element。
A File object is a specific kind of Blob, and can be used in any context that a Blob can。
FileList
Returned by the files property of the HTML element。
this lets you access the list of files selected with the element。
FileAPI
JavaScript typed arrays
ArrayBuffer
JavaScript类型化数组
Blob，ArrayBuffer
利用Blob对象
Blob
blob和arraybuffer