在 javascript foreach 中使用数组

Question

我有以下（简化的）php 函数，它为我计算总值。它基本上从 wordpress 数据库中获取一组项目并检查每个项目的类型，然后将其值与特定的给定值进行比较，并将所有比较相加。

        function total(){ 
        $value1 = 10; // compare value for type 1 items
        $value1 = 20; // type 2 items
        $value1 = 30; // type 3 items
        $total = 0; // reset total variable

global $wpdb;
        $items = $wpdb->get_results("SELECT `item_type` as type, `item_value` as value FROM `table`"); // get all the items from database

        foreach ($items as $item) {

    // check which item type
        switch ($item->type) { 
          case 1:
         $total = $total + min($value1, $item->value);
            break;
          case 2:
          $total = $total + min($value2, $item->value);
            break;
          case 3:
         $total = $total + min($value3, $item->value);
            break;
        }}

        return $total;
        }

现在我想在 javascript 中重新制作相同的函数，以便我可以在表单中使用它进行计算。这是我目前得到的；

<SCRIPT type="text/javascript">
 function calculate_total (){
    var items = <?php echo json_encode($items); ?>;
    var value1 = document.form.range1Input.value;
    var value2 = document.form.range2Input.value;
    var value3 = document.form.range3Input.value;

  for each (var item in items){
     switch (**(refer to item type in array)**) { 
          case 1:
         total = total + min(value1, **(refer to item value in array)**);
            break;
          case 2:
          total = total + min(value2, **(refer to item value in array)**);
            break;
          case 3:
         total = total + min(value3, **(refer to item value in array)**);
            break;
        }}

 document.form.total.value = total;
}
</script>

如何引用 items 数组中的值？我希望有人能给我一些建议。

我还看到echo json_encode($items) 将数组格式化为{"type":"3","value":"1.00"},{"type":"1","value":"20.50"} 等，我想知道这是否是javascript 的可用格式，因为当我尝试total = items[1]; 时，我在表单中看到[Object Object]。

$items = $pdb->get_results() 被格式化为Array ( [0] => stdClass Object ( [type] => 1 [value] => 35.00 ) [1] => stdClass Object ( [type] => 3 [value] => 1.00 )

Answer 1

如您所料，您的第一项可以称为items[0]，第二项可以称为items[1]，依此类推。

因此，在您的 switch 语句/在您的 for 循环中，item 指的是当前索引（0、1、2 等），您可以说 items[item] 来指代您当前的项目查看您的循环：首先它将等于items[0]，然后是items[1]，依此类推。

所以，switch (items[item].type) { 应该是您所需要的。

---

(快速回顾 JS：数组和对象在 JS 中是不同的东西，如果不确定，请查找差异。引用它们时，可以使用 myArray[0] 从数组中获取内容，并且可以使用myObject['myKey'] 或 myObject.myKey 从对象中获取内容。在您的情况下，items 是一个数组，它的每个元素都是一个对象。您可以因此请使用items[0]['type'] 或items[0].type 来访问您的第一个项目的类型）。

---

items[1] 在你尝试的时候只是显示[Object object] 的原因是因为浏览器不擅长在屏幕上显示对象——对象就在那里，JS 可以看到它，只是大多数对象打印为@ 987654337@。您最好显示 JSON.stringify(items[1]) 以将对象的 JSON 表示形式视为字符串。更好的是，尝试console.log(items) 或console.log(items[1]) 在浏览器的控制台 中查看整个对象（您可以搜索如何调出浏览器控制台，每个浏览器/操作系统都不同，但它是非常适合调试）。

Answer 2

您可能应该阅读您的 JavaScript 语法，但有四种方法可以遍历数组：

TL;DR：如果你正在做改变状态的事情，我推荐Array#forEach，如果没有，推荐Array#map。

var myArray = [1,2,3,4,5,6];
var len = myArray.length;

1) for 循环

for (var i=0; i<len; i++) {
  doSomethingTo(myArray[i]);
}

2) while 循环

var i = 0; 
while (i<len) {
  doSomethingTo(myArray[i]);
  i++;
}

3) 为每个

myArray.forEach(function (element) {
  doSomethingTo(element);
});

4) 地图

var newArray = myArray.map(function (element) {
  doSomethingTo(element);
});

在这四个中，只有 map 有回报。它将在数组的每个元素上运行您为其提供的函数，并返回所有这些元素的数组。 while 循环是最快的，但如果可以的话，你应该避免像命令式那样做事情。