Diferencia simétrica de arrays mapeados

JavaScriptJavaScriptBeginner
Practicar Ahora

This tutorial is from open-source community. Access the source code

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, profundizaremos en el concepto de diferencia simétrica y cómo se puede implementar en JavaScript utilizando la función symmetricDifferenceBy(). Exploraremos cómo esta función se puede utilizar para encontrar los valores únicos entre dos arrays después de aplicar una función proporcionada a cada elemento de ambos arrays. Este laboratorio está diseñado para ayudarte a comprender mejor este poderoso método de JavaScript y cómo se puede utilizar en tus propios proyectos.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28487{{"Diferencia simétrica de arrays mapeados"}} javascript/data_types -.-> lab-28487{{"Diferencia simétrica de arrays mapeados"}} javascript/arith_ops -.-> lab-28487{{"Diferencia simétrica de arrays mapeados"}} javascript/comp_ops -.-> lab-28487{{"Diferencia simétrica de arrays mapeados"}} javascript/higher_funcs -.-> lab-28487{{"Diferencia simétrica de arrays mapeados"}} javascript/destr_assign -.-> lab-28487{{"Diferencia simétrica de arrays mapeados"}} javascript/spread_rest -.-> lab-28487{{"Diferencia simétrica de arrays mapeados"}} end

Diferencia simétrica de arrays mapeados

Para comenzar a codificar, abre la Terminal/SSH y escribe node.

Esta función devuelve la diferencia simétrica entre dos arrays, después de aplicar la función proporcionada a cada elemento de ambos arrays. Aquí cómo funciona:

  • Crea un Set a partir de cada array para obtener los valores únicos de cada uno después de aplicar fn a ellos.
  • Utiliza Array.prototype.filter() en cada uno de ellos para conservar solo los valores no contenidos en el otro.

Aquí está el código de la función symmetricDifferenceBy:

const symmetricDifferenceBy = (a, b, fn) => {
  const sA = new Set(a.map((v) => fn(v))),
    sB = new Set(b.map((v) => fn(v)));
  return [
    ...a.filter((x) => !sB.has(fn(x))),
    ...b.filter((x) => !sA.has(fn(x)))
  ];
};

Puedes utilizar symmetricDifferenceBy de la siguiente manera:

symmetricDifferenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [ 1.2, 3.4 ]
symmetricDifferenceBy(
  [{ id: 1 }, { id: 2 }, { id: 3 }],
  [{ id: 1 }, { id: 2 }, { id: 4 }],
  (i) => i.id
);
// [{ id: 3 }, { id: 4 }]

Resumen

¡Felicidades! Has completado el laboratorio de Diferencia simétrica de arrays mapeados. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.