0


刷题日常计~JS④

请添加图片描述

@作者 : SYFStrive

@博客首页 : 点击跳转HomePage

📜: 初编程JavaScript之每天10🗡5题 👉 从质变到量变💪

🔥:给大家推荐一款的刷题神器(有很多值得学习的编程题目😘)

🔥:🏆🏆🏆 神器链接🔗(一起刷起来吧( ఠൠఠ )ノ)

📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗

💃:坚持锻炼💪

🔗:
请添加图片描述
在这里插入图片描述
相关专栏

①:👉
JS入门到精通(🔥待更)
②:👉
刷题日常计~JS(🔥待更)

题目目录

提示:以下是本篇文章正文内容

题目难度:★★★☆

①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>

最后

在这里插入图片描述
1、码农日常刷题 👉 通过刷题认识到自己的不足,增加对该编程语法的熟练度(可以很大程度提升自己的编程水平(ง •_•)ง)
2、感谢大佬们的支持,你们的支持是我们更新的最大动力,希望这篇文章能帮到大家
3、最后,在这里分享一款刷题神器(里面还有很多值得学习的题目)点击跳转至刷题神器(一起刷起来吧( ఠൠఠ )💪),

在这里插入图片描述

下篇文章再见ヾ( ̄▽ ̄)ByeBye

在这里插入图片描述


本文转载自: https://blog.csdn.net/m0_61490399/article/details/126422511
版权归原作者 SYFStrive 所有, 如有侵权,请联系我们删除。

“刷题日常计~JS④”的评论:

还没有评论