web前端Javascript技术应用——JavaScript 利用差集写一个自己的对比小工具-职坐标

web前端Javascript技术应用——JavaScript 利用差集写一个自己的对比小工具

小职 2021-07-12 来源：阅读 412 评论 0

摘要：本文主要介绍了web前端Javascript技术应用——JavaScript 利用差集写一个自己的对比小工具，通过具体的内容向大家展现，希望对大家前端Javascript开发的学习有所帮助。

本文主要介绍了web前端Javascript技术应用——JavaScript 利用差集写一个自己的对比小工具，通过具体的内容向大家展现，希望对大家前端Javascript开发的学习有所帮助。

web前端Javascript技术应用——JavaScript 利用差集写一个自己的对比小工具

在工作中需要每周统计人员提交材料情况又不想一个一个复制黏贴查找只好写一个小工具帮自己查找谁没提交材料

先把页面搞一搞

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

textarea {

/* border: none; */

width: 49%;

height: 400px;

/* font-size: 17pt; */

}

#btn {

width: 100%;

height: 50px;

position: relative;

top: 0px;

/* position: absolute; */

}

#p2 {

margin-left: 940px;

margin-top: -38px;

}

</style>

</head>

<body>

<hr>

<p id="p2">已提交未在人名单</p>

</body>

</html>

web前端Javascript技术应用——JavaScript 利用差集写一个自己的对比小工具

有点丑，无所谓了自己用

开始写JS代码

<script

//先把输入框，按钮获取一下

let txt = document.querySelector('#txt')

let txt2 = document.querySelector('#txt2')

let txt3 = document.querySelector('#txt3')

let txt4 = document.querySelector('#txt4')

let btn = document.querySelector('#btn')

//然后写一个数组去重求差集

const getDifference = function (a, b) {

//解释：如果传入的两个函数是数组

if (a.constructor === Array && b.constructor === Array) {

let set1 = new Set(a);

let set2 = new Set(b);

// 利用Set去重，筛选找到差值

return Array.from(new Set([...set1].filter(x => !set2.has(x))));

}

return null;

}

//简简单单给按钮来一个点击事件吧

btn.onclick = function () {

//应提交人名单

let Should_sub = txt.value.split('\n')

//未提交人名单

let already_sub = txt2.value.split('\n')

let l3 = getDifference(Should_sub, already_sub)

//未在人名单中提交人数

let l4 = getDifference(already_sub, Should_sub)

//筛选好的值反馈给页面的两个输入框

txt3.value = l3.join('\n')

txt4.value = l4.join('\n')

}

</script>

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评

web前端Javascript技术应用——JavaScript 利用差集写一个自己的对比小工具

javascript案例 javascript编程精解pdf javascript编程实例

本文由 @小职发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

JavaScript30天热搜词更多>>