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



我从数据库中按日期降序提取一些数据,并通过循环使用shift-push将其添加到数组中,因为新数据不断定期到达。

有一件奇怪的事我不能理解为什么第一个获取的值被添加到最后一个索引中。

这是我的代码:

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);
}

这是console.log(time_Array(;输出

(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开始,但它的最后一个值。

这里是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>

编辑

var_dump((

array(12({[0]=>array(2({["date_time"]=>string(19("2018-12-10 12:15:16"["meas_value"]=>int(106(}[1]=>array array(2({["date_time"]=>string(19("2018-12-10 11:30:16"["meas_value"]=>int(106(}[4]=>数组(2({["date_time"]=>字符串(19("2018-12-10 11:15:16"["meas_value"]=>int(106(}[5]=>数组]=>字符串(19("2018-12-10 10:30:16"["meas_value"]=>int(107(}[8]=>数组(2({["date_time"]=>string(19("2018-12-10 10:15:16"["meas_value"]=>int(107 2018-12-10 09:30:16"["meas_value"]=>int(107(}

循环运行良好,它后面的代码就是破坏这些东西的代码:

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]中的值
3rd行(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行的目的是什么?它们没有任何意义,也与你在问题中描述的预期结果不匹配。


更新(我认为我在评论中与OP讨论后理解了什么(

声明

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);
}
}

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

.push()总是将新项添加到数组的末尾。

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

最新更新