@作者 : SYFStrive
@博客首页 : 点击跳转HomePage
📜： 初编程JavaScript之每天10🗡5题 👉 从质变到量变💪
📌：个人社区（欢迎大佬们加入） 👉：社区链接🔗
💃：坚持锻炼💪
🔗：点击直接阅读文章
①：👉 JS入门到精通（🔥待更） ②：👉 刷题日常计~JS（🔥待更）
题目目录
- 题目难度：★★★☆
- ①Proxy技术器
- ②Proxy拦截器
- ③监听对象
- ④购物面板
- ⑤接口
- 最后
提示：以下是本篇文章正文内容
题目难度：★★★☆
①Proxy技术器
描述
请补全JavaScript代码，请给参数对象添加拦截代理功能，并返回这个代理，要求每当通过代理调用该对象拥有的属性时，"count"值加1，否则减1。
📰代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
let count = 0
const _proxy = object => {
// 创建一个Proxy实例， 该构造函数接收两个参数， 第一个参数是被代理的对象， 第二个参数是处理方法
// 在处理方法中设置“ get” 计算方法， 该方法接收两个参数， 第一个参数是被代理的对象， 第二个参数是当前“ get” 读取的属性
// 当第二个参数在第一个参数中时，“ count“ 加1， 否则减1
let proxy = new Proxy(object, {
//必须要写get，因为是查找(取值)方法
get: function(a, b) {
console.log(a);
console.log(b);
if (b in a) {
count++
} else {
count--
}
}
})
return proxy
}
</script>
</body>
</html>
②Proxy拦截器
描述
请补全JavaScript代码，请给参数对象添加拦截代理功能并返回这个代理。要求如下：
- 该函数接收多个参数，首个参数为对象，从第二个参数（包括）往后皆是该对象的属性名
- 通过该函数给首个参数对象添加拦截器功能，每当该对象访问到该函数第二个参数（包括）往后的属性时，返回"noright"字符串，表示无权限。
📰代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
const _proxy = (object, ...prototypes) => {
// 补全代码
return new Proxy(object, {
get(a, b) {
if (prototypes.indexOf(b) > -1)
return 'noright'
return obj[b]
}
})
}
</script>
</body>
</html>
③监听对象
描述
请补全JavaScript代码，要求如下：
- 监听对象属性的变化
- 当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
注意： - 必须使用Object.defineProperty实现且触发set方法时更新视图
- 可以使用预设代码"_render"函数
📰代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
ul {
list-style: none;
}
</style>
<ul></ul>
<script>
var ul = document.querySelector('ul');
var person = {
sex: '男',
age: '25',
name: '王大锤',
height: 28,
weight: 32
};
const _render = element => {
var str = `<li>姓名：<span>${person.name}</span></li>
<li>性别：<span>${person.sex}</span></li>
<li>年龄：<span>${person.age}</span></li>
<li>身高：<span>${person.height}</span></li>
<li>体重：<span>${person.weight}</span></li>`
element.innerHTML = str;
}
_render(ul);
// 补全代码
// 该方法返回给定对象自己的可枚举属性名称Object.keys()的数组，以与正常循环相同的顺序进行迭代。
Object.keys(person).forEach(key => {
console.log(key);
let value = person[key]
console.log(value);
// Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
// person 需要定义属性的当前对象
// key 当前需要定义的属性名
// {} 属性描述符
Object.defineProperty(person, key, {
get() {
return value
},
set(newVal) {
if (newVal != value) {
value = newVal
_render(ul)
}
}
})
})
</script>
</body>
</html>
④购物面板
描述
请补全JavaScript代码，要求如下：
- 当点击"-"按钮时，商品数量减1
- 当点击"+"按钮时，商品数量加1
- 每当点击任意按钮时，购物面板中相关信息必须同步更新
注意： - 必须使用DOM0级标准事件（onclick）
📰代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<table>
<thead>
<caption>
商品
</caption>
</thead>
<tbody>
<tr>
<td>炸鸡</td>
<td>28元</td>
<td><button id="zjtaiduola" οnclick="OnClickEvent(event,'zjsl',28)">-</button></td>
<td><span id="zjsl">0</span></td>
<td><button id="zjtaishaola" οnclick="OnClickEvent(event,'zjsl',28)">+</button></td>
</tr>
<tr>
<td>可乐</td>
<td>5元</td>
<td><button id="kltaiduola" οnclick="OnClickEvent(event,'klsl',5)">-</button></td>
<td><span id="klsl">0</span></td>
<td><button id="kltaishaola" οnclick="OnClickEvent(event,'klsl',5)">+</button></td>
</tr>
<tr>
<td>总价：</td>
<td><span id="total">0</span></td>
</tr>
</tbody>
</table>
<!--描述-->
<!--请补全JavaScript代码，要求如下：-->
<!--1. 当点击"-"按钮时，商品数量减1-->
<!--2. 当点击"+"按钮时，商品数量加1-->
<!--3. 每当点击任意按钮时，购物面板中相关信息必须同步更新-->
<!--注意：-->
<!--1. 必须使用DOM0级标准事件（onclick）-->
<script type="text/javascript">
// 补全代码
function OnClickEvent(event, Id, price) {
let SumPrice = document.querySelector('#total')
let ElementType = document.querySelector('#' + Id)
let action = event.target.innerText
// innerHTML： 设置或获取元素内的所有子节点（包括标签、注释和文本节点）
// outerHTML： 设置或获取元素及所有子节点（包括标签、注释和文本节点）
// innerText： 1、获取元素的文本，会过滤掉所以标签，将文档树中的所有文本拼接起来
// 2、设置时会把元素所以子节点都删除再重写
// 3、利用这一点，可以通过 innerText 属性过滤掉 HTML 标签
console.log(ElementType.innerHTML)
console.log(ElementType.innerText)
if (action == "+") {
ElementType.innerText = +ElementType.innerText + 1
SumPrice.innerText = +SumPrice.innerText + price
} else if (ElementType.innerText != '0') {
ElementType.innerText = +ElementType.innerText - 1
SumPrice.innerText = +SumPrice.innerText - price
}
}
</script>
</body>
</html>
⑤接口
描述
请补全JavaScript代码，完成函数的接口功能。要求如下：
- 函数接收两种类型的参数，分别为"get?“和"update?name=xxx&to=yyy”，“name”、"to"为参数，“xxx”、"yyy"分别为参数对应的值。
- 当参数为"get?"时，返回data数据
- 当参数为"update?name=xxx&to=yyy"时，将data中所有"name"为"xxx"的项，更改为"name"值为"yyy"
📰代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<objody>
<!--描述-->
<!--请补全JavaScript代码，完成函数的接口功能。要求如下：-->
<!--1. 函数接收两种类型的参数，分别为"get?"和"update?name=xxx&to=yyy"，"name"、"to"为参数，"xxx"、"yyy"分别为参数对应的值。-->
<!--2. 当参数为"get?"时，返回data数据-->
<!--3. 当参数为"update?name=xxx&to=yyy"时，将data中所有"name"为"xxx"的项，更改为"name"值为"yyy"-->
<script type="text/javascript">
let data = [{
name: 'nowcoder1'
}, {
name: 'nowcoder2'
}]
const _api = string => {
// 补全代码
let array = string.split('?')
if (array[0] === 'get') {
return data
} else {
let obj = {}
// 以&拆分成数组
let spl = array[1].split('&')
spl.forEach(item => {
let [key, value] = item.split('=')
obj[key] = value
})
data.forEach((item, index) => {
if (item.name == obj.name) {
data[index].name = obj.to
}
})
}
}
_api("update?name=xxx&to=yyy")
</script>
</objody>
</html>
最后
1、码农日常刷题 👉 通过刷题认识到自己的不足，增加对该编程语法的熟练度（可以很大程度提升自己的编程水平(ง •_•)ง）
2、感谢大佬们的支持，你们的支持是我们更新的最大动力，希望这篇文章能帮到大家
3、最后，在这里分享一款刷题神器（里面还有很多值得学习的题目）点击跳转至刷题神器（一起刷起来吧( ఠൠఠ )💪），
下篇文章再见ヾ(￣▽￣)ByeBye
