JavaScript中使用array.push()方法后数组仍为空的问题求助

看起来你遇到的核心问题是异步数据流更新时，数组填充和日志输出的时机不匹配，再加上可能没正确监听faces的更新触发逻辑，导致eyesData始终显示为空。咱们一步步拆解解决：

1. 最直观的问题：日志输出时机太早 #

你当前的console.log(eyesData)是在代码最外层执行的，这时候faces数据流还没开始更新，renderFaces也没被调用，数组自然是空的。哪怕之后faces更新填充了数组，之前的日志也不会自动刷新。

修复方式： #

把日志放到数据推送之后，或者每次renderFaces执行完后打印，就能看到数组的实时变化：

let eyesData = [];
const pushFaceData = ({ rightEyeOpenProbability }, i) => {
    eyesData.push(rightEyeOpenProbability);
    // 每次推送后打印，实时查看数组状态
    console.log('当前eyesData:', eyesData);
};
const renderFaces = () => {
    faces.map(pushFaceData);
    // 也可以在遍历完faces后统一打印
    // console.log('当前eyesData:', eyesData);
};

2. 关键问题：确保renderFaces在faces更新时被调用 #

你提到faces是每100ms自动更新的数据流，但代码里没显示如何监听这个更新。如果faces是定时器更新的普通数组、RxJS Observable，或是框架（React/Vue）的响应式数据，都需要绑定更新回调，每次faces变化时触发renderFaces。

常见场景示例： #

• 原生JS定时器更新faces的情况：

// 假设faces通过定时器更新，每次更新后立即触发数据推送
setInterval(() => {
    // 替换成你实际的faces更新逻辑
    updateFaces();
    renderFaces();
}, 100);

• React中使用响应式状态的情况：

import { useEffect, useState } from 'react';

const [faces, setFaces] = useState([]);

// 监听faces状态变化，每次更新时推送数据
useEffect(() => {
    renderFaces();
}, [faces]); // 当faces更新时自动触发这个回调

3. 额外优化：用forEach替代map更合适 #

你只是需要遍历faces执行推送操作，不需要返回新数组，用forEach语义更清晰，避免不必要的数组创建：

const renderFaces = () => {
    faces.forEach(pushFaceData);
};

最终调整后的完整代码示例 #

let eyesData = [];

const pushFaceData = ({ rightEyeOpenProbability }) => {
    eyesData.push(rightEyeOpenProbability);
    console.log('实时eyesData:', eyesData);
};

const renderFaces = () => {
    // 额外加个空数组检查，避免无意义的遍历
    if (!faces?.length) {
        console.warn('faces数组为空，无法推送数据');
        return;
    }
    faces.forEach(pushFaceData);
};

// 模拟faces每100ms更新的数据流
setInterval(() => {
    // 替换成你实际的faces更新逻辑
    faces = [{ rightEyeOpenProbability: Math.random() }, { rightEyeOpenProbability: Math.random() }];
    renderFaces();
}, 100);

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