当前位置:首页 » 《随便一记》 » 正文

【JavaScript】JS开发中五个常用功能/案例(31-35)(牛客题解)

169 人参与  2022年10月04日 08:50  分类 : 《随便一记》  评论

点击全文阅读


?️ NodeJS专栏:Node.js从入门到精通
?️ 蓝桥杯真题解析:蓝桥杯Web国赛真题解析
? 加入社区领红包:海底烧烤店ai(从前端到全栈)
?‍?个人简介:即将大三的学生,一个不甘平庸的平凡人?
? 你的一键三连是我更新的最大动力❤️!

?分享博主自用牛客网?:一个非常全面的面试刷题求职网站,真的超级好用?


文章目录

前言一、使用Proxy实现访问计数器二、使用Proxy限制用户访问三、监听对象更新视图(简易vue2响应式功能)四、购物面板五、定义接口结语

前言

最近博主一直在牛客网刷题巩固基础知识,牛客网不仅具有公司真题专项练习面试题库在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!

牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点我进入牛客网

牛客网牛客网
在这里插入图片描述在这里插入图片描述

本篇文章所有示例来自于牛客网题库/在线编程/JS篇(31-35题),这些都是前端开发中常用的功能,借此记录一下刷题过程,巩固基础

一、使用Proxy实现访问计数器

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

let count = 0const _proxy = object => {    // 补全代码    return new Proxy(object,{        get(target,key){            if(key in target) {                count++;                 return target.key            }else {                count--;            }                   }    })}

点击深入学习ES6 Proxy对象

二、使用Proxy限制用户访问

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

该函数接收多个参数,首个参数为对象,从第二个参数(包括)往后皆是该对象的属性名通过该函数给首个参数对象添加拦截器功能,每当该对象访问到该函数第二个参数(包括)往后的属性时,返回"noright"字符串,表示无权限
const _proxy = (object,...prototypes) => {    // 补全代码    return new Proxy(object,{        get(tar,key){            // includes方法:判断数组中是否含有某元素             if(prototypes.includes(key)) return "noright"                        return tar[key]        }    })}

三、监听对象更新视图(简易vue2响应式功能)

要求如下:

监听对象属性的变化当"person"对象的属性发生变化时,页面中与该属性相关的数据同步更新
注意:必须使用Object.defineProperty实现且触发set方法时更新视图可以使用预设代码"_render"函数

点击查看Object.defineProperty()用法

这是一个简单的解法:

<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);        // 补全代码        for (let key in person) {            let oldVal = person[key]            Object.defineProperty(person, key, {                get() {                    return oldVal;                },                set(newVal) {                    if (oldVal !== newVal) {                        oldVal = newVal;                        _render(ul);                    }                }            })        }    </script></body>

这是一个与vue2原理更相似的解法(使用到observedefineReactive):

<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);        // 补全代码        function observe(target) {            if (typeof target !== "object" || target == null) {                return            }            for (const key in target) {                defineReactive(target, key, target[key])            }        }                function defineReactive(obj, key, value) {            Object.defineProperty(obj, key, {                get() {                    return value;                },                set(newVal) {                    if (value !== newVal) {                        value = newVal;                        _render(ul);                    }                }            })        }                observe(person)    </script></body>

Vue2响应式原理可查看我的系列文章:

vue2数据响应式原理——数据劫持(初始篇)vue2数据响应式原理——数据劫持(对象篇)vue2数据响应式原理——数据劫持(数组篇)vue2数据响应式原理——依赖收集和发布订阅

四、购物面板

请补全JavaScript代码,要求如下:

