4：Javascript入门与进阶

难度系数：有一点挑战

前面的题目中，我们已经认识了 HTML 和 CSS。现在，终于轮到 JavaScript 登场了！

JavaScript 可以处理数据、响应用户操作，也可以把处理后的结果展示到页面中。相比单纯记住语法，我们更希望你通过这道题体会：拿到一份数据后，应该怎样读懂它、整理它，并验证自己的结果。

这道题不要求你掌握复杂的面向对象语法。你只需要使用基础的函数、数组、循环和条件判断，再认识一个很适合“去重”的数据结构——Set。

在完成题目之前，你需要认真学习有关Js的核心语法和ES6/ES7语法规范（即ECMAScript，JavaScript的标准化版本，引入了许多新特性，使JS更加强大和现代化）。在这个过程中，你不得不花上1-2周时间提前学习有关js的语法和规范，对于前端的学习来说，基础是一切，框架变了又变、语法糖一新再新的当下，没有什么比打好基础更重要。

• 作用域
• 闭包
• 原型链
• 异步编程

• 变量声明的变化
• 某些数据结构（什么是对象？）
• 箭头函数
• 模板字符串
• 解构赋值
• 模块化开发（了解）

3.进阶：DOM和BOM操作方法

初步学习后可以去了解一下jQuery，作为一个dom操作库还是很优秀的，简单易上手，而且可以学到很多常见的dom操作方法。

推荐教程：

• Javascript | 菜鸟教程

• Array | MDN

• Set | MDN

推荐视频教程：

• JS基础语法教程（包含ES6和ES7的特性）| bilibili 峰华工程师
• ES6规范 零基础入门 | bilibili 蔡蔡小趴菜

在完成上述任务之后，相信你对前端的js部分已经有了初步的认识与了解，试着完成以下题目吧！

微光工作室最近准备启动一个新项目。前端工程师、后端工程师、UI 设计师、产品经理和测试工程师都列出了自己的任务清单。

但当所有任务放在一起后，新的问题出现了：

• 哪些任务可以由某位成员独立完成？
• 哪些任务需要多位成员一起配合？
• 整个项目一共有多少项不同的任务？

小霜本来想靠肉眼一点点核对，看到一半就开始怀疑人生。于是，他决定把这件事交给 JavaScript。

下载并打开本题项目，目录结构如下：

T4-work-coordination/
├── css/
│   └── style.css
├── js/
│   ├── index.js
│   └── task-utils.js
└── index.html

本题文件点此下载

其中：

• index.html 是主页面；
• css/style.css 负责页面样式，本题不需要修改；
• js/index.js 保存项目成员数据，并负责把结果展示到页面中；
• js/task-utils.js 是本题需要补充的文件。

直接打开 index.html 时，页面中的任务结果可能为空，为什么呢？

先打开 js/index.js 看一看：一个成员的数据包含哪些内容？tasks 中保存的又是什么？

开始实战前，可以先在浏览器控制台中尝试：

const fruits = new Set(['apple', 'banana', 'apple']);
fruits.add('orange');

console.log(fruits);
console.log(fruits.has('banana'));
console.log(fruits.has('pear'));

试着观察：

1. 为什么两个 apple 只保留了一个？
2. add() 做了什么？
3. has() 返回的是什么？
4. Set 能不能使用 for...of 遍历？

请打开 js/task-utils.js，补全其中三个标有 TODO 的普通函数。

目标一：找出差异任务

补全：

function difference(a, b)

它接收两个任务数组 a 和 b，返回出现在 a 中，但没有出现在 b 中的任务。

例如：

const a = ['页面开发', '接口联调', '页面走查'];
const b = ['接口联调', '需求评审'];

difference(a, b);
// 应返回：['页面开发', '页面走查']

想一想：为什么不建议直接修改参数 a？

目标二：找出共同任务

补全：

function intersection(taskLists)

taskLists 是一个“数组组成的数组”，其中每一项都是一位成员的任务清单：

const taskLists = [
  ['接口联调', '页面走查', '缺陷修复'],
  ['接口联调', '数据库设计', '缺陷修复'],
  ['接口联调', '测试用例', '缺陷修复']
];

函数需要返回所有成员都包含的任务：

intersection(taskLists);
// 应返回：['接口联调', '缺陷修复']

可以先思考：

1. 从哪一份任务清单开始检查比较方便？
2. 怎样判断某个任务是否存在于“剩下的每一份清单”中？
3. 如果传入的是空数组，返回什么比较合理？

你可以使用循环完成，也可以了解一下数组的 every() 方法。

目标三：汇总所有任务

补全：

function union(taskLists)

它需要把多份任务清单合并起来，并去除重复任务。

例如：

const taskLists = [
  ['页面开发', '接口联调'],
  ['接口联调', '数据库设计'],
  ['页面开发', '测试用例']
];

union(taskLists);
// 应返回：['页面开发', '接口联调', '数据库设计', '测试用例']

1. 一次只完成一个 TODO；
2. 在函数中使用 console.log() 查看变量当前的值；
3. 不要只观察页面看起来对不对，也要想办法验证返回数组中的内容。

完成三个基础函数后，可以任选一个方向继续尝试：

• 在页面中增加一位新的项目成员，并观察结果是否会自动变化；
• 增加一种新的“多人配合组合”；
• 在页面中显示所有不同任务的数量；
• 让任务按照名称排序；
• 不使用 Set，尝试用数组实现去重；
• 为三个函数分别补充更多测试数据。

1. 请提交完整项目文件夹，至少包含：

   index.html
   css/style.css
   js/index.js
   js/task-utils.js
   README.md 或做题记录

2. 请在提交时附带一个简单的 README.md ，不需要写得很长，用自己的话回答下面的问题即可：

   • difference、intersection 和 union 分别表示什么？

   • 本题中的“共同任务”为什么不能只比较前两位成员？

   • Set 和数组有什么不同？它在本题中解决了什么问题？

   • 有没有遇到什么问题？通过什么关键词或方法解决的？

   • 如果任务清单中本身出现了重复内容，你的代码会怎样处理？这是你预期的结果吗？

• 数组、对象和 Set 分别适合保存什么数据？
• includes() 和 has() 有什么区别？
• 为什么函数应该 return 一个结果，而不是只在内部 console.log()？
• 什么是“数组组成的数组”？
• 怎样遍历多份任务清单？
• every()、filter()、forEach() 分别有什么作用？
• 为什么修改代码后页面没有变化？是否保存并刷新了页面？
• 页面出现空白时，控制台中是否有报错？
• 怎样将 Set 转换成数组？
• 怎样判断自己的函数能够处理题目之外的新数据？

提交点这里

出题人：  猫染

QQ：604716015

邮箱：604716015@qq.com