Question

我遇到了从Web worker检索JSON对象的问题，我能够收到类似[object Object]的东西，它不是JSON对象。以下是我的代码。

main.js文件

if (window.Worker) { // Check if Browser supports the Worker api.
    var worker;
    try {
         worker = new Worker("worker-data.js");
         worker.postMessage([{"data": [{"data1":30},{"data2":40},{"data3":3}]}]);
    } catch(error){
        console.log(error)
    }
}

worker-data.js文件代码

onmessage = function(message) {
    console.log(message.data);
}

我收到的输出： - 产量预期： - 抱歉图像对齐。

Answer 1

您正在帖子消息中传递一个对象数组

worker.postMessage([{"data": [{"data1":30},{"data2":40},{"data3":3}]}]);

您的对象数组位于邮件的data属性中 message.data 但是您访问它时出错了，请尝试访问message.data

的第一个索引

message.data[0]，其中包含您的对象{"data": [{"data1":30},{"data2":40},{"data3":3}]}

使用message.data[0].data访问对象的数据

[{"data1":30},{"data2":40},{"data3":3}]

<强>解释

您在worker.postMessage中传递的任何内容都将在message.data中与message的其他属性一起存在，此处您传递的是一个数组，因此您需要访问该数据的第一个索引数组来获取数据

message.data[0]然后访问通过message.data[0].data

的对象数据

在邮件中

 onmessage = function(message) {
    console.log(message.data[0].data);
    console.log(message.data[0].data[0].data1);
    console.log(message.data[0].data[1].data2);
    console.log(message.data[0].data[2].data3); 
 };

或

仅传递对象

worker.postMessage({"data": [{"data1":30},{"data2":40},{"data3":3}]});

然后在您的邮件中访问数据message.data.data

onmessage = function(message) { console.log(message.data.data); console.log(message.data.data[0].data1); console.log(message.data.data[1].data2); console.log(message.data.data[2].data3); };

这是您更新的小提琴https://jsfiddle.net/d7b680je/1/

<强>段

检查代码段的控制台是否输出。

＆＃13;
＆＃13;
try { var ww = document.querySelector('script[type="text/ww"]'), code = ww.textContent, blob = new Blob([code], { type: 'text/javascript' }), blobUrl = URL.createObjectURL(blob), worker = new Worker(blobUrl); let temp = { "dataVal": [{ "data1": 30 }, { "data2": 40 }, { "data3": 3 }, { "data4": 10 }, { "data5": 130 }, { "data6": 140 }] }; worker.postMessage(temp); } catch (ex) { alert(ex); }
＆＃13;
<script type="text/ww"> self.onmessage = function(message) { console.log(message.data.dataVal); console.log(message.data.dataVal[0].data1); console.log(message.data.dataVal[1].data2); console.log(message.data.dataVal[2].data3); }; </script>
＆＃13;
＆＃13;
＆＃13;

我建议您删除所有数组并将数据作为对象传递

检查这个小提琴https://jsfiddle.net/d7b680je/2/

＆＃13;
＆＃13;
try { var ww = document.querySelector('script[type="text/ww"]'), code = ww.textContent, blob = new Blob([code], { type: 'text/javascript' }), blobUrl = URL.createObjectURL(blob), worker = new Worker(blobUrl); let temp = { "dataVal": { "data1": 30, "data2": 40, "data3": 3, "data4": 10, "data5": 130, "data6": 140 } }; worker.postMessage(temp); } catch (ex) { alert(ex); }
＆＃13;
<script type="text/ww"> self.onmessage = function(message) { console.log(message.data.dataVal.data1); console.log(message.data.dataVal.data2); console.log(message.data.dataVal.data3); }; </script>
＆＃13;
＆＃13;
＆＃13;

以上代码段和Mac游戏中的小提琴的控制台日志

Answer 2

JSON.stringify（）用于将值转换为有效的JSON字符串。然后在另一边你可以JSON.parse（）来取回原始值。 MDN documentation

如何从Webworker接收JSON对象

2 个答案: