牛客JS练习题31-40_请补全javascript代码,请给参数对象添加拦截代理功能,并返回这个代理,要求每当通-CSDN博客

本文链接：https://blog.csdn.net/qq_40084198/article/details/128784688

JS31 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 => {
                return new Proxy(object, {
                    get(target, key, receiver) {
                        key in target ? count++: --count;  
                        return Reflect.get(target, key, receiver);
                    },
                    set(target, key, value, receiver) {
                       key in target ? count++: --count;  
                        return Reflect.set(target, key, value, receiver);
                    }
                })
}
        </script>
    </body>
</html>

JS32 Proxy拦截器

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>

        <script type="text/javascript">
            const _proxy = (object,...prototypes) => {
                // 补全代码
                return new Proxy(object, {
                    get(target, key, receiver) {
                        return  prototypes.indexOf(key) != -1 ? "noright" : Reflect.get(target, key, receiver);
                    }
                })
            }
             let me = _proxy({name:'me',age:1,from:'china'},'age');
             console.log("ans: ", me.name === 'me' && me.age === 'noright');
        </script>
    </body>
</html>

JS33 监听对象

描述
请补全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(person).forEach(key => {
    let currentValue = person[key];
    Object.defineProperty(person, key, {
        get() {
            return currentValue;
        },
        set(value) {
            currentValue = value;
            _render(ul);
        }
    });
});
        </script>
    </body>
</html>

JS34 购物面板

描述
请补全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">-</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">
            // 补全代码
            
            const zjDecrease = document.querySelector("#zjtaiduola");
            const zjIncrease = document.querySelector("#zjtaishaola");
            const zjCount = document.querySelector("#zjsl");
            
            
            const klDecrease = document.querySelector("#kltaiduola");
            const klIncrease = document.querySelector("#kltaishaola");
            const klCount = document.querySelector("#klsl");
            
            const tot = document.querySelector("#total");
            
            
            zjIncrease.onclick = () => {
                zjCount.innerHTML = `${zjCount.innerHTML - (-1)}`;
                tot.innerHTML = `${tot.innerHTML - (-28)}`;
            }
                        
            zjDecrease.onclick = () => {
                if(zjCount.innerHTML > 0) {
                    zjCount.innerHTML = `${zjCount.innerHTML - 1}`;
                    tot.innerHTML = `${tot.innerHTML - 28}`;    
                }
            }
            
            
            klIncrease.onclick = () => {
                klCount.innerHTML = `${klCount.innerHTML - (-1)}`;
                tot.innerHTML = `${tot.innerHTML - (-5)}`;
            }
                        
            klDecrease.onclick = () => {
                if(klCount.innerHTML > 0) {
                    klCount.innerHTML = `${klCount.innerHTML - 1}`;
                    tot.innerHTML = `${tot.innerHTML - 5}`;    
                }
            }
            
            
        </script>
    </body>
</html>

JS35 接口

描述
请补全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>
    <body>
    	
        <script type="text/javascript">
            let data = [
                {name: 'nowcoder1'},
                {name: 'nowcoder2'}
            ]
            
            const _api = string => {
                // 补全代码
                const [ins, value] = string.split("?");
                if(ins === "get") return data;
                else {
                    const [_old, _new] = value.split("&");
                    const _old_name = _old.split("=")[1];
                    const _new_name = _new.split("=")[1];
                    
                    console.log(_old_name);
                    console.log(_new_name);
                    
                    for(const item of data) {
                        if(item.name === _old_name) item.name = _new_name;
                    }
                    
                }
            }
        </script>
    </body>
</html>

JS36 切换Tab栏目

描述
请补全JavaScript代码，实现效果如下：

当点击某个栏目（题库、面试、学习、求职）时，该栏目背景色变为’#25bb9b’，其它栏目背景色位’#fff’。
当选中某个栏目时，下方内容就展示索引值相同的类名为".items"的"li"元素
注意：
必须使用DOM0级标准事件（onclick）
已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"items"下的"li"元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            .options li {
                float: left;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border: solid 1px #ddd;
            }

            .items li {
                width: 405px;
                height: 405px;
                display: none;   //
                border: solid 1px #ddd;
            }
        </style>
    </head>
    <body>
        <ul class='options'>
            <li data-type="0" style='background-color: #25bb9b;'>题库</li>
            <li data-type="1">面试</li>
            <li data-type="2">学习</li>
            <li data-type="3">求职</li>
        </ul>
        <ul class='items'>
            <li style="display: block;">牛客题库，包含编程题、选择题等</li>
            <li>为你的面试提供一站式服务</li>
            <li>校招学习来牛客</li>
            <li>求职中有什么难题，可以联系我们</li>
        </ul>

        <script>
            var options = document.querySelector('.options');
            var optionItems = [].slice.call(document.querySelectorAll('.options li'));
            var items = [].slice.call(document.querySelectorAll('.items li'));
            // 补全代码
            options.onclick = (e) => {
              optionItems.forEach((item, idx) => {
                if(e.target === item) {
                  item.style.backgroundColor = "#25bb9b";
                  items[idx].style.display = "block";
                }else {
                  // console.log("set none");
                  item.style.backgroundColor = "";
                  items[idx].style.display = "none";
                }
              });
            }
        </script>
    </body>
