WebSocket消息需先JSON.parse()解析为对象，再解构提取字段；须设binaryType="text"、加try/catch防错，并对嵌套结构提供默认值兜底。
WebSocket 消息本身是字符串或二进制数据，不是 JavaScript 对象，所以不能直接解构。必须先解析（如 JSON.parse()）成对象后，才能使用解构语法提取字段。
先解析再解构：标准流程
浏览器收到的 event.data 是原始数据，常见处理链路如下：
- 确保
socket.binaryType = "text"，让event.data是字符串类型 - 用
JSON.parse()将字符串转为对象（需try/catch防错） - 对解析后的对象使用解构，提取
type、data、id等字段
示例代码：
socket.onmessage = (event) => {
let msg;
try {
msg = JSON.parse(event.data);
} catch (e) {
console.warn("Invalid JSON received", event.data);
return;
}
// 安全解构：提供默认值，避免访问 undefined 属性报错
const { type = "unknown", data = {}, id } = msg;
if (type === "chat") {
console.log("新消息:", data.content, "来自", data.sender);
}
};
带默认值和嵌套解构的实用写法
真实业务中消息结构常有嵌套，解构时可一并展开，提升可读性：
立即学习“Java免费学习笔记（深入）”；
- 给顶层字段设默认值（如
type = "noop"），防止解构失败 - 对
data内部字段也解构，例如{ content, sender = "system" } - 忽略不需要的字段，只取关心的部分，减少后续判断
示例：
const {
type = "unknown",
id,
data: { content = "", sender = "anonymous", timestamp = Date.now() } = {}
} = msg;
避免常见错误
解构前没校验会导致运行时错误，这些情况要主动防御：
- 不假设
msg一定有data字段——用data: {} = {}提供空对象兜底 - 不信任
event.data一定是字符串——先检查类型或统一设置binaryType - 不跳过
JSON.parse直接解构event.data，否则会解构字符串（如"{t:'a'}"的第一个字符是"{"）
配合 TypeScript 更安全
若项目使用 TypeScript，可定义消息接口，让解构在编译期就有类型提示：
interface WsMessage {
type: string;
id?: string;
data: Record<string, any>;
}
socket.onmessage = (event) => {
const msg = JSON.parse(event.data) as WsMessage;
const { type, data } = msg; // 类型已知，解构更安心
}; 
