寻找小狼人

介绍

“狼人杀”是一款多人参与的策略类桌面游戏。本题我们一起完成一个简易的狼人杀游戏，让我们找到其中的狼人。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css
│   └── style.css
├── images
│   └── card.svg
├── index.html
└── js
    └── myarray.js

其中：

css/style.css 是样式文件。
index.html 是主页面。
images 是图片文件夹。
js/myarray.js 是需要补充的 js 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1 2	cd /home/project wget https://labfile.oss.aliyuncs.com/courses/9791/09.zip && unzip 09.zip && rm 09.zip

在浏览器中预览 index.html 页面效果如下：

初始效果

目标

在本题 index.html 已经给出的数组中，我们可以通过数组的 filter 方法：cardList.filter((item) => item.category == "werewolf") 返回一个都是狼人的新数组。但是技术主管为了考验大家的技术，规定了在代码中任何地方都不能出现 filter 关键字。所以我们需要封装一个 myarray 方法来实现类似数组 filter 的功能。

狼人比较狡猾，筛选狼人的条件可能会变化，例如 item.name，请实现一个通用的方法。
完成封装后，页面效果会自动完成，效果见文件夹下 effect.gif（请使用 VS Code 或者浏览器打开 gif 图片）。

规定

禁止在代码中出现 filter 关键字。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 937 | 总提交次数: 951 | 通过率: 98.5%

难度: 中等标签: 2022, 省赛, Web 前端, JavaScript

题解

寻找小狼人-叛逆的代码

既然不能用 filter 关键字，那就用 filter 字符串吧

1
2
3

Array.prototype.myarray = function (cb) {
  return this['filter'](cb)
}

可以写得更简单一点：

1	Array.prototype.myarray = Array.prototype['filter']

接下来让我们自己实现一个 filter 吧

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO：待补充代码
  // this：谁调用我，我指向谁：[{"id":1,"category":"werewolf","name":"小狼人"},{"id":2,"category":"werewolf","name":"小狼人"},{"id":3,"category":"hunter","name":"猎人"},{"id":4,"category":"poor","name":"平民"},{"id":5,"category":"witch","name":"女巫"},{"id":6,"category":"prophet","name":"预言家"},{"id":7,"category":"poor","name":"平民"},{"id":8,"category":"werewolf","name":"黑狼王"},{"id":9,"category":"poor","name":"平民"}]
  // cardList 调用了 myarray方法，card List是[{"id":1,"category":"werewolf","name":"小狼人"},{"id":2,"category":"werewolf","name":"小狼人"},{"id":3,"category":"hunter","name":"猎人"},{"id":4,"category":"poor","name":"平民"},{"id":5,"category":"witch","name":"女巫"},{"id":6,"category":"prophet","name":"预言家"},{"id":7,"category":"poor","name":"平民"},{"id":8,"category":"werewolf","name":"黑狼王"},{"id":9,"category":"poor","name":"平民"}]
  // reduce(callback, 初始值)
  // reduce((a,v) => {})
  // 在 reduce 方法中，回调函数接受四个参数：
  // accumulator（累加器）：它是累加器的累计值，也就是在每次回调函数执行时传递给下一次调用的值。它是 reduce 方法的第一个参数，通常被命名为 acc 或者 accumulator。
  // currentValue（当前值）：它是数组正在处理的当前元素。在每次迭代中，它是数组中当前正在处理的元素。它是 reduce 方法的第二个参数，通常被命名为 currentValue 或者简写为 v。
  // currentIndex（当前索引）：可选参数，它是当前正在处理的元素在数组中的索引。
  // array（数组）：可选参数，它是正在操作的数组。
  // 在你提供的代码中，只使用了累加器 acc 和当前值 currentValue，而省略了当前索引和数组参数。这是因为在这个具体的实现中，我们并不需要使用数组的索引和数组本身，所以我们选择忽略它们。
  // 所以，acc 是累加器的累计值，而 currentValue 是当前正在处理的数组元素的值。在每次迭代中，累加器的值会根据当前元素的值进行更新，并在下一次迭代中传递给回调函数的第一个参数。
  
  // cb : 是一个回调函数：(item) => item.category == "werewolf"
  // cb(v) ===> 如果v.category === werewolf，返回true，
  // 如果是true， 那么做这个数组：[...a, v]，全部放进去，
  // 如果不是true， 那么不用放v进去，继续是a，
  // reduce的第二个参数：初始值： []
  return this.reduce((a, v) => (cb(v) ? [...a, v] : a), []);
};