题目难度：★★★☆

①Proxy技术器

描述

请补全JavaScript代码，请给参数对象添加拦截代理功能，并返回这个代理，要求每当通过代理调用该对象拥有的属性时，"count"值加1，否则减1。

📰代码演示：

<!DOCTYPEhtml><html><head><metacharset=utf-8></head><body><scripttype="text/javascript">letcount=0const_proxy=object=> {
// 创建一个Proxy实例， 该构造函数接收两个参数， 第一个参数是被代理的对象， 第二个参数是处理方法// 在处理方法中设置“ get” 计算方法， 该方法接收两个参数， 第一个参数是被代理的对象， 第二个参数是当前“ get” 读取的属性// 当第二个参数在第一个参数中时，“ count“ 加1， 否则减1letproxy=newProxy(object, {
//必须要写get，因为是查找(取值)方法get: function(a, b) {
console.log(a);
console.log(b);
if (bina) {
count++                } else {
count--                }
            }
        })
returnproxy    }
</script></body></html>

②Proxy拦截器

描述

请补全JavaScript代码，请给参数对象添加拦截代理功能并返回这个代理。要求如下：

1.该函数接收多个参数，首个参数为对象，从第二个参数（包括）往后皆是该对象的属性名

2.通过该函数给首个参数对象添加拦截器功能，每当该对象访问到该函数第二个参数（包括）往后的属性时，返回"noright"字符串，表示无权限。

📰代码演示：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><scripttype="text/javascript">const_proxy= (object, ...prototypes) => {
// 补全代码returnnewProxy(object, {
get(a, b) {
if (prototypes.indexOf(b) >-1)
return'noright'returnobj[b]
                }
            })
        }
</script></body></html>

③监听对象

描述

请补全JavaScript代码，要求如下：

1.监听对象属性的变化

2.当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
注意：

3.必须使用Object.defineProperty实现且触发set方法时更新视图

4.可以使用预设代码"_render"函数

📰代码演示：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"></head><body><style>ul {
list-style: none;
        }
</style><ul></ul><script>varul=document.querySelector('ul');
varperson= {
sex: '男',
age: '25',
name: '王大锤',
height: 28,
weight: 32        };
const_render=element=> {
varstr=`<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);
letvalue=person[key]
console.log(value);
// Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。// person 需要定义属性的当前对象// key 当前需要定义的属性名// {} 属性描述符Object.defineProperty(person, key, {
get() {
returnvalue                },
set(newVal) {
if (newVal!=value) {
value=newVal_render(ul)
                    }
                }
            })
        })
</script></body></html>

④购物面板

描述

请补全JavaScript代码，要求如下：

1.当点击"-"按钮时，商品数量减1

2.当点击"+"按钮时，商品数量加1

3.每当点击任意按钮时，购物面板中相关信息必须同步更新
注意：

4.必须使用DOM0级标准事件（onclick）

📰代码演示：

<!DOCTYPEhtml><html><head><metacharset=utf-8></head><body><table><thead><caption>商品</caption></thead><tbody><tr><td>炸鸡</td><td>28元</td><td><buttonid="zjtaiduola"οnclick="OnClickEvent(event,'zjsl',28)">-</button></td><td><spanid="zjsl">0</span></td><td><buttonid="zjtaishaola"οnclick="OnClickEvent(event,'zjsl',28)">+</button></td></tr><tr><td>可乐</td><td>5元</td><td><buttonid="kltaiduola"οnclick="OnClickEvent(event,'klsl',5)">-</button></td><td><spanid="klsl">0</span></td><td><buttonid="kltaishaola"οnclick="OnClickEvent(event,'klsl',5)">+</button></td></tr><tr><td>总价：</td><td><spanid="total">0</span></td></tr></tbody></table><!--描述--><!--请补全JavaScript代码，要求如下：--><!--1.当点击"-"按钮时，商品数量减1--><!--2.当点击"+"按钮时，商品数量加1--><!--3.每当点击任意按钮时，购物面板中相关信息必须同步更新--><!--注意：--><!--1.必须使用DOM0级标准事件（onclick）--><scripttype="text/javascript">// 补全代码functionOnClickEvent(event, Id, price) {
letSumPrice=document.querySelector('#total')
letElementType=document.querySelector('#'+Id)
letaction=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+1SumPrice.innerText=+SumPrice.innerText+price            } elseif (ElementType.innerText!='0') {
ElementType.innerText=+ElementType.innerText-1SumPrice.innerText=+SumPrice.innerText-price            }
        }
</script></body></html>

⑤接口

描述

请补全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"

📰代码演示：

<!DOCTYPEhtml><html><head><metacharset=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"--><scripttype="text/javascript">letdata= [{
name: 'nowcoder1'        }, {
name: 'nowcoder2'        }]
const_api=string=> {
// 补全代码letarray=string.split('?')
if (array[0] ==='get') {
returndata            } else {
letobj= {}
// 以&拆分成数组letspl=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>