javascript - 如何访问从 Blob 创建的 ArrayBuffer 的索引？

Question

我不认为自己是程序员，所以我通过搜索这个网站找到了很多很多问题的答案。不过，我一直无法弄清楚这一点。

使用 Javascript(实际上是我现在可以尝试的唯一语言)，我正在尝试上传一个文件并将其二进制数据加载到 ArrayBuffer 中进行编辑。我同时使用 FileSaver.js 和 Blob.js 来提高兼容性。我让用户选择文件，然后加载文件。加载开始时，FileReader 使用 readAsArrayBuffer 将文件加载到 ArrayBuffer 中。我目前将其设置为发出警报以检查 ArrayBuffer 的内容，但我最终会删除它并简单地处理数据。

如果我取出索引，警报知道它正在显示一个 ArrayBuffer，但每当我选择一个索引(如 [0])时，它会告诉我它是未定义的。如何将文件数据放入 ArrayBuffer 中？又将如何划分？最好我想要一个索引的 1 个字节。

function loadButtonPressed() {
    var loadedFile = document.getElementById('loadFile').files;
    var testFile = loadedFile[0];
    var reader = new FileReader();
    reader.onloadend = function(evt) {
        if (evt.target.readyState == FileReader.DONE) {
            alert(String(reader.result[0]));
        }
    };
    reader.readAsArrayBuffer(testFile);
}

Answer 1

为了能够访问 ArrayBuffer 的数据，您需要从中创建一个 View 。

这可以通过两种方式完成:

TypedArrays
这些是类似数组的对象，ArrayBuffer 的每个字节都将以所选的 TypedArray 类型表示。请注意，这将使用系统的字节顺序。

var buf = new TextEncoder().encode('Hello world').buffer;
console.log(buf);
// create an Uint8 view
var view = new Uint8Array(buf);
console.log(view);
// now you can iterate and modify your arrayBuffer from this view.
view[0] = 23;

console.log(new Uint8Array(buf)[0]);

DataView .
这速度较慢，但​​可以获得更多选项来获取和设置 ArrayBuffer 中的数据。例如，您可以设置字节顺序，无需检查缓冲区的 byteLength 即可获取 Int32 值等。

var buf = new TextEncoder().encode('Hello world').buffer;
console.log(buf);
// create a dataView
var view = new DataView(buf);
console.log(view.getUint8(0));
// now you can iterate and modify your arrayBuffer from this view.
view.setUint8(0, 23);

console.log(new Uint8Array(buf)[0]);

注意:这两种方法都会直接修改ArrayBuffer的数据，不会克隆ArrayBuffer的数据。