寻找小狼人
介绍
"狼制杀"是一款多制参与的策略类桌面游戏。本题我们一起完成一个简易的狼制杀 游戏,让我们找到其中的狼制。
目标
在本题 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;
}