比较两个 arrays 并基于具有不同对象的合并数组进行合并的问题

Question

Initially the array $scope.distinctCourseUsers will be empty, after every dynamic new response I would be appending all the objects to the previous list including new set of objects and then eliminating the duplicates of an array by using reduce method and storing back to $scope.distinctCourseUsers

$scope.courseUsers = response;
Array.prototype.push.apply($scope.distinctCourseUsers,response); 
distinctCourseUsers = result = $scope.distinctCourseUsers.reduce((unique, o) => {
    if(!unique.some(obj => obj.Id === o.Id )) {
    unique.push(o);
    }
    return unique;
},[]);

---

$scope.courseUsers = response;

For the I response two new array objects will be stored into $scope.courseUsers

console.log($scope.courseUsers);

(2) [{…}, {…}]
0: {Id: 22410, Name: "test01", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
1: {Id: 22411, Name: "test02", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}

Merging the empty $scope.distinctCourseUsers array with the response stored in $scope.courseUsers

Array.prototype.push.apply($scope.distinctCourseUsers,response); 
console.log($scope.distinctCourseUsers);

For the II response there will be two new objects, so appending previous Array List(2) + (New Array List(2) + Previous Array List(4)) Totally (2+2+4=6) to the $scope.distinctCourseUsers array list

(4) [{…}, {…}, {…}, {…}]
0: {Id: 22410, Name: "test01", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
1: {Id: 22411, Name: "test02", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
2: {Id: 22410, Name: "test01", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
3: {Id: 22411, Name: "test02", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
4: {Id: 22412, Name: "test03", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
5: {Id: 22413, Name: "test04", RoleType: "End user", IsEnrolled: false, EnrolledOn: "", …}

// The below reduce opertator will eliminate all the redundant objects
distinctCourseUsers = result = $scope.distinctCourseUsers.reduce((unique, o) => {
    if(!unique.some(obj => obj.Id === o.Id )) {
    unique.push(o);
    }
    return unique;
},[]);


console.log(distinctCourseUsers);

Actual & Expected Result:

0: {Id: 22410, Name: "test01", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
1: {Id: 22411, Name: "test02", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
2: {Id: 22412, Name: "test03", RoleType: "XL Teacher", IsEnrolled: false, EnrolledOn: "", …}
3: {Id: 22413, Name: "test04", RoleType: "End user", IsEnrolled: false, EnrolledOn: "", …}

---

The above approach is inefficient, due to performance overhead associated with appending previous list of objects. Is it possible to eliminate the duplicate at the first place mentioned in below code

Array.prototype.push.apply($scope.distinctCourseUsers,response); 

How would you reduce the code to make it efficient enough to get the above result?

Answer 1

Actually did a blog post on this recently , and it's dead simple. I have several options for you here, so make sure you get to the end.

You can use Array s and a Set to get unique items. Here's the basic idea using simple values.

const arr = [19,22,7,12,6,85];
const arr2 = [22,8,3,19,45];
const newArr = [...arr, ...arr2];
// newArr equals [19, 22, 7, 12, 6, 85, 22, 8, 3, 19, 45]
const uniqueArr =  = Array.from(new Set(newArr));
// uniqueArr equals [19, 22, 7, 12, 6, 85, 8, 3, 45]

It is important to remember that objects are by ref, so if you have two objects that look the same (structurally) that doesn't mean they are the 'same', so think about that when using a Set. However, if the objects were pushed to each array by ref, then this should still work for you. If object ref is in question (at all) then you might want an intermediary.

const intermediary = [...myTrueVar];
intermediary.push(myObj);
const keys = itermediary.map((it) => it.key));
const uniqueKeys = Array.from(new Set(keys));
myTrueVar = intermediary.filter((it) => uniqueKeys.includes(it.key))

Or, you could get really crazy

const intermediary = [...myTrueVar];
intermediary.push(myObj)
const stringed = intermediary.map((it) => JSON.stringify(it));
myTrueVar = Array.from(new Set(stringed)).map((it) => JSON.parse(it));

But that's probably overkill, and probably assumes the object keys are always in the same order, so the first bit intermediary is probably the better option (and probably less overhead).

Also remember that, while the Set constructor is supported by IE 11, Array.from is not (and deconstruction even less so), so if you're stuck in the past you'll need to transpile it down with Babel.

Or , you could just simply check your initial array for the item and conditionally add it when necessary. Probably the most performant, since your only adding one user at a time.

!$scope.distinctCourseUsers.find((user) => user.Id === response.Id) &&
  $scope.distinctCourseUsers.push(response)