• 【JavaScript】JS开发中五个常用功能/案例（36-40）（牛客题解）

    🖥️ NodeJS专栏：Node.js从入门到精通
    🖥️ 博主的前端之路：前端之行，任重道远（来自大三学长的万字自述）
    🧧 加入社区领红包：海底烧烤店ai（从前端到全栈）
    🧑‍💼个人简介：即将大三的学生，一个不甘平庸的平凡人🍬
    👉 你的一键三连是我更新的最大动力❤️！

    🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，真的超级好用（点击跳转）🍬

    文章目录

    前言

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

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

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

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

    一、切换Tab栏目

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

    1. 当点击某个栏目（题库、面试、学习、求职）时，该栏目背景色变为’#25bb9b'，其它栏目背景色位’#fff’。
    2. 当选中某个栏目时，下方内容就展示索引值相同的类名为".items"的"li"元素

    注意：

    1. 必须使用DOM0级标准事件（onclick）
    2. 已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"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 = function (e) {
            for (let i in optionItems) {
                optionItems[i].style.backgroundColor = "";
                items[i].style.display = "none"
            }
            optionItems[e.target.getAttribute('data-type')].style.backgroundColor = "#25bb9b"
            items[e.target.getAttribute('data-type')].style.display = 'block'
        }
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    e.target：获取点击的元素
    getAttribute：获取元素指定的属性值

    二、实现双向绑定（视图与数据绑定）

    补全JavaScript代码，要求如下：

    1. 监听对象属性的变化
    2. 当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
    3. 将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新

    注意：

    1. 必须使用Object.defineProperty实现且触发set方法时更新视图
    2. 必须使用DOM0级标准事件（oninput）
    3. 可以使用预设代码"_render"函数

    这个案例是在【三、监听对象更新视图（简易vue2响应式功能）】的基础上增加了一个数据双向绑定的功能

    <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 = `
  • 姓名：${person.name}
    • 
                           
  • 性别：${person.sex}
    • 
                           
  • 年龄：${person.age}
    • 
                           
  • 身高：${person.height}
    • 
                           
  • 体重：${person.weight}
    • `    
            ul.innerHTML = str;
            inp.value = person.weight;
        }
        _render(ul);
        // 补全代码
        function observe(obj) {
            if (typeof obj !== "object" || obj == 'null') {
                return
            }
            for (const key in obj) {
                defineReactive(obj, key, obj[key])
            }

        }
        function defineReactive(obj, key, value) {
            Object.defineProperty(obj, key, {
                get() {
                    return value;
                },
                set(newVal) {
                    if (newVal !== value) {
                        value = newVal
                        _render(ul);
                    }
                }
            })
        }
        observe(person)
        inp.oninput = function () {
            person.weight = this.value
        }
        script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    三、查找高频数据类型

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

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

    示例：

    输入：__findMostType([0,0,'',''])
输出：['number','string',2]或['string','number',2]

    • 1
    • 2
    const _findMostType = array => {
    // 补全代码
    // 先用对象typeObj保存数组里面的类型以及对应出现的频率，maxType保存最大频率数，returnArr为返回的数组
    let typeObj = {};
    let maxType = 0;
    let returnArr = [];
    // 遍历数组
    for (let item of array) {
        // 获取数据类型
        let type = item === null ? 'null' : (typeof item === 'function' ? 'object' : (typeof item));
        // typeObj中存在该类型时将其频率加一，否者将频率初始化为1
        typeObj[type] ? typeObj[type]++ : typeObj[type] = 1;

        // 更新最大频率
        maxType = typeObj[type] > maxType ? typeObj[type] : maxType;
    }
    // 遍历对象
    for (let key in typeObj) {
        // 将频率最大的类型放到返回的数组中
        if (typeObj[key] == maxType) {
            returnArr.push(key)
        }
    }
    returnArr.push(maxType)
    return returnArr
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    四、搜索字体高亮

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

    1. 在input框中输入要搜索的内容，当点击查询按钮时，被搜索的字体样式变为加粗，背景色变为’yellow’
    2. 重新输入搜索文字，点击查询按钮时，去掉上一次的搜索效果，高亮显示效果只加在本次搜索文字上
    3. 如果搜索不到相关内容，清除之前的效果

    注意：
    4. 需要加粗的文字请使用b标签包裹
    5. 必须使用DOM0级标准事件（onclick）

    <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");
        btn.onclick = () => {
            // 补全代码
            let value = search.value;
            let textValue = text.innerText;
            text.innerHTML = textValue.replace(new RegExp(value,'g'), `${value}`);
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    这里我本来想使用replaceAll，但在牛客上会出现通过不了的情况，于是就使用replace配合正则表达式来实现：

    // replaceAll写法
text.innerHTML = textValue.replaceAll(value, `${value}`)

    • 1
    • 2

    五、根据虚拟DOM生成真实DOM

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

    1. tag为标签名称、props为属性、children为子元素、text为标签内容
    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 { tag, props, text, children } = vnode;
    if (tag) {
        const ele = document.createElement(tag);
        for (const p in props) {
            ele.setAttribute(p, props[p]);
        }
        ele.innerText = text;
        children.forEach(child => ele.appendChild(_createElm(child)));
        return ele;
    }
    return document.createTextNode(text)
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    这一题没有什么难度，主要就是考察了JS操作DOM节点的几个方法：

    • Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素
    • Element.setAttribute()设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性
    • Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处
    • Document.createTextNode()创建一个新的文本节点

    结语

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

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

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

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

  • 相关阅读:
    Java多线程(3)
    Codeforces Round #811 A~F
    库兹涅茨周期
    win下使用vscode+wsl2
    trivy【2】工具漏洞扫描
    eBPF学习笔记（二）—— eBPF开发工具
    ICC2：分段长tree的流程
    北大联合智源提出训练框架LLaMA-Rider
    「C++小游戏教程」基本技巧(1)——随机化
    2022年7月31日--使用C#迈出第一步--使用 C# 创建具有约定、空格和注释的易读代码
  • 原文地址：https://blog.csdn.net/m0_51969330/article/details/126715720