3
votes

Comment comparer deux tableaux et renvoyer la différence? (Travailler dans les deux sens?)

Je cherche donc à réaliser cela dans la vanille, ES6 JS. Veuillez pas de jQuery! (Lodash est acceptable!)

En gros, j'ai 2 tableaux, 1 qui contient des objets et 1 qui contient des identifiants.

const old = [
  {
    id: 1,
    name: 'object_1',
  },
  {
    id: 2,
    name: 'object_2',
  },
];

const newIds = [1, 2, 3];

Ma solution actuelle à ce problème est la suivante ;

const difference = newIds.filter (n =>! old.some (o => o.id === n));

Cela se traduit par le retour [3 .

En gros, j'utilise actuellement ceci pour déterminer si quelque chose manque, et le créer dans ma base de données s'il manque. p>

Cependant, je dois alors faire le contraire. Si quelque chose est supprimé, je dois comparer et supprimer l'élément.

Le problème avec ceci est; Cette solution actuelle ne fonctionne que "1 manière", donc je ne peux pas faire ce que j'ai indiqué ci-dessus.

Idéalement, je ne veux qu'une seule instruction, qu'il s'agisse de création ou de suppression, et je veux seulement qu'elle renvoie les identifiants de des éléments manquants dans l'un ou l'autre des tableaux.

J'espère que cela a du sens.

javascript lodash

3 commentaires

Puisque vous avez écrit "Lodash est acceptable" , ajoutez la balise lodash dans votre question: de cette façon , la question s'affichera pour les utilisateurs qui suivent (ou "regardent") ce tag.

si vous ne voulez pas construire une logique complexe, vous pouvez facilement trouver la différence de tableau en utilisant la bibliothèque lodash js

@SanjaysinhZala Peut-être un exemple? J'ai essayé d'utiliser la méthode de différence Lodash mais ne fonctionnait pas comme je le voulais.

7 Réponses :

0
votes

Vous pouvez utiliser la fonction xor de lodash pour obtenir ceci. Avant cela, vous pouvez collecter tous les identifiants du old tableau et utiliser ce tableau ids pour xor .

Vérifiez ceci.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

const { xor } = _;
const old = [
  {
    id: 1,
    name: 'object_1',
  },
  {
    id: 2,
    name: 'object_2',
  },
  {
    id: 4,
    name: 'object_4',
  },
];

const newIds = [1, 2, 3];
const oldIds = old.map(o => o.id)
const diff = xor(newIds, oldIds);
console.log(diff)

0 commentaires

3
votes

Pour trouver les valeurs qui apparaissent dans l'une mais pas dans l'autre, utilisez

> const _ = require('lodash');

> const old = [
...   { id: 1, name: 'object_1' },
...   { id: 2, name: 'object_2' },
...   { id: 3, name: 'object_3' },
...   { id: 4, name: 'object_4' },
... ];

> const newIds = [1, 3, 5, 7];

> _.xor(old.map(x => x.id), newIds)
[ 2, 4, 5, 7 ]

Dans votre cas:

_.xor(array1, array2);

0 commentaires

0
votes

J'espère que cela vous aidera. Je sais que ce n'est pas vraiment ce que vous voulez, mais cela peut être une solution.

const old = [
  {
    id: 1,
    name: 'object_1',
  },
  {
    id: 2,
    name: 'object_2',
  },
  {
    id: 4,
    name: 'object_2',
  },
];

const newIds = [1, 2, 3];

var x1 = old.filter(x => !newIds.includes(x.id)).map(z => z.id)
             .concat(newIds.filter(x => !old.some(y => y.id === x)));
console.log(x1);

0 commentaires

0
votes

Voici la solution utilisant ES6:

const old = [
  {
    id: 1,
    name: 'object_1',
  },
  {
    id: 2,
    name: 'object_2',
  },
  {
    id: 4,
    name: 'object_2',
  },
];

const newIds = [1, 2, 3];
const oldIds = old.map(o => o.id)

const difference = [...newIds.filter(id => oldIds.indexOf(id) === -1), ...oldIds.filter(id => newIds.indexOf(id) === -1)]

console.log(difference)

0 commentaires

0
votes

Vous pouvez utiliser _.get avec une valeur par défaut comme itération pour _.differenceBy afin que le tableau d'objets ou le tableau de nombres puisse être sur le côté gauche.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

const old = [
  {
    id: 1,
    name: 'object_1',
  },
  {
    id: 2,
    name: 'object_2',
  },
];

const newIds = [1, 2, 3];

const diff = (a,b) => _.differenceBy(a, b, v => _.get(v, 'id', v))
console.log({ remove: diff(old, newIds), add: diff(newIds, old) })

const otherNewIds = [1];
console.log({ remove: diff(old, otherNewIds), add: diff(otherNewIds, old) })

0 commentaires

1
votes

Nous pouvons faire la même chose dans vanilla es6 en utilisant Array # filter et Array # includes .

Ici, j'ai mappé l'ancien tableau uniquement sur un tableau d'identifiants en utilisant Array # map puis en utilisant le filtre et inclut sur les deux tableaux, j'ai découvert la différence symétrique entre eux.

const old = [
  {
    id: 1,
    name: 'object_1',
  },
  {
    id: 2,
    name: 'object_2',
  },
];
const newIds = [2, 3];
const oldIds =  old.map(({id}) => id);

console.log(getDifference(oldIds, newIds));

function getDifference(oldIds, newIds){
  return [...oldIds, ...newIds].reduce((acc, ele) => {
  if(!acc.includes(ele)){
     acc.push(ele);
  }else{
    acc.splice(acc.findIndex(e=> ele === e), 1);
  }
  return acc;
  },[]);
}

Nous pouvons le faire d'une autre manière en utilisant Array # Reduce et Array # findIndex . Simplement réduire les deux tableaux et renvoyer les éléments qui ne sont pas répétés plus d'une fois nous donneront la différence symétrique des deux tableaux.

const old = [
  {
    id: 1,
    name: 'object_1',
  },
  {
    id: 2,
    name: 'object_2',
  },
];
const newIds = [2, 3];
const oldIds =  old.map(({id}) => id);

console.log(getDifference(oldIds, newIds));

function getDifference(oldIds, newIds){
  const diff = [...oldIds.filter(id => !newIds.includes(id)), ...newIds.filter(id => !oldIds.includes(id))];
  return diff;
}

0 commentaires

0
votes

Le code suivant trouvera la différence en utilisant lodash:

const difference = _.difference(newIds, _.map(old, 'id'));

0 commentaires