您现在的位置是:首页 > Javascript
当前栏目
刷题日常计~JS④
2023-03-14 22:55:47 时间
题目难度:★★★☆
①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代码,请给参数对象添加拦截代理功能并返回这个代理。要求如下:
1.该函数接收多个参数,首个参数为对象,从第二个参数(包括)往后皆是该对象的属性名
2.通过该函数给首个参数对象添加拦截器功能,每当该对象访问到该函数第二个参数(包括)往后的属性时,返回"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代码,要求如下:
1.监听对象属性的变化
2.当"person"对象的属性发生变化时,页面中与该属性相关的数据同步更新
注意:
3.必须使用Object.defineProperty实现且触发set方法时更新视图
4.可以使用预设代码"_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
2.当点击"+"按钮时,商品数量加1
3.每当点击任意按钮时,购物面板中相关信息必须同步更新
注意:
4.必须使用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代码,完成函数的接口功能。要求如下:
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"
📰代码演示:
<!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>
最后
下篇文章再见ヾ( ̄▽ ̄)ByeBye
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?