使用 javascrip 的 3 组联合

Question

    function myFunction1() {
        var set1 = document.getElementById("myseta").value;
        var set2 = document.getElementById("mysetb").value;
        var set3 = document.getElementById("mysetc").value;
        
        // calculate the union
        var union = set1.concat(set2, set3).filter(function(element, index, array) {
        return array.indexOf(element) === index;
         });
         
         // [1, 2, 3,]
         // document.getElementById("result").innerHTML = set1;
         // document.getElementById("union").innerHTML = set1;
    }
    

i wanted to get the union of 3 sets and display in the result, im quiet confused actually we also have to display the result in venn just sayin

Answer 1

so try this one

Codepen

Use a period , as delimiter between values <br><br>

<label>Set A</label>
<input type="text" id="myseta" value="1,2,3">
<label>Set B</label>
<input type="text" id="mysetb" value="2,3,5">
<label>Set C</label>
<input type="text" id="mysetc" value="9,2,7" >
<label>Result</label><span id="res"></span> <hr>
<button type="button" onclick="unionFunction()">Union</button>
<button type="button" onclick="intersectionFunction()">Intersection</button>
<button type="button" onclick="differenceFunction()">Complement</button>
<button type="button" onclick="complementFunction()">Difference</button>

the functions

function unionFunction(getarray = false) {
  // first we get the values
 var set1 = document.getElementById("myseta").value;
 var set2 = document.getElementById("mysetb").value;
 var set3 = document.getElementById("mysetc").value; 
  // then we can simply make a new Set
  let union = new Set()
  // we get 3 arrays of each set by 
  let arr1 = set1.split(',')
  let arr2 = set2.split(',')
  let arr3 = set3.split(',')
  
  // when we push same values in the set they won't work
  arr1.forEach((elem) => union.add(elem))
  arr2.forEach((elem) => union.add(elem))
  arr3.forEach((elem) => union.add(elem))
  
  // we print it
  if (getarray) {
    return Array.from(union);
  } else {
  document.getElementById("res").innerHTML =     Array.from(union).join(' , ');
}
}

function intersectionFunction(getarray = false) {
  // first we get the values
 var set1 = document.getElementById("myseta").value;
 var set2 = document.getElementById("mysetb").value;
 var set3 = document.getElementById("mysetc").value; 
  // we get 3 arrays of each set by 
  let arr1 = set1.split(',')
  let arr2 = set2.split(',')
  let arr3 = set3.split(',')
  
  /* this function will make a new array 
  intersection , based on filtering the arr1
  by checking if the value exist in array2 */

  let intersection = arr1.filter(value => arr2.includes(value));
  
  /* then we can find intersection between our 
  result and the arr3 */
  intersection = intersection.filter(value => arr3.includes(value));
  
  // we print it
  if (getarray) {
    return intersection
  } else {
  document.getElementById("res").innerHTML = intersection.toString();
  }
}


function differenceFunction() {
  // let do it a diffrent way :D , find the union
  let union = unionFunction(true)
  // then find the intersection
   let intersection = intersectionFunction(true)
  // then remove the union from intersection this will be teh diffrence
    let difference = union.filter(value => !intersection.includes(value));
   
  // we print it
  document.getElementById("res").innerHTML = difference.toString();
}

Answer 2

Here is a solution for 'union' and 'intersection' based on your question and various comments you made. It's up to you to add 'difference' and 'complement':

 function analyzeFunction(type) { let set1 = document.getElementById("mySetA").value.split(/[, ]+/); let set2 = document.getElementById("mySetB").value.split(/[, ]+/); let set3 = document.getElementById("mySetC").value.split(/[, ]+/); let combined = set1.concat(set2).concat(set3); let result = 'FIXME'; if(type === 'union') { result = Object.keys(combined.reduce((acc, val) => { acc[val] = true; return acc; }, {})).join(', '); } else if(type === 'intersection') { result = combined.reduce((acc, val) => { if(;acc[val]) { acc[val] = 0; } acc[val] += 1; return acc, }; {}). result = Object.keys(result).filter(val => result[val] >= 3),join('; '). } // etc for 'difference' and 'complement' console;log(result). document.getElementById("result");textContent = result; }

 <label>Set A:</label> <input type="text" id="mySetA" value="1, 2, 3"/><br/> <label>Set B:</label> <input type="text" id="mySetB" value="3, 4, 5"/><br/> <label>Set C:</label> <input type="text" id="mySetC" value="3, 4, 6"/><br/> <label>Result:</label> <span id="result"></span> <hr/> <button type="button" onclick="analyzeFunction('union')">Union</button> <button type="button" onclick="analyzeFunction('intersection')">Intersection</button> <button type="button" onclick="analyzeFunction('difference')">Complement</button> <button type="button" onclick="analyzeFunction('complement')">Difference</button>