如何解构对象？FTX WebSocket返回数组解析失败求助

代码实现 #

const WebSocket = require('ws')
let socket = new WebSocket('wss://ftx.com/ws/');

const dataObject = {'op': 'subscribe', 'channel': 'trades', 'market': 'BTC-PERP'};

socket.onopen = function() {
    socket.send(JSON.stringify(dataObject));
    console.log('Connected')

    messages = []

    socket.onmessage = (msg) => {
        const priceData = JSON.parse(msg.data)
        messages.push(priceData.data)
        console.log(priceData.data)
    }

    socket.onclose = function(event) {
        console.log('Client notified socket has closed', event);
    };
};

运行日志 #

[nodemon] starting `node socket-ftx.js`
Connected
undefined
[
  {
    id: 5014962233,
    price: 19280,
    size: 0.03,
    side: 'sell',
    liquidation: false,
    time: '2022-09-22T20:24:52.011309+00:00'
  },
  {
    id: 5014962234,
    price: 19280,
    size: 0.02,
    side: 'sell',
    liquidation: false,
    time: '2022-09-22T20:24:52.011309+00:00'
  },
  {
    id: 5014962235,
    price: 19280,
    size: 0.0047,
    side: 'sell',
    liquidation: false,
    time: '2022-09-22T20:24:52.011309+00:00'
  }
]

问题 #

尝试将返回数据中的price和size字段存入数组，但直接用priceData.data[0].price会触发TypeError，用typeof检测发现priceData.data是object类型而非数组，想知道原因及如何解构该对象。

原因分析 #

1. FTX WebSocket消息类型差异：FTX的WebSocket连接后，会先返回订阅确认消息（type: "subscribed"），此时priceData.data是undefined；只有后续的交易更新消息（type: "update"）才会携带数组格式的交易数据。
2. JavaScript的历史遗留特性：typeof undefined会返回"object"，这是JS早期设计的遗留问题，导致你误以为priceData.data是对象，实际上第一次收到的是undefined。

解决方案 #

1. 过滤有效消息并处理 #

先判断消息类型，只处理携带交易数据的更新消息，同时确保data是数组再操作：

const WebSocket = require('ws')
let socket = new WebSocket('wss://ftx.com/ws/');

const dataObject = {'op': 'subscribe', 'channel': 'trades', 'market': 'BTC-PERP'};
// 存储price和size的数组
const priceSizeList = [];

socket.onopen = function() {
    socket.send(JSON.stringify(dataObject));
    console.log('Connected')

    socket.onmessage = (msg) => {
        const priceData = JSON.parse(msg.data);
        
        // 仅处理更新类型且data为数组的消息
        if (priceData.type === 'update' && Array.isArray(priceData.data)) {
            // 遍历交易数据，提取所需字段
            priceData.data.forEach(trade => {
                const { price, size } = trade;
                priceSizeList.push({ price, size });
                console.log('已存入:', { price, size });
            });
        }
    }

    socket.onclose = function(event) {
        console.log('Client notified socket has closed', event);
    };
};

2. 对象解构的常用方式 #

• 单条交易对象解构：直接从交易对象中提取目标字段

  const trade = { id: 123, price: 19280, size: 0.03 };
  const { price, size } = trade;
  

• 批量处理数组中的交易对象：用map批量提取字段并生成新数组

  const tradeArray = priceData.data;
  const extractedList = tradeArray.map(({ price, size }) => ({ price, size }));
  priceSizeList.push(...extractedList); // 将批量数据合并到存储数组
  

内容的提问来源于stack exchange，提问作者Blake D'Ippolito