如何从JS向WebAssembly的Rust传递数组或对象？

WebAssembly完全支持接收来自JavaScript的数组或对象，你的问题出在绑定方式不正确，以下是具体解决方案：

1. 直接传递字符串数组 #

可以使用js_sys::Array接收JavaScript数组，再转换为Rust的Vec<String>：

use wasm_bindgen::prelude::*;
use js_sys::Array;

#[wasm_bindgen]
pub fn array_length(arr: &Array) -> usize {
    let mut string_vec = Vec::new();
    // 遍历JS数组，转换每个元素为字符串
    for item in arr.iter() {
        if let Ok(s) = item.as_string() {
            string_vec.push(s);
        }
    }
    string_vec.len()
}

JavaScript调用示例：

array_length(["hello", "wasm", "rust"]); // 返回3

2. 传递结构化对象（用serde-wasm-bindgen） #

如果需要传递包含数组的对象，需要通过serde完成JS值与Rust结构体的反序列化，先确保依赖配置正确：

在Cargo.toml中添加依赖：

[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1.0", features = ["derive"] }
serde-wasm-bindgen = "0.4"
js-sys = "0.3"

然后编写Rust代码：

use wasm_bindgen::prelude::*;
use serde::Deserialize;

// 定义带serde反序列化的结构体
#[derive(Deserialize, Debug)]
pub struct Input {
    array: Vec<String>,
}

#[wasm_bindgen]
pub fn array_length(input: JsValue) -> usize {
    // 将JS值反序列化为Rust结构体
    let input: Input = serde_wasm_bindgen::from_value(input).unwrap();
    input.array.len()
}

JavaScript调用示例：

array_length({ array: ["a", "b", "c", "d"] }); // 返回4

原代码问题说明 #

你直接给自定义结构体Input加上#[wasm_bindgen]并不能让它自动接收JavaScript对象，wasm-bindgen不会默认完成这种跨语言的结构体映射。必须通过JsValue作为中间载体，再借助serde或者手动转换的方式处理数据。

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