TypedArray/Blob/ReadableStream

December 6, 2021

JavaScript 中操纵二进制的接口

TypedArray

Math.log2(32768); // => 15

new Int16Array([0o77777]).toString(); // => '32767'
new Int16Array([2 ** 15 - 1]).toString(); // => '32767'
// int16 可以保存2^15位的整数和正负号
new Uint16Array([0o777777]).toString(); // => '65535'
new Uint16Array([2 ** 16 - 1]).toString(); // => '65535'
new Uint16Array([0xffff]).toString(); // => '65535'
// unsigned int16 即16位无符号整数，可以保存2^16位的正整数

new Int16Array([23.4]).toString(); // => '23'
// 小数部分会被截断
new Int16Array([2 ** 15]).toString(); // => '-32768'
// 越界到控制位

ArrayBuffer & DataView

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。
它是一个字节数组，通常在其他语言中称为“byte array”。

https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView

构造

ArrayBuffer: new (byteLength: number) => ArrayBuffer
DataView: new (buffer: ArrayBuffer | SharedArrayBuffer, byteOffset?: number, byteLength?: number) => DataView
(method) DataView.set$Type$(byteOffset: number, value: number, littleEndian?: boolean): void
(method) DataView.get$Type$(byteOffset: number, littleEndian?: boolean): number
// 其中 $Type$ 替换为实际类型

ArrayBuffer 无法直接读写，要通过 DataView 对象操作（或 TypedArray）

const buffer = new ArrayBuffer(16); // create an ArrayBuffer with a size in bytes
const view = new DataView(buffer);
view.setInt8(1, 127); // (max signed 8-bit integer)
console.log(view.getInt8(1)); // => 127

Blob (Binary Large Object)

Blob: new (blobParts?: BlobPart[], options?: BlobPropertyBag) => Blob

interface Blob {
    readonly size: number;
    readonly type: string;
    arrayBuffer(): Promise<ArrayBuffer>;
    slice(start?: number, end?: number, contentType?: string): Blob;
    stream(): ReadableStream;
    text(): Promise<string>;
}


const debug = { hello: "world" };
const blob = new Blob([JSON.stringify(debug)], { type: "application/json" }); // => Blob { size: 17, type: "application/json" }
console.log(await blob.text()); // => {"hello":"world"}
console.log(await blob.slice(2).text()); // => hello":"world"}


URL: new (url: string | URL, base?: string | URL) => URL
(method) createObjectURL(obj: Blob | MediaSource): string

https://developer.mozilla.org/docs/Web/API/Blob

屏幕截图 2021-12-07 122826.png 屏幕截图 2021-12-07 123407.png

// 因为是json格式所以也可以这样读取
let text = await new Response(blob).json();

// 注意，数组会进行合并
console.log(await new Response(new Blob(["123", "456"])).text()); // => '123456'

URL.createObjectURL()

https://developer.mozilla.org/docs/Web/API/URL/createObjectURL

// 获取一张图片

//  <img id="myImage" />
fetch("test.png")
    .then((res) => res.blob())
    .then((res) => {
        const objectURL = URL.createObjectURL(res);
        myImage.src = objectURL;
    });

ReadableStream

浏览器原生 ReadableStream 不同于 nodejs 在 node:stream 中提供的 Readable
https://developer.mozilla.org/docs/Web/API/ReadableStream

ReadableStream: new <any>(underlyingSource?: UnderlyingSource<any>, strategy?: QueuingStrategy<any>) => ReadableStream<any>

interface ReadableStream<R = any> {
    [Symbol.iterator](): IterableIterator<any>;
    entries(): IterableIterator<[number, any]>;
    keys(): IterableIterator<number>;
    values(): IterableIterator<any>;
}

interface UnderlyingSource<R = any> {
    cancel?: UnderlyingSourceCancelCallback;
    pull?: UnderlyingSourcePullCallback<R>;
    start?: UnderlyingSourceStartCallback<R>;
    type?: undefined;
}

interface QueuingStrategy<T = any> {
    highWaterMark?: number;
    size?: QueuingStrategySize<T>;
}

interface ReadableStream<R = any> {
    readonly locked: boolean;
    cancel(reason?: any): Promise<void>;
    getReader(): ReadableStreamDefaultReader<R>;
    pipeThrough<T>(transform: ReadableWritablePair<T, R>, options?: StreamPipeOptions): ReadableStream<T>;
    pipeTo(destination: WritableStream<R>, options?: StreamPipeOptions): Promise<void>;
    tee(): [ReadableStream<R>, ReadableStream<R>];
}

←Back to home