1.29-web

寻找小狼人

介绍

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

目标

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

1. 狼制比较狡猾,筛选狼制的条件可能会变化,例如  item.name,请实现一 个通用的方法。

2. 完成封装后,  页面效果会自动完成,  效果见文件夹下  effect.gif (请使 用 VS Code 或者浏览器打开 gif 图片)。

        我们只需要创建一个新数组，然后遍历this，将this里的每一个对象传进myarray方法的回调函数cb（ 即(item) => item.category == "werewolf"）中，由cb进行判断是否符合条件，如果符合我们就将这个对象数据加入到我们创建的新数组中，最最最后我们将新数组return返回即可

 .....思路：

1. 在html的script里调用一个myarray方法，它被定义为一个接受回调函数 cb 的函数。

 let newcardList = cardList.myarray((item) => item.category == "werewolf");

2. - 实参是——(item) => item.category == "werewolf"

   - 形参是cb

3. 所以上面是定义一个形参为cb方法的函数

4. this指向cardList，在函数中通过遍历cardList里的元素，并对其进行cb方法的判断，返回的对象代表狼人，并通过push加到arr数组中，最最最后返回这个狼人数组，进而在页面显示

// 返回条件为真的新数组
Array.prototype.myarray = function(cb) {
    // TODO：待补充代码
    let arr = []
    this.forEach(item => {
        if (cb(item)) {
            arr.push(item)
        }
    })
    return arr
};

 TIP：

1.JavaScript的prototype（原型）是什么？

简单的说 JS是基于原型的语言，当我们调用一个对象的属性时，如果该对象没有该属性，JS解释器就会从对象的原型对象上去找该属性，如果原型上也没有该属性，就去找原型的原型 直到最后返回null.这种属性查找的方式称为prototype chain.

在JS中 原型也是一个对象 通过原型可以实现 对象的属性继承。JS对象都包含了一个[prototype]的内部属性，这个属性所对应的值就是该对象的原型。

2. 对于this理解

对于myarray方法，它被添加到了Array.prototype上，这意味着它将成为所有数组实例的一个方法。

当在数组实例上调用这个方法时，比如cardList.myarray(...)，this在myarray函数体内部将指向调用该方法的数组实例，即cardList。

即"this" 指向调用这个方法的数组实例  

3. 箭头函数与this关系

-  在箭头函数内部，"this" 继承自外部的作用域  
-  因此，这里的 "this" 仍然指向 cardList（或调用 myarray 的任何数组）

- 重要的是要注意，如果您在myarray方法内部使用了普通函数而不是箭头函数，那么这些普通函数内部的this可能不会指向您期望的数组实例。

4.push（）方法

push 方法是 JavaScript 数组 (Array) 的一个内置方法，用于将一个或多个元素添加到数组的末尾，并返回新的长度。这个方法会直接修改原数组。

返回值：

当调用 push 方法后，会返回数组新的长度。

tip：push 方法有一个相对应的 pop 方法，它从数组的末尾移除并返回最后一个元素。

图片水印生成 

function createWatermark(text, color, deg, opacity, count) {
    // 创建水印容器
    const container = document.createElement("div");
    container.className = "watermark";
    // TODO: 根据输入参数创建文字水印
    for(let i=0;i<count;i++){
      container.innerHTML+=`<span style="color: ${color}; transform: rotate(${deg}deg); opacity: ${opacity};">${text}</span>`
    }
    return container;
  }