为什么循环在使用push-shift的desc数据获取中的最后一个索引处添加第一个值

loading...


0

我从数据库中获取一些数据,这些数据按日期降序排列,并通过循环使用shift-push将其添加到数组中,因为新数据会定期到达 .

我无法理解的一个奇怪的事情是为什么第一个获取的值被添加到最后一个索引 .

Here is my code:

function dspChrt3(Device_Data) { 
        //console.log(Device_Data);

        var time_Array = [];
        var meas_value_Array = [];

       for(var i=0; i<Device_Data.length; i++) {
            time_Array.push(Device_Data[i].date_time);
            meas_value_Array.push(Device_Data[i].meas_value);
            }

        //console.log(Device_Data[0].date_time);
        //console.log(Device_Data[1].meas_value);
        date_time = Device_Data[0].date_time;
        meas_value = Device_Data[1].meas_value;
        time_Array.shift();
        time_Array.push(date_time);
        meas_value_Array.shift();
        meas_value_Array.push(meas_value);

        console.log(time_Array);
     }

Here is the console.log(time_Array); output

(12) […]
​0: "2018-12-10 11:45:16"
​1: "2018-12-10 11:30:16"
​2: "2018-12-10 11:15:16"
​3: "2018-12-10 11:00:16"
​4: "2018-12-10 10:45:16"
​5: "2018-12-10 10:30:16"
​6: "2018-12-10 10:15:16"
​7: "2018-12-10 10:00:16"
​8: "2018-12-10 09:45:16"
​9: "2018-12-10 09:30:16"
​10: "2018-12-10 09:15:16"
​11: "2018-12-10 12:00:19"
​length: 12

//循环应该从12:00开始但是它的最后一个值 .

Here is php:

<?php
    require("Connection.php");
    $stmt = $conn->prepare("Select date_time FROM soil_measurements order by date_time desc limit 12");
    $stmt->execute();

    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
    $WData = $stmt->fetchAll();
    ?>
    <script>
      var WData = <?php echo(json_encode($WData));?>;
      //console.log(WData);
      //console.dir(WData);
    window.onload(dspChrt3(WData));
    </script>    
 </body>
</html>

EDIT

var_dump()

array(12){[0] => array(2){["date_time"] => string(19)"2018-12-10 12:15:16" ["meas_value"] => int(106)} [1] => array(2){["date_time"] => string(19)"2018-12-10 12:00:19" ["meas_value"] => int(106)} [2] => array(2){["date_time"] => string(19)"2018-12-10 11:45:16" ["meas_value"] => int(106)} [3] => array(2){["date_time"] => string(19)"2018-12-10 11:30:16" ["meas_value"] => int(106)} [4] => array(2){["date_time"] => string(19)"2018-12-10 11:15:16" ["meas_value"] => int(106)} [5] => array(2){["date_time"] => string(19)"2018-12-10 11:00:16" ["meas_value"] => int(106)} [6] => array(2){["date_time"] => string(19)"2018-12-10 10:45:16" ["meas_value"] => int(106)} [7] => array(2){[_ 1518] => string(19)"2018-12-10 10:30:16" ["meas_value"] => int(107)} [8] => array(2){["date_time"] => string(19)"2018-12-10 10:15:16" ["meas_value"] => int(107)} [9] => array(2){["date_time"] => string(19)"2018-12-10 10:00:16" ["meas_value"] => int(107)} [10] => array(2){["date_time"] => string(19)"2018-12-10 09:45:16" ["meas_value"] => int(107)} [11] => array(2){["date_time"] => string(19)"2018-12-10 09:30:16" ["meas_value"] => int(107)}

loading...

2回答

  • 1

    .push() 始终将新项添加到数组的末尾 .

    尝试使用 .unshift() 将项添加到数组的开头 .


  • 1

    循环工作正常,其后面的代码是破坏事物的代码:

    date_time = Device_Data[0].date_time;
    meas_value = Device_Data[1].meas_value;
    time_Array.shift();
    time_Array.push(date_time);
    meas_value_Array.shift();
    meas_value_Array.push(meas_value);
    

    第一行在 date_time 中提取已经存储在 for 循环中的 time_Array[0] 中的值 .
    第3行( time_Array.shift(); )删除 time_Array 的第一个元素,并将所有其他元素移动到其开头的一个位置 .
    第4行( time_Array.push(date_time); )将 date_time 中第一行存储的值放在 time_Array 的末尾 . 请记住,它与上一步中从数组中删除的值相同( time_Array[0] 的上一个值) .

    其他三条线甚至更奇怪 . 它们对 meas_value_Array 执行类似操作(删除其第一个值,在其末尾添加另一个值),但它们使用已存储在 meas_value_Array[1] 中的值 . 最后, meas_value_Array 将丢失从数据库收到的第一个值,并包含在其两端重复的第二个值 .

    这6条线的目的是什么?它们没有任何意义,它们与您在问题中描述的预期结果不符 .


    Update (what I think I understood after the discussion with the OP in comments)

    该声明

    window.onload(dspChrt3(WData));
    

    是一次性初始化,将 WData 中的值复制到 time_Arraymeas_value_Array 数组中 .

    为此, dspChrt3() 函数中的 for 循环就足够了,之后不需要任何其他东西:

    function dspChrt3(Device_Data) { 
        // Declaring this variables using `var` makes them local to this function
        // and not visible outside it. I removed the `var` keyword from here
        time_Array = [];
        meas_value_Array = [];
    
        for (var i = 0; i < Device_Data.length; i ++) {
            time_Array.push(Device_Data[i].date_time);
            meas_value_Array.push(Device_Data[i].meas_value);
        }
    }
    

    接下来,如果在加载页面后以某种方式从服务器检索新数据,则可以使用此函数将新数据放在现有数据前面并删除旧条目:

    function updateChrt3(newData) {
        for (var i = newData.length - 1; i >= 0; i --) {
            // remove the last element of time_Array
            time_Array.pop();
            // insert a new element in front of time_Array
            time_Array.unshift(newData[i].date_time);
    
            meas_value_Array.pop();
            meas_value_Array.unshift(newData[i].meas_value);
        }
    }
    

    (有更快的方法来实现相同的目的,但它们不是这个问题的主题)

评论

暂时没有评论!