Как работает этот код, чтобы найти разницу между двумя массивами объектов?

Question

Я проверил этот код из ответа SO, в основном он возвращает только те элементы, которые существуют в массиве 1, но не существует в массиве 2. Но я не могу понять, как это работает, может кто-нибудь объяснить мне?

const arrayOne = [ 
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "Jamsheer" },
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "Muhammed" },
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "Ravi" },
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "Ajmal" },
  { value: "a63a6f77-c637-454e-abf2-dfb9b543af6c", display: "Ryan" },
];

const arrayTwo = [
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "Jamsheer"},
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "Muhammed"},
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "Ravi"},
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "Ajmal"},
];

const results = arrayOne.filter(({ value: id1 }) => !arrayTwo.some(({ value: id2 }) => id2 === id1));

console.log(results);

Я думаю, { value: id1 } - это деструктурирующее назначение, но, похоже, меняются ключ и значение ??? И какое отношение к id2 === id1?

Answer 1

Я бы сказал, что лучший способ понять это - сделать рефакторинг с использованием какой-нибудь старой школы JS:

const results = arrayOne.filter(objectOne => {
  return !arrayTwo.some(objectTwo => {
    return objectOne.value === objectTwo.value;
  })
});

Здесь я не использовал деструктуризацию объектов и не использовал ключевое слово return , это сделало вещи немного яснее.

Answer 2

1. { value: id1 } Назначение свойства переменной с другим именем.

Например:

({ a:id, b } = { a: 10, b: 20 });
console.log(id); // 10
console.log(a); // "Uncaught ReferenceError: a is not defined"

2. После присвоения value id1 & id2 теперь мы можем проверить id1 в arrayOne и id2 в arrayTwo

const arrayOne = [ 
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "Jamsheer" },
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "Muhammed" },
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "Ravi" },
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "Ajmal" },
  { value: "a63a6f77-c637-454e-abf2-dfb9b543af6c", display: "Ryan" },
];

const arrayTwo = [
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "Jamsheer"},
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "Muhammed"},
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "Ravi"},
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "Ajmal"},
];

const results = arrayOne.filter(
                        ({ value : id1  }) => !arrayTwo.some(
                                            ({ value: id2 }) => id2 === id1)
                );
console.log(results);

То же решение

const results = arrayOne.filter(
                        item1 => !arrayTwo.some( item2 => item1.value === item2.value)
                );
console.log(results);

const arrayOne = [ 
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "Jamsheer" },
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "Muhammed" },
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "Ravi" },
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "Ajmal" },
  { value: "a63a6f77-c637-454e-abf2-dfb9b543af6c", display: "Ryan" },
];

const arrayTwo = [
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "Jamsheer"},
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "Muhammed"},
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "Ravi"},
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "Ajmal"},
];

// The same solution
const results = arrayOne.filter(
                        item1 => !arrayTwo.some( item2 => item1.value === item2.value)
                );
console.log(results);