javascript - 导致错误的数组元素顺序

Question

我有两个数组。每个数组的元素如下所示:

allLabBranches = [{
  "labbranchid": "1",
  "labname": "Wahab Labs, Islampura Branch, Lahore",
  "labtitle": "Wahab Labs Lahore",
  "shortname": "WAHB",
  "address": "56 Islampura, Lahore",
  "landlineno": "04237940445",
  "datecreated": "2016-03-11 11:00:00",
  "createdbyname": "Jamshaid Sabir",
  "createdbyuserid": "1",
  "dateupdated": "2016-05-04 00:53:03",
  "updatedbyname": "Jamshaid Sabir",
  "updatedbyuserid": "1",
  "clientgroups_clientgroupsid": "1",
  "startdate": "2016-05-04"
}, {
  "labbranchid": "2",
  "labname": "Wahab Labs, Model Town Branch, Lahore",
  "labtitle": "Wahab Labs Lahore",
  "shortname": "WAHAB",
  "address": "45 Model Town, Lahore",
  "landlineno": "04237945485",
  "datecreated": "2016-03-11 11:00:00",
  "createdbyname": "Jamshaid Sabir",
  "createdbyuserid": "1",
  "dateupdated": "0000-00-00 00:00:00",
  "updatedbyname": "",
  "updatedbyuserid": "",
  "clientgroups_clientgroupsid": "1",
  "startdate": "0000-00-00"
}, {
  "labbranchid": "3",
  "labname": "Shahdara More Branch",
  "labtitle": "Wahab Labs Lahore",
  "shortname": "WAHAB",
  "address": "Shahdara",
  "landlineno": "04237933415",
  "datecreated": "2016-03-11 11:48:15",
  "createdbyname": "Jamshaid Sabir",
  "createdbyuserid": "1",
  "dateupdated": "0000-00-00 00:00:00",
  "updatedbyname": "",
  "updatedbyuserid": "",
  "clientgroups_clientgroupsid": "1",
  "startdate": "0000-00-00"
}, {
  "labbranchid": "4",
  "labname": "New Branch",
  "labtitle": "Wahab Labs Lahore",
  "shortname": "WAHB",
  "address": "More Samanabad, Lahore",
  "landlineno": "042361561",
  "datecreated": "2016-03-11 11:52:06",
  "createdbyname": "Jamshaid Sabir",
  "createdbyuserid": "1",
  "dateupdated": "2016-03-14 15:06:44",
  "updatedbyname": "Jamshaid Sabir",
  "updatedbyuserid": "1",
  "clientgroups_clientgroupsid": "1",
  "startdate": "2016-03-14"
}, {
  "labbranchid": "5",
  "labname": "Test Branch",
  "labtitle": "xyz",
  "shortname": "sfwe",
  "address": "dsfasd",
  "landlineno": "sdfasd",
  "datecreated": "2016-03-12 00:14:11",
  "createdbyname": "Jamshaid Sabir",
  "createdbyuserid": "1",
  "dateupdated": "2016-08-11 12:54:12",
  "updatedbyname": "Jamshaid Sabir",
  "updatedbyuserid": "1",
  "clientgroups_clientgroupsid": "1",
  "startdate": "2016-03-12"
}, {
  "labbranchid": "6",
  "labname": "Test Branch 2",
  "labtitle": "asdfs",
  "shortname": "asdfs",
  "address": "asdf",
  "landlineno": "asdf",
  "datecreated": "2016-03-12 12:16:24",
  "createdbyname": "Jamshaid Sabir",
  "createdbyuserid": "1",
  "dateupdated": "0000-00-00 00:00:00",
  "updatedbyname": "",
  "updatedbyuserid": "",
  "clientgroups_clientgroupsid": "1",
  "startdate": "2016-03-12"
}, {
  "labbranchid": "7",
  "labname": "Wahab Labs, Shahdara Branch, Lahore",
  "labtitle": "Shahdara",
  "shortname": "Shahdara",
  "address": "Shahdara",
  "landlineno": "0423744915",
  "datecreated": "2016-08-11 12:56:27",
  "createdbyname": "Jamshaid Sabir",
  "createdbyuserid": "1",
  "dateupdated": "2016-08-11 12:57:01",
  "updatedbyname": "Jamshaid Sabir",
  "updatedbyuserid": "1",
  "clientgroups_clientgroupsid": "1",
  "startdate": "2016-08-01"
}]

