javascript - ES5 filter inside filter - Stack Overflow

admin管理员组

文章数量:1305379

How is this working? I am having a hard time understand this.

const arr1 = [{"id":1,"name":"jhon"},{"id":2,"name":"max"},{"id":3,"name":"fer"}];
    
const arr2 = [8, 9];
var diffArray = arr2.filter(x => !arr1.filter(y => y.id === x).length);
console.log(diffArray);

How is this working? I am having a hard time understand this.

const arr1 = [{"id":1,"name":"jhon"},{"id":2,"name":"max"},{"id":3,"name":"fer"}];
    
const arr2 = [8, 9];
var diffArray = arr2.filter(x => !arr1.filter(y => y.id === x).length);
console.log(diffArray);

• javascript

Share Improve this question Follow edited Sep 1, 2021 at 20:26 nCardot 6,59588 gold badges5656 silver badges9999 bronze badges asked Apr 6, 2018 at 17:26 Rohan SinghRohan Singh 9111 gold badge11 silver badge88 bronze badges 9

• 1 It is just checking if 8 and 9 are not present as id key in arr1, if not then it returns those array values. If you change any of the object's id to 8, you will see that only 9 is returned then and vice-versa. – palaѕн Commented Apr 6, 2018 at 17:32
• 1 !arr1.filter(y => y.id === x).length -> !arr1.some(y => y.id === x) would be more efficient as it terminates iteration of the array after the first successful match. – Patrick Roberts Commented Apr 6, 2018 at 17:33
• what is length doing?@palaѕн – Rohan Singh Commented Apr 6, 2018 at 17:33
• 1 Just FYI, it's poor code. The inner filter should be !arr1.some(y => y.id === x) or arr1.every(y => y.id !== x) so it stops as soon as it knows the answer. – T.J. Crowder Commented Apr 6, 2018 at 17:34
• This is an answer from this post stackoverflow./questions/49697279/… – Eddie Commented Apr 6, 2018 at 17:35

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 4

Simplified,

const arr1 = [{
  "id": 1,
  "name": "jhon"
}, {
  "id": 2,
  "name": "max"
}, {
  "id": 3,
  "name": "fer"
}];

const arr2 = [8, 9];

var diffArray = arr2.filter(x => {
  let elementsOfArray2PresentInArray1 = arr1.filter(y => {
    return y.id === x
  });

  if (elementsOfArray2PresentInArray1.length > 0) {
    return false
  } else {
    return true;
  }
  //`return !length;` will  return false if length > 0
});

console.log(diffArray)

From MDN The filter() method creates a new array with all elements that pass the test implemented by the provided function. Code x => some_code is called an arrow function and can be translated to: function(x) {return some_code} Basically what is done here is that arr2.filter() will return all elements of said arr2 that pass the condition. Condition here is, that the length of "filtered" arr1 must be zero (meaning, that the match was not found). Length of array as numerical value can be used as true/false and can be negated with !. That's whats going on here:

arr1.filter(y => y.id === x)          // means, give me elements of arr1, that are the same as in array 2
arr1.filter(y => y.id === x).length   // means, the length of said array of elements
!arr1.filter(y => y.id === x).length  // means, if length == 0 make it true and if more than 0 -> make it false

Or even shorter ;)

let diffArray = arr2.filter(x => arr1.filter(y => y.id === x).length > 0 ? false : true)

本文标签： javascriptES5 filter inside filterStack Overflow