如何从WebAssembly函数调用中返回多个可变长度数组？

结构体方案的可行性及实现 #

结构体方案是完全可行的，但由于WebAssembly采用线性内存模型，JavaScript无法直接识别Wasm侧定义的结构体类型，需要手动解析内存数据：

1. Wasm侧实现（以C为例）：
   定义包含数组指针和长度的结构体，分配内存存储结构体与数组数据后返回结构体指针：

   #include <stdlib.h>
   
   typedef struct {
       int* arr1;
       int len1;
       float* arr2;
       int len2;
   } MultiArrayResult;
   
   MultiArrayResult* get_multiple_arrays() {
       // 分配结构体内存
       MultiArrayResult* result = malloc(sizeof(MultiArrayResult));
       // 生成第一个int数组
       result->len1 = 3;
       result->arr1 = malloc(sizeof(int) * result->len1);
       result->arr1[0] = 1;
       result->arr1[1] = 2;
       result->arr1[2] = 3;
       // 生成第二个float数组
       result->len2 = 2;
       result->arr2 = malloc(sizeof(float) * result->len2);
       result->arr2[0] = 1.5f;
       result->arr2[1] = 2.5f;
       return result;
   }
   
   // 提供内存释放函数，避免内存泄漏
   void free_result(MultiArrayResult* result) {
       free(result->arr1);
       free(result->arr2);
       free(result);
   }
   

2. JS侧解析：
   从Wasm线性内存中读取结构体字段，再根据指针和长度提取数组数据：

   // 假设已加载Wasm实例，名为wasmInstance
   const memory = new Uint8Array(wasmInstance.exports.memory.buffer);
   const intSize = 4;
   const structPtr = wasmInstance.exports.get_multiple_arrays();
   
   // 按结构体字段偏移读取指针和长度（小端字节序，适配Wasm默认架构）
   const arr1Ptr = new DataView(memory.buffer).getUint32(structPtr, true);
   const len1 = new DataView(memory.buffer).getUint32(structPtr + intSize, true);
   const arr2Ptr = new DataView(memory.buffer).getUint32(structPtr + intSize * 2, true);
   const len2 = new DataView(memory.buffer).getUint32(structPtr + intSize * 3, true);
   
   // 提取数组数据
   const arr1 = new Int32Array(memory.buffer, arr1Ptr, len1);
   const arr2 = new Float32Array(memory.buffer, arr2Ptr, len2);
   
   // 使用后释放内存
   wasmInstance.exports.free_result(structPtr);
   

替代方案 #

如果觉得结构体解析流程繁琐，可以选择以下更简洁的实现方式：

方案1：利用Wasm多返回值特性 #

Wasm支持返回多个值，每个数组对应「指针+长度」两个返回值：

// Wasm侧
void get_arrays(int** arr1, int* len1, float** arr2, int* len2) {
    *len1 = 3;
    *arr1 = malloc(sizeof(int) * *len1);
    (*arr1)[0] = 1; (*arr1)[1] = 2; (*arr1)[2] = 3;

    *len2 = 2;
    *arr2 = malloc(sizeof(float) * *len2);
    (*arr2)[0] = 1.5f; (*arr2)[1] = 2.5f;
}

编译时需开启多返回值支持（如Emscripten编译参数-s EXPORTED_FUNCTIONS=['_get_arrays','_free']），JS侧调用：

const [arr1Ptr, len1, arr2Ptr, len2] = wasmInstance.exports.get_arrays();
const arr1 = new Int32Array(memory.buffer, arr1Ptr, len1);
const arr2 = new Float32Array(memory.buffer, arr2Ptr, len2);
// 使用后释放数组内存
wasmInstance.exports.free(arr1Ptr);
wasmInstance.exports.free(arr2Ptr);

方案2：JS预分配内存传递给Wasm #

提前在JS中分配内存，将指针传给Wasm函数，让Wasm直接写入数据并返回数组长度：

// JS侧预分配内存
const arr1Len = 3;
const arr1Ptr = wasmInstance.exports.malloc(arr1Len * 4);
const arr2Len = 2;
const arr2Ptr = wasmInstance.exports.malloc(arr2Len * 4);

// 调用Wasm函数写入数据
wasmInstance.exports.fill_arrays(arr1Ptr, arr1Len, arr2Ptr, arr2Len);

// 读取数组数据
const arr1 = new Int32Array(memory.buffer, arr1Ptr, arr1Len);
const arr2 = new Float32Array(memory.buffer, arr2Ptr, arr2Len);

// 释放内存
wasmInstance.exports.free(arr1Ptr);
wasmInstance.exports.free(arr2Ptr);

Wasm侧实现：

void fill_arrays(int* arr1, int len1, float* arr2, int len2) {
    for(int i=0; i<len1; i++) arr1[i] = i+1;
    for(int i=0; i<len2; i++) arr2[i] = (float)(i+1.5);
}

方案3：打包成带元数据的单一数组 #

将多个数组的长度和数据打包到一个大数组中，开头用固定位置存储各数组长度，JS读取后拆分：

int* pack_multiple_arrays(int* total_len) {
    int len1 = 3, len2 = 2;
    // 总长度：2个长度值 + 各数组元素数
    *total_len = 2 + len1 + len2;
    int* packed = malloc(sizeof(int) * *total_len);
    // 存储元数据（各数组长度）
    packed[0] = len1;
    packed[1] = len2;
    // 存储第一个数组数据
    for(int i=0; i<len1; i++) packed[2+i] = i+1;
    // 浮点数据转整数存储（需注意精度，也可直接按字节对齐存储浮点）
    for(int i=0; i<len2; i++) packed[2+len1+i] = (int)((i+1.5)*1000);
    return packed;
}

JS侧解析：

const totalLenPtr = wasmInstance.exports.malloc(4);
const packedPtr = wasmInstance.exports.pack_multiple_arrays(totalLenPtr);
const totalLen = new DataView(memory.buffer).getUint32(totalLenPtr, true);
const packedArray = new Int32Array(memory.buffer, packedPtr, totalLen);

// 读取元数据并拆分数组
const len1 = packedArray[0];
const len2 = packedArray[1];
const arr1 = packedArray.subarray(2, 2+len1);
const arr2 = packedArray.subarray(2+len1).map(val => val / 1000);

// 释放内存
wasmInstance.exports.free(packedPtr);
wasmInstance.exports.free(totalLenPtr);

内容的提问来源于stack exchange，提问作者Raym