比较两个数组中的多个对象

Question

我有两组对象，我目前正在将它们推送到两个不同的数组，我正在尝试比较两组数组的对象数量以及键值对中的值是否正确。

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <!-- order to build too -->
  <table id="bubbleTable" class="heavyTable">
    <thead>
      <tr>
        <th width="12%">Amount</th>
        <th width="43%">Vehicle</th>
        <th width="20%">Wheels</th>
        <th width="25%">Pattern</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center" valign="middle" class="row">
        <td class="amount">1</td>
        <td class="vehicle">
          <img src="../images/car1192015.png" class="carChartVersion">
        </td>
        <td class="wheel">
          <img src="../images/wheelsthmb1.png" class="chartVersion">
        </td>
        <td class="pattern">
          <img src="../images/checkerboard1192015.png" class="patternChartVersion">
        </td>
      </tr>
      <tr align="center" valign="middle" class="row">
        <td class="amount">2</td>
        <td class="vehicle">
          <img src="../images/truck1192015.png" class="carChartVersion">
        </td>
        <td class="wheel">
          <img src="../images/wheelsthmb2.png" class="chartVersion">
        </td>
        <td class="pattern">
          <img src="../images/squiggle1192015.png" class="patternChartVersion">
        </td>
      </tr>
      <tr align="center" valign="middle" class="row">
        <td class="amount">3</td>
        <td class="vehicle">
          <img src="../images/van1192015.png" class="carChartVersion">
        </td>
        <td class="wheel">
          <img src="../images/wheelsthmb3.png" class="chartVersion">
        </td>
        <td class="pattern">
          <img src="../images/fire1192015.png" class="patternChartVersion">
        </td>
      </tr>
    </tbody>
  </table>


  <!-- user Input container -->
  <div id="currentOrder" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 79px; max-height: none; height: auto;">
    <div class="vehiclesInBox" id="product6">
      <div class="fltLeft positionRelative name6">
        <img class="vehicle vehicleInShipment" src="../images/car1192015.png">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
        <img src="../images/wheelsthmb1.png" class="hidden">
        <img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
      </div>
      <div class="fltRight removeX">–</div>
      <div class="clear">
      </div>
    </div>
    <div class="vehiclesInBox" id="product7">
      <div class="fltLeft positionRelative name7">
        <img class="vehicle vehicleInShipment" src="../images/truck1192015.png">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels2.png">
        <img src="../images/wheelsthmb2.png" class="hidden">
        <img class="pattern patternInShipment" src="../images/squiggle1192015.png">
      </div>
      <div class="fltRight removeX">–</div>
      <div class="clear"></div>
    </div>
    <div class="vehiclesInBox" id="product8">
      <div class="fltLeft positionRelative name8">
        <img class="vehicle vehicleInShipment" src="../images/van1192015.png">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels3.png">
        <img class="pattern patternInShipment" src="../images/fire1192015.png">
      </div>
      <div class="fltRight removeX">–</div>
      <div class="clear"></div>
    </div>
  </div>



  <script>
    $(document).ready(function() {

      //Image variables
      var vehicleList = ['../images/car1192015.png', '../images/truck1192015.png', '../images/van1192015.png'];

      //set different wheel shapes thumbnails
      var wheelThmbs = ['../images/wheelsthmb1.png', '../images/wheelsthmb2.png', '../images/wheelsthmb3.png', '../images/wheelsthmb4.png'];

      //images with two wheels
      var wheels = ['../images/wheels1.png', '../images/wheels2.png', '../images/wheels3.png', '../images/wheels4.png']


      //put within the ship order button
      var orderChart = [];
      var userInput = [];


      $("tr.row").each(function() {
        var vehicle = $(this).find(".vehicle img").attr("src");
        var wheel = $(this).find(".wheel img").attr("src");
        var pattern = $(this).find(".pattern img").attr("src");
        var amount = $(this).find(".amount").html();

        //check for amount add another object

        var vehicleToComplete = {
          vehicle: vehicle,
          wheel: wheel,
          pattern: pattern
        }

        orderChart.push(vehicleToComplete);
      });


      $(".vehiclesInBox").each(function() {
        var vehicle = $(this).find(".fltLeft .vehicle").attr("src");
        var pattern = $(this).find(".fltLeft .pattern").attr("src");
        var findWheel = $(this).find(".fltLeft .wheelThmbs").attr("src");

        //swapSingleWheel = findWheel;
        if (findWheel === wheels[0]) {
          findWheel = wheelThmbs[0];
        } else if (findWheel === wheels[1]) {
          findWheel = wheelThmbs[1];
        } else if (findWheel === wheels[2]) {
          findWheel = wheelThmbs[2];
        }


        var userCompleteVehicle = {
          vehicle: vehicle,
          wheel: findWheel,
          pattern: pattern
        }

        userInput.push(userCompleteVehicle);

      });

      if (orderChart.length != userInput.length) {
        //console.log()
        alert("the amount of vehicles in shipped order is incorrect")

      }

    });
  </script>

</body>

</html>

我可以成功比较两个数组的长度，但我尝试使用直接相等，例如 orderChart == userInput（这是我的数组的变量名），但我一直得到错误的结果。任何帮助表示赞赏。谢谢！

Answer 1

如果您尝试比较对象，结果将始终为假。即使两者具有相同的属性，解释器也总是会认为它们是两个截然不同的对象，所以..

obj1 === obj2 = false.

您需要创建一个函数来比较两个对象的 keys/values，但如果您不想浪费时间，您可以随时使用 loadash #isEqual.

Answer 2

您要执行的是深度相等性检查。如果您尝试 'naively' 仅使用 '==' 或 '===' 比较两个对象，它将始终 return 错误（因为 JS 中的对象是通过引用传递的）。

这本身就是一个非常有趣的问题：

var a = b = {}; 
a === b;  // true
a == b;   // true

var c = {}; var d = {};
c === d; // false
c == d; //false

无论如何...为了检查一个对象是否等于另一个对象，您可能需要调查对象中每个字段的值是否等于其他字段。出现的一个问题是：嵌套对象呢？您必须检查其中一个（即使用递归）。

因此，一种可能的解决方案是：

function equalTo (a, b) {
  if (!(typeof a === 'object') && typeof b === 'object')) 
      || (a === b))
    return true;

  var keysA, keysB, equalKeys;

  keysA = Object.keys(a);
  keysB = Object.keys(b);

  equalKeys = kA.some(function (item, i) {
    return item === kB[i];
  });

  if (!equalKeys)
    return false;

  for (var key in keysA)
    return equalTo(a[keysA[key]], b[keysA[key]]);

  return false;
}

base: 我们正在处理非对象，用'==='检查是否相等。

递归：还没有在非对象中，验证键是否相等（如果不相等，对象将不相等）。如果是，则对每个键递归地进行检查。

编辑：如前所述，lodash 和 underscore 都有等效的 ::isEqual 方法（我会选择 lodash）

ps.: 这不是经过测试的解决方案。这只是为了说明一种做法（你应该使用 lodash 或其他生产就绪的解决方案）

比较两个数组中的多个对象

Comparing multiple objects in two arrays

javascript

arrays

jquery

object