当点击"-"按钮时,商品数量减1当点击"+"按钮时,商品数量加1每当点击任意按钮时,购物面板中相关信息必须同步更新
注意:必须使用DOM0级标准事件(onclick

这里遇到一个问题:在定义变量时如果使用const,会通不过牛客系统

<body>    <table>        <thead>            <caption>                商品            </caption>        </thead>        <tbody>            <tr>                <td>炸鸡</td>                <td>28元</td>                <td><button id="zjtaiduola">-</button></td>                <td><span id="zjsl">0</span></td>                <td><button id="zjtaishaola">+</button></td>            </tr>            <tr>                <td>可乐</td>                <td>5元</td>                <td><button id="kltaiduola">-</button></td>                <td><span id="klsl">0</span></td>                <td><button id="kltaishaola">+</button></td>            </tr>            <tr>                <td>总价:</td>                <td><span id="total">0</span></td>            </tr>        </tbody>    </table>    <script type="text/javascript">        // 补全代码        var addzj = document.getElementById('zjtaishaola');        var reducezj = document.getElementById('zjtaiduola');        var zj = document.getElementById('zjsl');        var addkl = document.getElementById('kltaishaola');        var reducekl = document.getElementById('kltaiduola');        var kl = document.getElementById('klsl');        var total = document.getElementById('total');        addzj.onclick = function () {            zj.innerText = Number(zj.innerText) + 1            total.innerText = Number(total.innerText) + 28        }        reducezj.onclick = function () {            if (Number(zj.innerText) > 0) {                zj.innerText = Number(zj.innerText) - 1                total.innerText = Number(total.innerText) - 28            }        }        addkl.onclick = function () {            kl.innerText = Number(kl.innerText) + 1            total.innerText = Number(total.innerText) + 5        }        reducekl.onclick = function () {            if (Number(kl.innerText) > 0) {                kl.innerText = Number(kl.innerText) - 1                total.innerText = Number(total.innerText) - 5            }        }    </script></body>

在这里插入图片描述

五、定义接口

补全JavaScript代码,完成函数的接口功能。要求如下:

函数接收两种类型的参数,分别为"get?“和"update?name=xxx&to=yyy”,“name”、"to"为参数,“xxx”、"yyy"分别为参数对应的值。当参数为"get?"时,返回data数据当参数为"update?name=xxx&to=yyy"时,将data中所有"name"为"xxx"的项,更改为"name"值为"yyy"
let data = [   {name: 'nowcoder1'},   {name: 'nowcoder2'}]const _api = string => {   // 补全代码   if(string=="get?"){       return data;   }else {       var params=string.split('?')[1].split('&');       var oldName=params[0].split('=')[1];       var newName=params[1].split('=')[1];       data.forEach((item) => {           if(item.name==oldName){               item.name=newName           }       })   }}

split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置。

结语

这篇文章的所有内容都出自于牛客网的JS篇题库:
在这里插入图片描述

牛客网的JS题库非常贴合实际的,在写的过程中自己查漏补缺,收获了很多,身为前端,之前的我非常迷茫,不知道怎么刷题,后端常刷的算法题又不太适合我,直到发现牛客网,才结束这一现状!牛客网里的题真的是对前端太友好了,强烈将牛客网推荐给大家!

如果本篇文章对你有所帮助,还请客官一件四连!❤️

基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!


点击全文阅读


本文链接:http://zhangshiyu.com/post/45171.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 回忆审判(陈凡陈青璇)全文免费阅读_回忆审判陈凡陈青璇最新章节列表_笔趣阁(回忆审判小说全文免费阅读)
  • 苏晚晴厉封爵小说(苏晚晴厉封爵)全文免费阅读_苏晚晴厉封爵最新章节列表笔趣阁(苏晚晴厉封爵小说)
  • 苏安妤陆修宸小说(苏安妤陆修宸)全文免费阅读无弹窗_苏安妤陆修宸最新章节列表笔趣阁(苏安妤陆修宸小说免费阅读)
  • 又被病娇缠上了(栾煜常言阳)全文免费阅读无弹窗大结局_(又被病娇缠上了栾煜常言阳小说免费阅读)免费阅读无弹窗最新章节列表_笔趣阁(又被病娇缠上了小说免费阅读)
  • 穿成恋爱脑(张可凝傅文珣)小说免费阅读无弹窗_(穿成恋爱脑张可凝傅文珣)最新章节列表笔趣阁(穿成恋爱脑小说免费阅读)
  • 叶雅馨韩封姜泽(叶雅馨韩封姜泽)全文免费阅读_ 叶雅馨韩封姜泽最新章节列表_笔趣阁(叶雅馨韩封姜泽)
  • 卞妍顾景钰小说(卞妍顾景钰)全文免费阅读_卞妍顾景钰最新章节列表笔趣阁(卞妍顾景钰小说)
  • 订好钻戒(周皓白程颖)小说免费阅读无弹窗_(订好钻戒周皓白程颖)最新章节列表笔趣阁(订好钻戒小说免费阅读)
  • 八个抓马(李程也许橙橙)全文免费阅读无弹窗大结局_(八个抓马李程也许橙橙)免费阅读无弹窗最新章节列表_笔趣阁(八个抓马小说免费阅读)
  • 忘得总裁(陈屿顾千岚)全文免费阅读无弹窗_(忘得总裁陈屿顾千岚)最新章节列表笔趣阁(忘得总裁小说免费阅读)
  • 【蓝桥杯Web】第十四届蓝桥杯(Web 应用开发)模拟赛 2 期 | 精品题解
  • 亲妈传情报(丫丫阿姆)全文免费阅读无弹窗_亲妈传情报最新章节列表_笔趣阁(丫丫阿姆)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备12007198号-1