ES6 Set集合操作在输入框内输入两个整数序列，点击按钮输出序列的交集、差、并集

最新推荐文章于 2024-09-13 20:30:04 发布

Rtwo

最新推荐文章于 2024-09-13 20:30:04 发布

阅读量232

点赞数

分类专栏： es6 文章标签： es6

本文链接：https://blog.csdn.net/qq_39146072/article/details/105490044

版权

es6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ES6 Set 学习

菜鸟教程：https://www.runoob.com/w3cnote/es6-map-set.html

实践

1. 题目
实现在输入框内输入两个整数序列，点击按钮输出序列的交集、差、并集。如，
输入：
1 2 3
4 3 2
输出：
并集： 1， 2， 3， 4
交集： 2， 3
差集： 1

2. 思考
界面：两个input输入框，一个提交按钮
逻辑：

输入框内输入的是字符串，可以使用split()方法，将字符串以空格分开，然后保存到一个Set集合里。
并集、交集、差集方法
var union = new Set([…set1, …set2]);
var intersect = new Set([…set1].filter(x => set2.has(x)));
var difference = new Set([…set1].filter(x => !set2.has(x)));

3.实现

主要是获取到输入框中的数据，然后用split方法拆分，存入Set中，经过并集、交集和差集的操作后，将结果输出。
代码没有什么注释，因为比较容易看懂。

<!DOCTYPE html>
<html>

<head> 
  <meta charset="utf-8"> 
  <title>SET</title> 
</head>

<body>
  <script>
    function myFunction() {
      var s1 = document.getElementById("line1").value;
      var s2 = document.getElementById("line2").value;
      var sp1 = s1.split(' ');
      var sp2 = s2.split(' ');
      var set1 = new Set(sp1);
      var set2 = new Set(sp2);
      var union = new Set([...set1, ...set2]);
      var intersect = new Set([...set1].filter(x => set2.has(x)));
      var difference = new Set([...set1].filter(x => !set2.has(x)));
      var strUnion = "并集：";
      union.forEach(element => {
        strUnion += element + ' ';
      });
      var strIntersect = "交集：";
      intersect.forEach(element => {
        strIntersect += element + ' ';
      });
      var strDifference = "差集：";
      difference.forEach(element => {
        strDifference += element + ' ';
      });
      document.getElementById("union").innerHTML = strUnion;
      document.getElementById("intersect").innerHTML = strIntersect;
      document.getElementById("difference").innerHTML = strDifference;
    }
  </script>
  <div style="align-content: center;">
    <b>输入：</b><br />
    <input style="margin-top: 10px;" type="text" id="line1"><br />
    <input style="margin-top: 10px;" type="text" id="line2"><br />
    <input type="submit" onclick="myFunction()" value="计算"
      style="margin-top: 10px;margin-left: 60px;margin-bottom: 10px;"><br />
    <b>输出：</b><br />
    <a style="margin-top: 10px;" id="union"></a><br />
    <a style="margin-top: 10px;" id="intersect"></a><br />
    <a style="margin-top: 10px;" id="difference"></a><br />
  </div>
</body>

</html>