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

Question

I have two sets of objects that I am currently pushing to two different arrays and I'm trying to compare both sets of arrays for number of objects and that the value from the key value pairs are correct. 我有两组对象，目前正在推送到两个不同的数组，并且我试图比较两组数组的对象数，并且键值对中的值正确。

 <!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>

I can successfully compare the lengths of both arrays, but I've tried using straight equality such as orderChart == userInput (which are the variable names of my arrays) but I keep getting a result of false. 我可以成功比较两个数组的长度，但是我尝试使用直等号，例如orderChart == userInput （这是我的数组的变量名称），但是我一直得到false的结果。 Any help is appreciated. 任何帮助表示赞赏。 Thanks! 谢谢！

Answer 1

If you try to compare objects, the result will be ALWAYS false. 如果尝试比较对象，则结果始终为假。 Even if the two have the same properties, the interpreter will always consider that they are two distinct objects, so.. 即使两者具有相同的属性，解释器也将始终认为它们是两个不同的对象，因此。

obj1 === obj2 = false.

You need create a function to compare the keys/values of both objects, but if you don't want waste your time, you can always use loadash #isEqual . 您需要创建一个函数来比较两个对象的键/值，但是如果您不想浪费时间，可以始终使用loadash #isEqual 。

Answer 2

What you're trying to perform is deep equality check. 您要执行的是深度相等性检查。 If you try to 'naively' comparare two objects only using '==' or '===', it will always return false (as objects in JS are passed by reference). 如果尝试仅使用“ ==”或“ ===”来“天真”地比较两个对象，则它将始终返回false（因为JS中的对象通过引用传递）。

This is actually a pretty interesting question per se as: 实际上，这实际上是一个非常有趣的问题，因为：

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

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

Anyway ... for checking if an object is equal to another you might want to investigate if the value of each field in the object is equal to the other ones. 无论如何...为了检查一个对象是否与另一个对象相等，您可能需要调查该对象中每个字段的值是否等于另一个。 A question that arises is: what about nested objects? 出现的一个问题是：嵌套对象呢？ You have to check that either (ie, use of recursion). 您必须检查两者之一（即使用递归）。

So, one possible solution is: 因此，一种可能的解决方案是：

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: we are dealing with non-objects, check for equality with '==='. 基本：我们正在处理非对象，请使用'==='检查是否相等。

recursive: not yet in non-objects, verify if the keys are equal (if not, the objects won't be equal). 递归：尚未在非对象中，请验证键是否相等（如果不相等，则对象将不相等）。 If they are, for each key, recursively do the check. 如果是，则对每个键进行递归检查。

edit: as mentioned, both lodash and underscore have an equivalent ::isEqual method (i'd go with lodash) 编辑：如前所述，lodash和下划线都具有等效的:: isEqual方法（我将与lodash一起使用）

ps.: this is NOT A TESTED SOLUTION. ps：这不是经过测试的解决方案。 It is just to illustrate a way of doing (you should go with lodash or other production ready solution) 只是为了说明一种实现方式（您应该使用lodash或其他可用于生产的解决方案）

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

问题描述

2 个解决方案

解决方案1
1

解决方案2
0 已采纳 2015-02-01 15:56:57

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

问题描述

2 个解决方案

解决方案1 1

解决方案2 0 已采纳 2015-02-01 15:56:57

解决方案1
1

解决方案2
0 已采纳 2015-02-01 15:56:57