另一个数组元素是:

labsOfUser = [{
  "userhasbranchid": "53",
  "labbranches_labbranchid": "6",
  "usersoflabs_userId": "9"
}, {
  "userhasbranchid": "54",
  "labbranches_labbranchid": "1",
  "usersoflabs_userId": "9"
}, {
  "userhasbranchid": "55",
  "labbranches_labbranchid": "7",
  "usersoflabs_userId": "9"
}, {
  "userhasbranchid": "56",
  "labbranches_labbranchid": "2",
  "usersoflabs_userId": "9"
}]

现在我有一个多选框，并且我显示一些分支为选定的，一些分支为未选择的。代码如下:

function populateSelectedLabs() {

    $('#labbranchids').empty();
    if (allLabBranches.length >= labsOfUser.length) {
      for (var i = 0; i < allLabBranches.length; i++) {
        for (var j = 0; j < labsOfUser.length; j++) {
          if (allLabBranches[i].labbranchid == labsOfUser[j].labbranches_labbranchid) {

            $("#labbranchids").append("<option selected='selected' value='" + allLabBranches[i].labbranchid + "'>" + allLabBranches[i].labname + "</option>");
            allLabBranches = jQuery.grep(allLabBranches, function(value) {
              return value != allLabBranches[i];
            });
          } //end inner if        

        } //end inner loop
      } //end outer loop
    } //end if
    for (var i = 0; i < allLabBranches.length; i++) {
      $("#labbranchids").append("<option  value='" + allLabBranches[i].labbranchid + "'>" + allLabBranches[i].labname + "</option>");
    } //end for loop


  } //end function

问题是数组元素比较错过了数组中存在但位于数组中不同索引的元素。错误发生在以下代码行:

if(allLabBranches[i].labbranchid == labsOfUser[j].labbranches_labbranchid){

请帮助我知道如何比较两个数组中的所有元素？

Answer 1

某些项目不匹配的原因是您在同一数组的循环内重新定义了 allLabBranches ，使其更短。

假设在更改之前以下内容为真:

labsOfUser[j-1].labbranches_labbranchid == allLabBranches[i+1].labbranchid

您希望稍后在外循环的下一次迭代中检测到这种相等性。但由于重新分配给 allLabBranches，该值不再位于索引 i+1 处，而是位于 i 处。在内部循环的剩余部分中，该值将不再匹配(因为匹配值位于j-1)，因此i将在下一次迭代中递增的外循环。因此，该值永远不会匹配。

您可以通过向后迭代 allLabBranches 数组来解决此问题，但更好的方法是使用 labsOfUser 数组中的值创建一个哈希。这样会有更好的性能。

你可以这样做:

function populateSelectedLabs() {
    $('#labbranchids').empty();
    // create hash
    var hash = {};
    for (var j = 0; j < labsOfUser.length; j++) {
        hash[labsOfUser[j].labbranches_labbranchid] = 1;
    }
    allLabBranches = jQuery.grep(allLabBranches, function(value) {
        return hash[value.labbranchid];
    }).concat(jQuery.grep(allLabBranches, function(value) {
        return !hash[value.labbranchid];
    }));

    for (var i = 0; i < allLabBranches.length; i++) {
        $("#labbranchids").append($('<option>')
            .val(allLabBranches[i].labbranchid)
            .text(allLabBranches[i].labname)
            .attr('selected', hash[allLabBranches[i].labbranchid]));
    }
}

如果目标浏览器支持ES6，那么你可以这样写:

function populateSelectedLabs() {
    $('#labbranchids').empty();
    var hash = new Set(labsOfUser.map( value => value.labbranches_labbranchid ));
    allLabBranches.filter( value =>  hash.has(value.labbranchid) )
        .concat(allLabBranches.filter( value => !hash.has(value.labbranchid) ))
        .forEach( value =>
            $("#labbranchids").append($('<option>')
                .val(value.labbranchid)
                .text(value.labname)
                .attr('selected', hash.has(value.labbranchid)))
        );
}