</html>

JS37 双向绑定

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

监听对象属性的变化
当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新
注意：
必须使用Object.defineProperty实现且触发set方法时更新视图
必须使用DOM0级标准事件（oninput）
可以使用预设代码"_render"函数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            ul {
                list-style: none;
            }
        </style>
        <input type="text">
        <ul></ul>

        <script>
            var ul = document.querySelector('ul');
            var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
            var inp = document.querySelector('input');
            inp.value = person.weight;
            const _render = () => {
                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>`
                ul.innerHTML = str;
                inp.value = person.weight;
            }
            _render(ul);
            // 补全代码
            for(const e in person) {
                let value = person[e];
                Object.defineProperty(person, e , {
                  get() {
                    return value;
                  },
                  set(v) {
                    value = v;
                    _render();
                  } 
                });
            }
            

            inp.oninput = () => {
              person.weight = inp.value - 0;
            }
        </script>
    </body>
</html>

JS38 高频数据类型

描述
请补全JavaScript代码，要求找到参数数组中出现频次最高的数据类型，并且计算出出现的次数，要求以数组的形式返回。
注意：

基本数据类型之外的任何引用数据类型皆为"object"
当多种数据类型出现频次相同时将结果拼接在返回数组中，出现次数必须在数组的最后

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _findMostType = array => {
                // 补全代码
                const rc = {};
                array.forEach(item => {
                    const ty = typeof item;
                    rc[ty] = (rc[ty] || 0) + 1;
                });
                
                let maxCnt = 0;
                for(const e in rc) {
                    maxCnt = Math.max(maxCnt, rc[e]);
                }
                const ans = [];
                for(const e in rc)
                    if(rc[e] === maxCnt) ans.push(e);
                ans.push(maxCnt);
                return ans;
            }
        </script>
    </body>
</html>

JS39 字体高亮

描述
请补全JavaScript代码，实现一个搜索字体高亮的效果。要求如下：

在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为’yellow’
重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上
如果搜索不到相关内容，清除之前的效果
注意：
需要加粗的文字请使用b标签包裹
必须使用DOM0级标准事件（onclick）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="text">
        <button style="margin-right: 80px">查询</button>
        <div class="text" style="margin-top: 70px">
            牛客网隶属于北京牛客科技有限公司，牛客网成立于 2014 年 9 月，是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率，专注探索在线教育创新模式，致力于为技术求职者提供能力提升解决方案，同时为企业级用户提供更高效的招聘解决方案，并为二者搭建桥梁，构建从学习到职业的良性生态圈。
    发展至今，牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先，产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等，用户覆盖全国高校百万IT学习者并在高速增长中，同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务，并收获良好口碑。
        </div>

        <script>
            var text = document.querySelector(".text");
            var search = document.querySelector("input");
            const btn = document.querySelector("button");
            const textContent = text.textContent;

            btn.onclick = () => {
                // 补全代码
                const searchText = search.value,
                      lenOfSearchText = searchText.length;
                      
                let newText = "", start = 0, cur;
                while((cur = textContent.indexOf(searchText, start)) != -1) {
                  newText += textContent.substr(start, cur - start) + `<b style="background-color: yellow">${searchText}</b>`;
                  start = cur + lenOfSearchText;
                }
                newText += textContent.substr(start);
                text.innerHTML = newText;
           }
        </script>
    </body>
</html>

JS40 虚拟DOM

描述
请补全JavaScript代码，要求将对象参数转换为真实的DOM结构并返回。
注意：

tag为标签名称、props为属性、children为子元素、text为标签内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>

        <script>
            var vnode = {
                tag: 'ul',
                props: {
                    class: 'list'
                },
                text: '',
                children: [
                    {
                        tag: "li",
                        props: {
                            class: "item"
                        },
                        text: '',
                        children: [
                            {
                                tag: undefined,
                                props: {},
                                text: '牛客网',
                                children: []
                            }
                        ]
                    },
                    {
                        tag: "li",
                        props: {},
                        text: '',
                        children: [
                            {
                                tag: undefined,
                                props: {},
                                text: 'nowcoder',
                                children: []
                            }
                        ]
                    }
                ]
            }
            const _createElm = vnode => {
                // 补全代码
                const e = document.createElement(vnode['tag']);
                e.textContent = vnode['text'];
                const props = vnode['props'];
                for(const x in props) {
                    e.setAttribute(x, props[x]);
                }
                for(const x of vnode['children']) {
                    e.appendChild(_createElm(x));
                }
                return e;
            }
            //document.body.appendChild(_createElm(vnode));
        </script>
    </body>
</html>