JavaScript函数Array.prototype.includes（）在for循环中不起作用

Question

I have a web app that tracks your purchases and displays different statistics. In one of the pages I have jQuery ajax requests that load a user's purchases from an API call. Then all the purchases are put into a global array, called G_PURCHASES , as JavaScript objects.

So far so good. Then I call a function that uses jQuery's Deferred() to make it chainable; it iterates G_PURCHASES and gets all distinct purchase.item.category 's (take a look at the purchase object's relevant structure) by checking if G_PURCHASES[i].item.category is included in another global array called G_CATEGORIES by using Array.includes() . And if it is not then push() it into G_CATEGORIES .

The error I have a problem with is that even after a category object has been pushed into the G_CATEGORIES array, the Array.includes() check still returns false , every time. Check the relevant code and output to clear it up.

// Relevant structure of the purchase object
purchase = {
  item: {
    category: {
      categoryID: int,
      name: string
    }
}

// Relevant code

var G_PURCHASES = []; // array declared globally
// it is successfully filled with @purchase objects from another function

var G_CATEGORIES = []; // array declared globally
// to be filled by @LoadAllCategories

var LoadAllCategories = function() {

  // make a jQuery Deffered
  let func = $.Deferred(function() {

    let allP = G_PURCHASES; // make a shortcut
    let allC = C_CATEGORIES; // make another shortcut
    for (var i = 0; i < allP.length; i++) {

      // get whether the current purchase.item.category
      // already exists in allC array
      let exist = allC.includes(allP[i].item.category);

      // console.log the above result
      console.log('i = ' + i + ', category exists = ' + exist);

      // if it doesn't exist then push it in
      if (!exist) allC.push(allP[i].item.category);
    }

    this.resolve();

  });

  return func;
}

// Input
G_PURCHASES has 6 @purchase objects with 3 unique item.category 'ies

// Output
i = 0, category exists = false
i = 1, category exists = false
i = 2, category exists = false
i = 3, category exists = false
i = 4, category exists = false
i = 5, category exists = false

// Result
G_CATEGORIES contains duplicate categories

I tried to use Array.indexOf() and jQuery's $.inArray() with no success. No matter what I console.log() I can't seem to find where the error lies. So, if you can tell me why does Array.includes() doesn't work inside this for loop I will find you and I will buy you a beer!

Answer 1

Well includes checks for referential equality, so there might be two objects with same properties and values, but still they are different objects, thus their reference is not equal. You probably want to check every category object for their categoryID and name manually to find duplicates.