如何通过PyScript将Python列表转换为JavaScript数组？

问题描述 #

尝试将Python列表x = [1,2,3,4]通过PyScript传递给JavaScript时，通过pyscript.interpreter.globals.get('x')获取到的是Proxy对象，无法直接通过索引（如x[2]）取值或遍历，返回undefined。即使通过import js将列表赋值给js.x，仍然存在Proxy包装的问题。

解决方法 #

方法1：在Python侧直接转换为JavaScript原生数组 #

在Python代码中，利用js.Array将列表转换为JS原生数组后再绑定到全局对象，JS端就能直接操作原生数组：

<html>
  <head>
    <title>Table Editor</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
  <body>
    <py-script>
import js
x = [1,2,3,4]
# 将Python列表转换为JavaScript原生数组
js.x = js.Array.from(x)
    </py-script>

    <button onclick="show_x_in_console()">show 'x' from Python in console.log</button>
    <button onclick="show_x_in_body()">show 'x' from Python in body</button>
    <script>
        function show_x_in_console(){
            console.log(`In JavaScript, x = ${x}`)
        }
        function show_x_in_body(){
          var id1 = document.getElementById("id1")
          var id2 = document.getElementById("id2")
          var id3 = document.getElementById("id3")
          id1.innerHTML = x
          id2.innerHTML = typeof(x)
          id3.innerHTML = x[2] // 现在返回3
        }
    </script>
  
    <p id="id1"></p>
    <p id="id2"></p>
    <p id="id3"></p>
  </body>
</html>

方法2：在JavaScript侧解包Proxy对象 #

如果无法修改Python代码，可在JS端通过Array.from()直接将Proxy对象转换为原生数组：

function show_x_in_body(){
  var id1 = document.getElementById("id1")
  var id2 = document.getElementById("id2")
  var id3 = document.getElementById("id3")
  var xProxy = pyscript.interpreter.globals.get('x')
  // 把Proxy转换为JS原生数组
  var x = Array.from(xProxy)
  id1.innerHTML = x
  id2.innerHTML = typeof(x)
  id3.innerHTML = x[2] // 返回3
}

原理说明 #

PyScript基于Pyodide实现跨语言交互，Python对象（如列表）会被包装成Proxy对象暴露给JS。这种Proxy仅支持Python风格的属性访问逻辑，不兼容JS原生数组的索引操作。通过显式转换为JS原生数组，就能使用所有标准数组方法和索引访问。

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