插件窝 干货文章 Go Wasm如何遍历JavaScript对象?

Go Wasm如何遍历JavaScript对象?

JavaScript 对象 遍历 exampleObject 373    来源:    2025-03-13

在Go中通过WebAssembly(Wasm)与JavaScript交互时,你可以使用syscall/js包来操作JavaScript对象。要遍历JavaScript对象,你可以使用js.Value类型提供的方法来获取对象的属性和值。

以下是一个示例,展示了如何在Go Wasm中遍历JavaScript对象:

package main

import (
    "syscall/js"
)

func main() {
    // 等待JavaScript环境准备好
    <-js.Global().Get("document").Call("getElementById", "ready").Get("onload").Invoke().Ready()

    // 假设我们有一个JavaScript对象
    jsObject := js.Global().Get("exampleObject")

    // 遍历JavaScript对象的属性
    keys := js.Global().Get("Object").Call("keys", jsObject)
    for i := 0; i < keys.Length(); i++ {
        key := keys.Index(i).String()
        value := jsObject.Get(key)
        println("Key:", key, "Value:", value.String())
    }

    // 保持程序运行
    select {}
}

解释:

  1. js.Global().Get("exampleObject"): 获取全局JavaScript对象exampleObject
  2. js.Global().Get("Object").Call("keys", jsObject): 使用JavaScript的Object.keys()方法获取对象的所有键。
  3. keys.Length(): 获取键的数量。
  4. keys.Index(i).String(): 获取第i个键的名称。
  5. jsObject.Get(key): 使用键名获取对应的值。

注意事项:

  • js.Value类型提供了与JavaScript交互的基本方法,如GetSetCall等。
  • 遍历JavaScript对象时,Object.keys()是一个常用的方法,它返回一个包含对象所有可枚举属性的数组。
  • 由于Go Wasm是单线程的,你需要确保程序不会过早退出(例如使用select {}来保持程序运行)。

示例JavaScript代码:

<!DOCTYPE html>
<html>
<head>
    <title>Go Wasm Example</title>
</head>
<body>
    <div id="ready"></div>
    <script>
        // 定义一个JavaScript对象
        var exampleObject = {
            name: "Alice",
            age: 30,
            city: "New York"
        };

        // 触发Go Wasm程序的加载
        document.getElementById("ready").onload = function() {};
    </script>
    <script src="wasm_exec.js"></script>
    <script>
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
            go.run(result.instance);
        });
    </script>
</body>
</html>

在这个示例中,Go Wasm程序会遍历exampleObject对象的所有属性,并打印出每个键和对应的值。