请求WebAssembly中数组传递与返回的完整多语言样板示例

以下是针对JavaScript数组传入WebAssembly计算元素平方后返回的多语言实现样板，包含内存管理的关键步骤：

C语言实现 #

核心代码（square.c） #

#include <emscripten.h>
#include <stdlib.h>

// 全局变量存储输出数组长度
int output_length;

EMSCRIPTEN_KEEPALIVE
int* square_array(int* input, int length) {
    output_length = length;
    // 分配WASM内存存储结果
    int* output = (int*)malloc(length * sizeof(int));
    for (int i = 0; i < length; i++) {
        output[i] = input[i] * input[i];
    }
    return output;
}

EMSCRIPTEN_KEEPALIVE
void free_memory(int* ptr) {
    free(ptr);
}

编译命令 #

emcc square.c -o square.js -s EXPORTED_FUNCTIONS='["_square_array", "_free_memory", "_output_length"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap", "malloc", "free"]'

JavaScript调用代码 #

// 加载WASM模块
const module = await import('./square.js');

function processArray(arr) {
    const length = arr.length;
    // 分配WASM内存存储输入数组（int占4字节）
    const inputPtr = module._malloc(length * 4);
    // 将JS数组拷贝到WASM内存
    module.HEAP32.set(new Int32Array(arr), inputPtr / 4);
    
    // 调用WASM函数获取结果指针
    const outputPtr = module._square_array(inputPtr, length);
    // 从WASM内存读取结果数组
    const result = Array.from(module.HEAP32.subarray(outputPtr / 4, outputPtr / 4 + length));
    
    // 释放内存，避免泄漏
    module._free_memory(outputPtr);
    module._free(inputPtr);
    
    return result;
}

// 测试
console.log(processArray([1,2,3,4])); // 输出 [1,4,9,16]

C++语言实现 #

核心代码（square.cpp） #

#include <emscripten.h>
#include <cstdlib>

extern "C" {
    int output_length;

    EMSCRIPTEN_KEEPALIVE
    int* square_array(int* input, int length) {
        output_length = length;
        int* output = (int*)std::malloc(length * sizeof(int));
        for (int i = 0; i < length; i++) {
            output[i] = input[i] * input[i];
        }
        return output;
    }

    EMSCRIPTEN_KEEPALIVE
    void free_memory(int* ptr) {
        std::free(ptr);
    }
}

编译命令 #

emcc square.cpp -o square.js -s EXPORTED_FUNCTIONS='["_square_array", "_free_memory", "_output_length"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap", "malloc", "free"]'

JavaScript调用代码 #

与C语言的调用代码完全一致。

Go语言实现 #

核心代码（square.go） #

package main

import (
    "syscall/js"
)

func squareArray(this js.Value, args []js.Value) interface{} {
    inputArr := args[0]
    length := inputArr.Get("length").Int()
    
    // 创建JS结果数组
    result := js.Global().Get("Array").New(length)
    
    for i := 0; i < length; i++ {
        val := inputArr.Index(i).Int()
        result.SetIndex(i, val*val)
    }
    
    return result
}

func main() {
    // 导出函数到JS环境
    js.Global().Set("squareArray", js.FuncOf(squareArray))
    // 阻塞防止Go程序退出
    select {}
}

编译命令 #

GOOS=js GOARCH=wasm go build -o square.wasm square.go

JavaScript调用代码 #

// 引入Go WASM运行时文件（可从GOROOT/misc/wasm/wasm_exec.js获取）
import { Go } from './wasm_exec.js';

const go = new Go();
const result = await WebAssembly.instantiateStreaming(fetch('square.wasm'), go.importObject);
go.run(result.instance);

// 测试
console.log(squareArray([1,2,3,4])); // 输出 [1,4,9,16]

Rust语言实现 #

核心代码（src/lib.rs） #

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn square_array(input: &[i32]) -> Vec<i32> {
    input.iter().map(|&x| x * x).collect()
}

编译命令 #

先安装wasm-pack：cargo install wasm-pack，再执行：

wasm-pack build --target web

JavaScript调用代码 #

import init, { square_array } from './pkg/square.js';

await init();

// 测试
console.log(square_array([1,2,3,4])); // 输出 [1,4,9,16]

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